TabLayout基本使用

前言

Tablayout继承自HorizontalScrollView，可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。

想直接了解如何实现短下滑效果的请看：TabLayout的高级用法

首先上几个效果图。

图：

使用方法

下面我们来看如何使用，

第一步，先在gradle引入支持包

implementation 'com.android.support:design:26.0.0'

第二步，在布局文件中添加布局

<android.support.design.widget.TabLayout
        android:id="@+id/tab_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabIndicatorColor="#0a0"
        app:tabTextColor="#bbb"
        app:tabSelectedTextColor="#0a0"
        />

属性解释：

tabIndicatorHeight：这里是设置标签横线的高度，如果不需要横线，可以设置为0dp
tabIndicatorColor：是用来设置标签被选中时，显示的颜色的。
tabTextColor：标签显示的默认颜色
tabSelectedTextColor：标签被选中的时候的颜色
tabMode：这个属性有两个取值，一个是fixed，不管tab标签字多字少，平分当前tablayout宽度的空间大小。一般最多折两行，还显示不开的部分，用省略号代替。
　　　　　　　　　　　　　　另一个是scrollable，从左到右依次显示标签，显示不开的，可以滚动显示

图

上代码

java代码：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.design.widget.TabLayout;
import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.tab_normal)
    TabLayout tabNormal;
    @BindView(R.id.tab_icon)
    TabLayout tabIcon;
    @BindView(R.id.tab_more)
    TabLayout tabMore;
    @BindView(R.id.tab_customer)
    TabLayout tabCustomer;
    @BindView(R.id.vp_all)
    ViewPager vpAll;

    List<PageFragment> fgList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);//此处是用的是butterKnife框架，等同于findviewbyid获取各个控件。
        initViewPager();
        initTabNormal();
    }

    /**
     * 初始化ViewPager，方便后期与tabLayout关联
     */
    private void initViewPager() {
        fgList = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            fgList.add(PageFragment.newInstance("我是标题"+i,"我是内容栏目"+i));
        }
        vpAll.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), fgList) );
    }

    /**
     * 初始化顶部标签
     */
    private void initTabNormal() {
        tabNormal.setupWithViewPager(vpAll);
    }

    /**
     * ViewPager的适配器。
     */
    class ViewPagerAdapter extends FragmentPagerAdapter{

        List<PageFragment> fragmentList;
        public ViewPagerAdapter(FragmentManager fm, List<PageFragment> fragmentList) {
            super(fm);
            this.fragmentList=fragmentList;
        }

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

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

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

fragment代码，fragment的布局文件，就一个ID为tv_content的textview，此处就不在贴代码了。

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;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

public class PageFragment extends Fragment {
    String title, content;
    @BindView(R.id.tv_content)
    TextView tvContent;
    Unbinder unbinder;

    public PageFragment() {
    }

    public static PageFragment newInstance(String title, String content) {
        PageFragment fragment = new PageFragment();
        fragment.title = title;
        fragment.content = content;
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        unbinder = ButterKnife.bind(this, view);
        tvContent.setText(content);
        return view;
    }

    public String getTitle() {
        return title;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }
}

通过tabLayout方法的setupWithViewPager()方法绑定ViewPager控件的。tab标签获取显示文字，是通过FragmentPagerAdapter的getPageTitle（）方法。所以需要对FragmentPagerAdapter的getPageTitle方法进行重写。

然而，原生控件有很多的呆笨性。比如很多的UI和场景需求都是要求文字下面的短线是一个小于文字的固定值。再比如我们说的作为底部导航栏，如果直接设置tab的icon,会出现icon变形等问题。

所以我这里给一个终极的解决办法。tab想做成什么样子，就做成什么样子。完全自定义。

传送门：TabLayout的高级用法，自定义TabLayout