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標簽做為底部導航欄的效果了。原理都是一樣的。
