Android:TabLayout的用法

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了。在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，可以完全替代TabPageIndicator，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。

使用 android studio进行开发引用TabLayout很简单，只要在build.gradle中加入

compile'com.android.support:design:22.2.0'

即可。

主布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.myapplication.tablayoutdemo.MainActivity"
>

<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ff0f"
app:tabIndicatorColor="#ffffff"
app:tabSelectedTextColor="#faaa"
app:tabTextColor="#ffffff"
/>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>

app:tabIndicatorColor ：tab的指示符颜色，类似下划线

app:tabSelectedTextColor ：选择tab的文本颜色

app:tabTextColor ：普通tab字体颜色

app:tabMode 模式：fixed和scrollable ；

fixed是指固定个数（平分屏幕），

scrollable是可以横行滚动的（适用于title比较多的时候，如果title比较少别选scrollable，否则title会左对齐的挤在一起）

app:tabGravity： 对齐方式，可选fill和center

MainActivity：

package com.myapplication.tablayoutdemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout tabLayout;
private MyPagerAdapter myPagerAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}

private void init() {
//初始化控件
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
//初始化适配器
myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(myPagerAdapter);

//设置TabLayout的模式
// tabLayout.setTabMode(TabLayout.MODE_FIXED);

// 运行后，title比较少的时候该模式下TabLayout标签挤到一块去了
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

//将tabLayout和viewPager绑定在一起
tabLayout.setupWithViewPager(viewPager);
}
}

MyAdapter中的代码：

package com.myapplication.tablayoutdemo;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
* Created by Administrator on 2016/3/13.
*/
public class MyPagerAdapter extends FragmentPagerAdapter {

private List<String> stringList;
private Context context;

public MyPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;

stringList = new ArrayList<>();
stringList.add("热门推荐");
stringList.add("热门新闻");
stringList.add("本月热榜");
stringList.add("我的收藏");
stringList.add("我的相册");
stringList.add("联系我们");

}

@Override
public Fragment getItem(int position) {
return PagerFragment.newInstance(position + 1);
}

@Override
public int getCount() {
return stringList.size();
}

@Override
public CharSequence getPageTitle(int position) {
return stringList.get(position);
}
}

pagerFragment中的代码：

package com.myapplication.tablayoutdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
* A simple {@link Fragment} subclass.
*/
public class PagerFragment extends Fragment {
private int mPage;
public static final String ARG_PAGE = "ARG_PAGE";

public static PagerFragment newInstance(int page) {
Bundle bundle = new Bundle();
bundle.putInt(ARG_PAGE, page);
PagerFragment pagerFragment = new PagerFragment();
pagerFragment.setArguments(bundle);
return pagerFragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_pager, container, false);
TextView textView = (TextView) view;
textView.setText("Fragment #" + mPage);
return view;
}

}

PagerFragment布局文件：

<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>