Tablayout簡(jiǎn)單使用方法總結(jié)

更新時(shí)間：2017年12月04日 11:16:37 作者：ZhengJiaoCsdn

這篇文章主要為大家詳細(xì)總結(jié)了Tablayout的簡(jiǎn)單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了Tablayout簡(jiǎn)單的使用方法，供大家參考，具體內(nèi)容如下

一、TabLayout普通用法

在項(xiàng)目中使用viewpager的時(shí)候大多數(shù)都是和TabPagerIndicator結(jié)合使用，TabPagerIndicator是第三方的，使用起來(lái)比較繁瑣；

2015谷歌大會(huì)官方發(fā)布了TabLayout，可以很簡(jiǎn)單很完美的實(shí)現(xiàn)這種效果；

因?yàn)槭枪俜桨l(fā)布的，所以使用起來(lái)不用任何第三方的東西；而且非常簡(jiǎn)單明了；

同樣，如果想要使用Tablayout必須在build中配置：

dependencies { 
 compile 'com.android.support:design:23.1.1' 
}

先看下布局：

<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="www.tablayout.com.tablayoutdemo.MainActivity"> 
 
 <!-- 
 app:tabIndicatorColor="@color/white" // 下方滾動(dòng)的下劃線(xiàn)顏色 
 app:tabSelectedTextColor="@color/gray" // tab被選中后，文字的顏色 
 app:tabTextColor="@color/white" // tab默認(rèn)的文字顏色 
 app:tabMode="scrollable" //設(shè)置標(biāo)題滑動(dòng)模式 
 --> 
 <android.support.design.widget.TabLayout 
 android:id="@+id/tablayout" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:background="@android:color/holo_blue_light" 
 app:tabIndicatorColor="@android:color/holo_red_dark" 
 app:tabSelectedTextColor="@android:color/holo_red_dark" 
 app:tabTextColor="@android:color/background_dark" 
 app:tabMode="scrollable" 
 /> 
 
 <android.support.v4.view.ViewPager 
 android:id="@+id/viewpager" 
 android:layout_width="match_parent" 
 android:layout_height="0dp" 
 android:layout_weight="1" /> 
 
</LinearLayout>

代碼使用起來(lái)也非常簡(jiǎn)單

第一步：初始化ViewPager并設(shè)置adapter
第二步：給Tablayout設(shè)置標(biāo)題
第三步：將Tablayout和ViewPager關(guān)聯(lián)到一起

//第一步：初始化ViewPager并設(shè)置adapter 
 viewPager = (ViewPager) findViewById(R.id.viewpager); 
 viewPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragmentList)); 
 
 //第二步：初始化Tablayout，給ViewPager設(shè)置標(biāo)題（選項(xiàng)卡） 
 tabLayout = (TabLayout) findViewById(R.id.tablayout); 
 
 tabLayout.addTab(tabLayout.newTab().setText("UFC"));//添加tab選項(xiàng)卡 
 tabLayout.addTab(tabLayout.newTab().setText("武林風(fēng)")); 
 tabLayout.addTab(tabLayout.newTab().setText("昆侖決")); 
 tabLayout.addTab(tabLayout.newTab().setText("榮耀")); 
 tabLayout.addTab(tabLayout.newTab().setText("勇士的崛起")); 
 tabLayout.addTab(tabLayout.newTab().setText("K-1")); 
 
 //第三步：關(guān)聯(lián)ViewPager 
 tabLayout.setupWithViewPager(viewPager);

好了，正常情況下就到此結(jié)束了，但是我在寫(xiě)這個(gè)demo的時(shí)候碰到一個(gè)坑：
標(biāo)題死活顯示不出來(lái)，浪費(fèi)了很長(zhǎng)時(shí)間，最后在Tablayout關(guān)聯(lián)Viewpager之后添加從新設(shè)置下標(biāo)題即可：

//在關(guān)聯(lián)ViewPager之后添加如下代碼，前三步不用更改 
 tabLayout.getTabAt(0).setText("UFC"); 
 tabLayout.getTabAt(1).setText("武林風(fēng)"); 
 tabLayout.getTabAt(2).setText("昆侖決"); 
 tabLayout.getTabAt(3).setText("榮耀"); 
 tabLayout.getTabAt(4).setText("勇士的崛起"); 
 tabLayout.getTabAt(5).setText("K-1");

總體來(lái)說(shuō)Tablayout完全可以代替TabPagerIndicator，而且使用起來(lái)比較簡(jiǎn)單，最重要的還是官方的；

二、Tablayout下劃線(xiàn)寬度更改方法：

首先說(shuō)明：Google官方?jīng)]有給我們提供更改下劃線(xiàn)的寬度的方法；
我們可以通過(guò)其他方法更改：（兩步）
1.首先定義setIndicator()方法

public void setIndicator(TabLayout tabs,int leftDip,int rightDip){ 
 Class<?> tabLayout = tabs.getClass(); 
 Field tabStrip = null; 
 try { 
 tabStrip = tabLayout.getDeclaredField("mTabStrip"); 
 } catch (NoSuchFieldException e) { 
 e.printStackTrace(); 
 } 
 
 tabStrip.setAccessible(true); 
 LinearLayout llTab = null; 
 try { 
 llTab = (LinearLayout) tabStrip.get(tabs); 
 } catch (IllegalAccessException e) { 
 e.printStackTrace(); 
 } 
 
 int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics()); 
 int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics()); 
 
 for (int i = 0; i < llTab.getChildCount(); i++) { 
 View child = llTab.getChildAt(i); 
 child.setPadding(0, 0, 0, 0); 
 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1); 
 params.leftMargin = left; 
 params.rightMargin = right; 
 child.setLayoutParams(params); 
 child.invalidate(); 
 } 
}

2.在關(guān)聯(lián)ViewPager之前添加

tabLayout.post(new Runnable() { 
 @Override 
 public void run() { 
 setIndicator(tabLayout,25,25); 
 } 
 });

最后記得更改滑動(dòng)方式： app:tabMode="fixed"
左右距離可根據(jù)自己項(xiàng)目設(shè)置；（更改下劃線(xiàn)寬度需在第一步（Tablayout普通用法）的基礎(chǔ)上更改使用）

三、更改標(biāo)簽對(duì)齊方式

在xml文件中：
刪除 app:tabMode="" ；
添加 app:tabGravity="center" ；
還可以通過(guò) app:tabMaxWidth="150dp" 限制標(biāo)簽寬度
（更改更改標(biāo)簽對(duì)齊方式需在第一步（Tablayout普通用法）的基礎(chǔ)上更改使用）

四、標(biāo)題之間添加分割線(xiàn)；

1.在drawable文件夾下創(chuàng)建 shape

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
 <solid android:color="#aa00ff00" /> 
 <size android:width="1dp"/> 
</shape>

2,在主類(lèi)設(shè)置完tablayout后添加如下代碼：

LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0); 
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); 
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.layout_divider_vertical)); 
linearLayout.setDividerPadding(15);

點(diǎn)擊打開(kāi)鏈接免費(fèi)下載源碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: