tablayout使用

![这里写代码片](http://upload-images.jianshu.io/upload_images/1209193-af949331f75e6ebe.png?imageMogr2/auto-orient/strip%7CimageView2/2)过程　　因为TabLayout和ViewPager分别是属于design和v4包下的，所以我们先在app的build.gradle中添加：compile 'com.android.support:design:23.1.1'compile 'com.android.support:support-v4:23.1.1'然后在主布局文件activity_main.xml中添加布局控件：<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:scrollbars="none">    </android.support.v4.view.ViewPager>    <android.support.design.widget.TabLayout        android:id="@+id/tabLayout"        android:layout_width="match_parent"        android:layout_height="50dp"        app:tabGravity="fill"        app:tabIndicatorHeight="0dp"        app:tabMode="fixed"        app:tabSelectedTextColor="#FF4081"        app:tabTextColor="#000">    </android.support.design.widget.TabLayout></LinearLayout>　　就仅一个ViewPager和TabLayout就可以实现，是不是比以前的方法繁琐的布局简便很多？上面TabLayout中app:tabIndicatorHeight="0dp"是为了不显示tab底部的横线，app:tabMode="fixed"是让底部tab布局不可滑动。接下来就和往常一样在MainActivity.java中初始化布局，设置适配器：    private void initViews() {        mTablayout= (TabLayout) findViewById(R.id.tabLayout);        mViewPager= (ViewPager) findViewById(R.id.viewPager);        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {            private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};            @Override            public Fragment getItem(int position) {                if (position == 1) {                    return new TwoFragment();                } else if (position == 2) {                    return new ThreeFragment();                }else if (position==3){                    return new FourFragment();                }                return new OneFragment();            }            @Override            public int getCount() {                return mTitles.length;            }            @Override            public CharSequence getPageTitle(int position) {                return mTitles[position];            }        });        mTablayout.setupWithViewPager(mViewPager);        one = mTablayout.getTabAt(0);        two = mTablayout.getTabAt(1);        three = mTablayout.getTabAt(2);        four = mTablayout.getTabAt(3);        one.setIcon(getResources().getDrawable(R.drawable.ic_color));        two.setIcon(getResources().getDrawable(R.drawable.ic_color));        three.setIcon(getResources().getDrawable(R.drawable.ic_color));        four.setIcon(getResources().getDrawable(R.drawable.ic_color));    }上面要注意的地方是别忘了在FragmentPagerAdapter中手动添加：            @Override            public CharSequence getPageTitle(int position) {                return mTitles[position];            }不然不显示底部的文字。mTablayout.setupWithViewPager(mViewPager);将TabLayout和ViewPager关联起来。one = mTablayout.getTabAt(0);获取底部单个tab，用来添加初始化图片，注意下标都是从0开始的。初始化监听事件    private void initEvents() {        mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }　　在onTabSelected中设置选中tab时切换的图片，onTabUnselected中设置没有被选中时的图片。别忘了mViewPager.setCurrentItem(0);这句，这是用来点击tab时切换ViewPager，如果不加这一句的话滑动ViewPager底部tab可以切换，但是点击tab而ViewPager不会切换。Fragment中的简单布局fragment_one.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="唐僧"        android:layout_marginTop="100dp"        android:layout_gravity="center"        android:textSize="30sp"/></LinearLayout>OneFragment.javapublic class OneFragment extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        return inflater.inflate(R.layout.fragment_one,container,false);    }    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);    }}MainActivity.java完整代码：public class MainActivity extends AppCompatActivity {    private TabLayout mTablayout;    private ViewPager mViewPager;    private TabLayout.Tab one;    private TabLayout.Tab two;    private TabLayout.Tab three;    private TabLayout.Tab four;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initViews();        initEvents();    }    private void initEvents() {        mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }    private void initViews() {        mTablayout= (TabLayout) findViewById(R.id.tabLayout);        mViewPager= (ViewPager) findViewById(R.id.viewPager);        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {            private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};            @Override            public Fragment getItem(int position) {                if (position == 1) {                    return new TwoFragment();                } else if (position == 2) {                    return new ThreeFragment();                }else if (position==3){                    return new FourFragment();                }                return new OneFragment();            }            @Override            public int getCount() {                return mTitles.length;            }            @Override            public CharSequence getPageTitle(int position) {                return mTitles[position];            }        });        mTablayout.setupWithViewPager(mViewPager);        one = mTablayout.getTabAt(0);        two = mTablayout.getTabAt(1);        three = mTablayout.getTabAt(2);        four = mTablayout.getTabAt(3);        one.setIcon(getResources().getDrawableR.drawable.ic_color);        two.setIcon(getResources().getDrawable(R.drawable.ic_color));        three.setIcon(getResources().getDrawable(R.drawable.ic_color));        four.setIcon(getResources().getDrawable(R.drawable.ic_color));    }}在drawable中建：<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@drawable/fenxi"/>    <item android:state_selected="false" android:drawable="@drawable/ic_launcher"></item></selector>结束语