TabLayout的简单使用(记录)

项目刚好用到，暂时只能简单地使用，一般情况下，TabLayout都是会和ViewPager、Fragment一起使用的，下面是三者结合的简单介绍

• 布局：
  TabLayout＋ViewPager的xml布局如下：

<?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"
    
    android:layout_width="match_parent"
    
    android:layout_height="match_parent"
    
    android:orientation="vertical">

    

    <android.support.design.widget.TabLayout
        
        android:id="@+id/mytablayout"
        
        android:layout_width="match_parent"
        
        android:layout_height="?attr/actionBarSize"
        
        app:tabIndicatorColor="#1852b6"
        
        app:tabIndicatorHeight="1dp"
        
        app:tabSelectedTextColor="#1852b6"
        
        app:tabTextColor="#383a3d"/>

    

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


</LinearLayout>

注意：这里需要说明几个属性：

• app:tabIndicatorColor="color"：指定Tab被选中时Tab下面的横线的颜色

• app:tabIndicatorHeight="dp"：指定Tab被选中时Tab下面的横线的高度

• app:tabSelectedTextColor="color"：指定Tab的字辈选中时显示的颜色

app:tabTextColor="color"：Tab默认时的颜色，即不选中时文字的颜色

• Activity的代码如下：

public class TabLayoutAty extends AppCompatActivity {

    //TabLayout
    private TabLayout mTabLayout;
    //ViewPager
    private ViewPager mViewPager;

    //定义集合，用于保存tab
    private List<String> mTabList;
    //定义集合，用于保存Fragment
    private List<Fragment> mFrList;

    //填充到ViewPager的Fragment
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    private Fragment3 fragment3;

    //ViewPager的适配器
    private TabLayoutAdapter mAdapter;

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

        //初始化
        initViews();

        initDatas();
    }

    /**
     * 初始化组件
     */
    private void initViews() {

        mTabLayout = (TabLayout) findViewById(R.id.mytablayout);
        mViewPager = (ViewPager) findViewById(R.id.myviewpager);
    }

    /**
     * 初始化数据
     */
    private void initDatas() {

        mTabList = new ArrayList<>();
        mTabList.add("选项1");
        mTabList.add("选项2");
        mTabList.add("选项3");

        mFrList = new ArrayList<>();
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        mFrList.add(fragment1);
        mFrList.add(fragment2);
        mFrList.add(fragment3);

        //设置模式
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        //添加TAB
        for (String str : mTabList) {
            mTabLayout.addTab(mTabLayout.newTab().setText(str + ""));
        }

        //获取适配器实例
        mAdapter = new TabLayoutAdapter(getSupportFragmentManager(), mFrList, mTabList);

        //为ViewPager设置适配器
        mViewPager.setAdapter(mAdapter);

        //为TabLayout设置ViewPager
        mTabLayout.setupWithViewPager(mViewPager);

    }
}

• 适配器代码如下：

public class TabLayoutAdapter extends FragmentPagerAdapter {

    private List<String> mTitleList;
    private List<Fragment> mFrList;

    public TabLayoutAdapter(FragmentManager fm, List<Fragment> fragmentList,
                            List<String> list) {
        super(fm);
        this.mTitleList = list;
        this.mFrList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return mFrList.get(position);
    }

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

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

适配器的用法与ViewPager+Fragment是一样，只是需要重写public CharSequence getPageTitle(int position) 方法，为Tab设置内容

• Fragment没有实现任何东西，因此不贴出了，
• 效果图片如下：

Paste_Image.png