Android:使用TabLayout详解

 TabLayout的实现

安卓中实现以上选项卡的效果方式有很多种，TabHost，自定义控件（第三方库），RadioGroup等等。这里主要介绍Android Design库中的TabLayout的使用。TabLayout是安卓6.0之后出现的。

基本使用步骤：

一、

在Android Studio中可以直接引用design库，第一步当然是先引入这个库了，如下图：

二、

在布局中加入TabLayout控件

<android.support.design.widget.TabLayout
    android:id="@+id/mytab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ></android.support.design.widget.TabLayout>

三、

在java代码中添加Tab实现选项卡效果

package com.contentprovide.liuliu.tablayout_demo;

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

public class MainActivity extends AppCompatActivity {

    TabLayout mytab;


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

        mytab = (TabLayout) findViewById(R.id.mytab);

        mytab.addTab(mytab.newTab().setText("选项卡一").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡二").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡三").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡四").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡五").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡六").setIcon(R.mipmap.ic_launcher));


    }



}

 这三步完成已经初步实现选项卡效果了

 

接下来进一步的使用就是给选项卡加一些效果，让它看起来更好看

 改变Tab颜色

设置字体默认颜色

app:tabTextColor="#ffffff"

设置字体被选中后的颜色

app:tabSelectedTextColor="#e40707"

 设置指示器颜色

app:tabIndicatorColor="#30e407"

 设置指示器高度（如果希望选项卡不显示指示器效果只需要把指示器高度设置为0就行了）

 app:tabIndicatorHeight="2dp"

 设置Tab背景颜色（作用效果和Background一样）

app:tabBackground="@color/colorye"

设置Tab滚动方式

可滚动

app:tabMode="scrollable"

固定

app:tabMode="fixed"

给Tab添加图标，在Java代码中实现

 　　　　mytab.addTab(mytab.newTab().setText("选项卡一").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡二").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡三").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡四").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡五").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡六").setIcon(R.mipmap.ic_launcher));

我设置完这些属性后的效果是这样的

TabLayout的监听事件

选中了某个tab的监听事件OnTabSelectedListener()：

setOnTabSelectedListener()这个方法已经被抛弃了，现在一般使用addOnTabSelectedListener

       mytab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
//                添加选中Tab的逻辑
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
//                添加未选中Tab的逻辑
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
//                再次选中tab的逻辑
            }
        });

最后实用性比较强的是将TabLayout和ViewPager关联，这种使用方法比较灵活，在实际开发中一般都是这样配合使用

关联TabLayout和ViewPager只需要调用mytab.setupWithViewPager(mViewPager);

这里记录一下通过使用Fragment作为ViewPager的内容，再将ViewPager关联

步骤一、

在布局文件中TabLayout控件的下方添加ViewPager控件（如果需要选项卡位于底部实现类似QQ的那种效果，只需要把ViewPager控件放在TabLayout控件的上面就行了）

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

步骤二、

在Java代码中定义两个List集合，一个放TabLayout标题Title，一个放TabLayout内容Fragment

    List<String> mTitle;
    List<Fragment> mFragment;

给这两个集合添加内容

　　　　　　mTitle = new ArrayList<>();
        mTitle.add("选项卡一");
        mTitle.add("选项卡二");
        mTitle.add("选项卡三");
        mTitle.add("选项卡四");

        mFragment = new ArrayList<>();
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());

步骤三、

给ViewPager创建适配器，将Title和Fragment添加进ViewPager中

mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }

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

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

步骤四、

最后一步当然是将ViewPager和TabLayout关联起来了

        mytab.setupWithViewPager(mViewPager);

全部代码如下

public class MainActivity extends AppCompatActivity {

    TabLayout mytab;
    ViewPager mViewPager;
    List<String> mTitle;
    List<Fragment> mFragment;

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

        mytab = (TabLayout) findViewById(R.id.mytab);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);

        mTitle = new ArrayList<>();
        mTitle.add("选项卡一");
        mTitle.add("选项卡二");
        mTitle.add("选项卡三");
        mTitle.add("选项卡四");

        mFragment = new ArrayList<>();
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());

        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }

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

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

        mytab.setupWithViewPager(mViewPager);

    }


}

最后补充一点：最好给ViewPager添加上预加载，这样看起来的效果会好一点

 预加载界面个数，表示你的预告加载的页面数量的个数,假设我设置为2，当前显示一个,预先加载两个个.这样你在移动前就已经加载了下一个界面,移动时就可以看到已经加载的界面了.

 

mViewPager.setOffscreenPageLimit(2);

今天做一个项目要实现选项卡的选项不但有文字还要有图片，并且选中的选项中的文字和图片要进行变色。

文字的相关用法上面都写了，但是ViewPager的适配器FragmentPagerAdapter没有和设置图片相关的方法，下面我就记录一下当TabLayout和Fragment和Viewpager进行绑定之后怎么给选项卡添加图片。

我们都知道使用完下面的方法之后TabLayout和ViewPager的绑定就已经完成了，选项卡的效果也已经实现了

tab.setupWithViewPager(mViewPager);

所以在我们需要给选项卡设置图片就需要把选项卡的内容给清空，使用下面的方法

tab.removeAllTabs();

现在我们有几个选项就做几个图片选择器（选择器的作用是当我们选中当前选项时，当前的图片会进行变色），做图片选择器的方法这里就不写了，我另外一篇博客里面有。

然后把这些图片选择器都放到一个集合当中去。

接下来就可以给选项卡设置文字和图片了，这里的方法和一开始写的是一样的。下面的tab是我自定义的TabLayout对象

TabLayout.Tab tt;
        for (int i = 0; i < 3; i++) {
            tt = tab.newTab();
            tt.setText(Tab_title.get(i).toString());
            tt.setIcon(getResources().getDrawable((Integer) Tab_Icon.get(i)));
            tab.addTab(tt, i);
        }

下面是实现效果