1.简介

          我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求，在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。下面我就举一个简单的例子来使用它。
     使用的 android studio进行开发的，所以引用TabLayout很简单，只要在build.gradle中加入 compile 'com.android.support:design:23.3.0'即可。
       

2.引用库

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

布局

<?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">


    <include layout="@layout/titlebar" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_bright"
        app:tabIndicatorColor="@android:color/background_dark"
        app:tabSelectedTextColor="@android:color/background_dark"
        app:tabTextColor="@android:color/white" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

 

定义和创建MyFragment

/**
 * 项目名：Software_Framework
 * 包名：com.chengdong.software_framework.TableLayout.Fragmnet
 * 文件名：MyFragment
 * 创建者：周成东
 * 创建时间:2017/9/15 22:46
 * 描述：ToDo
 */

public class MyFragment extends Fragment {
 private String title;

    public String getTitle() {
        return title;
    }

    public String getContent() {
        return content;
    }

    private String content;
    private TextView textView;

    private Context context;

    public MyFragment(String title, String content) {
        this.title = title;
        this.content = content;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.context = getActivity();
    }

    /**
     * 綁定數據
     *
     * @param savedInstanceState
     */
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        textView.setText(content);
        super.onActivityCreated(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        textView = new TextView(context);
        textView.setTextSize(18);
        textView.setTextColor(Color.RED);
        textView.setGravity(Gravity.CENTER);
        return textView;
    }
}

设置viewpager适配器

public class TalbeLayoutAdapter extends FragmentPagerAdapter {
    private final ArrayList<MyFragment> mFragments;

    public TalbeLayoutAdapter(FragmentManager fm, ArrayList<MyFragment> myFragments) {
        super(fm);
        this.mFragments=myFragments;
    }

    @Override
    public Fragment getItem(int position) {

        return mFragments.get(position);

    }

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

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

设置TableLayoutActivity 

public class TableLayoutActivity extends FragmentActivity {
    @Bind(R.id.tv_title)
    TextView tvTitle;
    @Bind(R.id.tabLayout)
    TabLayout tabLayout;
    @Bind(R.id.viewPager)
    ViewPager viewPager;
    private ArrayList<MyFragment> myFragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_main);
        ButterKnife.bind(this);
        tvTitle.setText("TableLayout的使用");
        myFragments = new ArrayList<>();

        for(int i=0;i<12;i++){
            myFragments.add(new MyFragment("标题"+i,"内容"+i));
        }
        TalbeLayoutAdapter adapter=new TalbeLayoutAdapter(getSupportFragmentManager(),myFragments);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }
}