TabLayout的高级使用
前言
前面介绍了TabLayout的基本属性和基本的使用方法。我是传送门。
真实的业务场景中，很多的效果，原生的TabLayout，并不支持。例如下滑线短于文字的效果，底部导航栏效果，标签文字选中是需要加粗效果等等。
所以我们需要使用TabLayout的自定义tab标签。
先上图。
先为急用的朋友上代码，后面做讲解
java类
import android.content.Context; import android.os.Bundle; import android.support.design.widget.TabLayout; 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.view.LayoutInflater; import android.view.View; import android.widget.CheckBox; import java.util.ArrayList; import java.util.List; import butterknife.BindView; import butterknife.ButterKnife; public class MainActivity extends AppCompatActivity { @BindView(R.id.vp_all) ViewPager vpAll; @BindView(R.id.tab_custom) TabLayout tabCustom; //存放自定义tab标签的列表 List<View> customTabList = new ArrayList<>(); //存放对应tab标签的fragment页面 List<PageFragment> fgList = new ArrayList<>(); //选中的自定义标签，标记器。默认选中第一个。标记位是0； int indicator = 0; ViewPagerAdapter pagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this);//此处是用的是butterKnife框架，等同于findviewbyid获取各个控件。 initTabCustomAndViewPager(); initListener(); } /** * 初始化tab标签和viewpager内容。 */ private void initTabCustomAndViewPager() { //初始化10个自定义tab标签 for (int i = 0; i < 10; i++) { final View tabView = getCustomTabView(this, "自定义" + i); customTabList.add(tabView); if (i==0){ //设置默认第一个选中效果 ((CheckBox) tabView.findViewById(R.id.cb_name)).setChecked(true); tabView.findViewById(R.id.cb_slide).setVisibility(View.VISIBLE); } tabCustom.addTab(tabCustom.newTab().setCustomView(tabView)); } //初始化10个fragment页面 for (int i = 0; i < 10; i++) { fgList.add(PageFragment.newInstance("我是内容栏目" + i)); } pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fgList); vpAll.setAdapter(pagerAdapter); } /** * 将viewpager和tabLayout之间的滑动事件和点击事件关联起来。 * 此处不能使用tabLayout的setupWithViewPager()方法，否则会造成自定义view失效 */ private void initListener() { //添加关联接口，此处不能用自带的绑定方法，否则自定义view会失效 vpAll.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i1) { } @Override public void onPageSelected(int i) { tabCustom.getTabAt(i).select(); } @Override public void onPageScrollStateChanged(int i) { } }); tabCustom.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { //viewpager联动 vpAll.setCurrentItem(tab.getPosition()); //将之前选中的tab标签，设置为未选中状态 View oldView = customTabList.get(indicator); CheckBox oldCbName = (CheckBox) oldView.findViewById(R.id.cb_name); View oldCbSlide = oldView.findViewById(R.id.cb_slide); oldCbName.setChecked(false); oldCbSlide.setVisibility(View.INVISIBLE); //当前选中的tab标签，设置为选中状态。 indicator = tab.getPosition(); View newView = customTabList.get(indicator); CheckBox newCbName = (CheckBox) newView.findViewById(R.id.cb_name); View newCbSlide = newView.findViewById(R.id.cb_slide); newCbName.setChecked(true); newCbSlide.setVisibility(View.VISIBLE); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } /** * 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(); } } /** * 获取自定义Tab标签的显示的内容 * * @param context * @param * @return */ public static View getCustomTabView(Context context, String text) { View view = LayoutInflater.from(context).inflate(R.layout.item_custom_tab, null); CheckBox tabText = (CheckBox) view.findViewById(R.id.cb_name); tabText.setText(text); return view; } }
pageFragment的代码和布局就不贴了。不想写的朋友可以看上一篇：我是传送门
布局文件
activity_main的布局文件
<?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" tools:context="com.example.administrator.tablayoutdemo.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tab_custom" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorHeight="0dp" app:tabMode="scrollable" /> <android.support.v4.view.ViewPager android:id="@+id/vp_all" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
自定义tab标签的布局文件：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:paddingRight="10dp" android:orientation="vertical" android:gravity="center" android:descendantFocusability="blocksDescendants"> <CheckBox android:id="@+id/cb_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@null" android:text="" android:textColor="@drawable/select_text_color" android:textSize="15sp" android:paddingTop="13dp" android:ellipsize="end" android:singleLine="true" android:maxEms="5" android:textStyle="bold" android:paddingBottom="13dp" android:clickable="false" /> <View android:id="@+id/cb_slide" android:layout_width="20dp" android:layout_height="3dp" android:visibility="invisible" android:background="#ff4fbf86"/> </LinearLayout>
色值文件select_text_color，放在drawable目录下
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#ff4fbf86" android:state_checked="true"/> <item android:color="#BBBBBB" android:state_checked="false" /> </selector>
讲解：
OK上完代码，针对关键点在做一次说明
1、标签在初始化的过程中，需要对第一个tab标签提前进行选中状态的初始化，否则可能会造成第一次启动的时候，第一个标签没有出现选中状态。
2、viewpager和TabLayout标签进行联动的时候，不可以使用TabLayout的setupWithViewPager()方法，而是要通过ViewPager的addOnPageChangeListener()和Tablayout的addOnTabSelectedListener()方法进行两个控件之间的联动效果。否则会造成自定义的CustomeTab被TabLayout默认生成的标签覆盖掉。
3、在布局文件中，需要将TabLayout的tabIndicatorHeight设为0。用来屏蔽掉控件自动生成的下滑线。
通过自定义的Tab标签可以完全实现自己控制tab标签的内容，这里就不展示tab标签做为底部导航栏的效果了。原理都是一样的。
