TabLayout常常使用到的知識點

摘要

本文主要記錄TabLayout常常使用到的知識點,避免每次使用TabLayout時,改個小地方,就要花時間去回憶,百度。。。

目錄

一、TabLayout的下劃線屬性設置

二、TabLayout中間的分割線Divider設置

三、TabLayout的disable設置

四、TabLayout的左右圓角設置

五、TabLayout和ViewPager的搭配使用

正文

一、TabLayout的下劃線屬性設置

Indicator效果圖

TabLayout? tabSelect= (TabLayout) findViewById(R.id.tab_select);

//add tab

tabSelect.addTab(tabSelect.newTab().setText("盤虧"));

tabSelect.addTab(tabSelect.newTab().setText("盤盈"));

//設置寬度

TabUtils.setIndicatorHalf(tabSelect);

工具類:

public classTabUtils {

/**

* 設置TabLayout下方下劃線的寬度約為2分1

*@paramtabs

*/

public static voidsetIndicatorHalf(finalTabLayout tabs){

? ? ? ? ? tabs.post(newRunnable() {

? ? ? ? ? ? ? ? ? ? ? ? ?@Override

? ? ? ? ? ? ? ? ? ? ? public voidrun() {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tabs.measure(0,0);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? intwidth =tabs.getMeasuredWidth();

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setIndicator(tabs,width*1/4,width*1/4);

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? });

}

/**

* 設置TabLayout下方下劃線的寬度

* 至于使用方式的話,直接調用方法即可.必須要在Tablayout渲染出來后調用

*@paramtabs

*@paramleftDip

*@paramrightDip

*/

public static voidsetIndicator(TabLayout tabs, intleftDip, intrightDip) {

? ? ? ? ? ?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();

? ? ? ? ? }

? ? ? ? ? intleft = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());

? ? ? ? ?intright = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());

? ? ? ? // 通過修改Tab的寬度,間接修改Indicator的寬度

? ? ? ? ? for(int i =0; i < llTab.getChildCount(); i++) {

? ? ? ? ? ? ? ? ?View child = llTab.getChildAt(i);

? ? ? ? ? ? ? ? ?child.setPadding(0,0,0,0);

? ? ? ? ? ? ? ? ?LinearLayout.LayoutParams params =newLinearLayout.LayoutParams(0,LinearLayout.LayoutParams.MATCH_PARENT,1);

? ? ? ? ? ? ? ? ?params.leftMargin= left;

? ? ? ? ? ? ? ? ?params.rightMargin= right;

? ? ? ? ? ? ? ? ?child.setLayoutParams(params);

? ? ? ? ? ? ? ? ?child.invalidate();

? ? ? ? ? }

}

}

二、TabLayout中間的分割線Divider設置

Divider效果圖

TabLayout ?tabSelect= (TabLayout) findViewById(R.id.tab_select);?

//add tab

tabSelect.addTab(tabSelect.newTab().setText("盤虧"));

tabSelect.addTab(tabSelect.newTab().setText("盤盈"));

//add divider TABs中間分割線

LinearLayout linearLayout = (LinearLayout)tabSelect.getChildAt(0);? ? //SlidingTabStrip extends LinearLayout

//SHOW_DIVIDER_NONE:默認,無分割線, SHOW_DIVIDER_BEGINNING:開始處,

//SHOW_DIVIDER_MIDDLE:Tabs中間, SHOW_DIVIDER_END:結束處

linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);? ? //設置 Tabs 中間分割線顯示位置

linearLayout.setDividerPadding(10);

linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.style_divider_line));? //設置分割線資源

三、TabLayout的disable設置

/**

* TabSelect不可選時變灰 ,重置

*@paramenable

*/

private voidenableTabSelect(booleanenable) {

? ? ? ? ? ?LinearLayout linearLayout = ( LinearLayout )tabSelect.getChildAt(0);

? ? ? ? ? ?intchildCount = linearLayout.getChildCount();

? ? ? ? ? ?for(int i = 0; i < childCount; i++) {

? ? ? ? ? ? ? ? ? ? View child = linearLayout.getChildAt(i);

? ? ? ? ? ? ? ? ? ? child.setClickable(enable);

? ? ? ? ? ? ? ? ? ? if(enable){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?child.setBackground(getResources().getDrawable(R.drawable.style_tab_select_bg));

? ? ? ? ? ? ? ? ? ? ?}else{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child.setBackgroundColor(getResources().getColor(R.color.all_bg_gary));

? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ?}

? ? ? ? ? ? tabSelect.setSelectedTabIndicatorColor( enable ? getResources().getColor(R.color.khaki): getResources().getColor(R.color.line_color));

? ? ? ? ? ? tabSelect.getTabAt(0).select();//重置selected

}

四、TabLayout的左右圓角設置

圓角TabLayout效果展示

布局文件:

< android.support.design.widget.TabLayout

android:layout_centerInParent="true"

android:id="@+id/tab_select"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:layout_margin="@dimen/padding_four"

app:tabGravity="fill"

app:tabIndicatorColor="@color/transparency"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/black"

app:tabTextAppearance="@style/TabLayoutTextStyle"

app:tabTextColor="@color/white"

/>

代碼:

TabLayout tabSelect = (TabLayout) findViewById(R.id.tab_select);

tabSelect.addTab(tabSelect.newTab().setText("RFID模式"));

tabSelect.addTab(tabSelect.newTab().setText("條碼模式"));

LinearLayout linearLayout = (LinearLayout) tabSelect.getChildAt(0);

linearLayout.getChildAt(0).setBackgroundResource(R.drawable.style_tab_left_circle);

linearLayout.getChildAt(linearLayout.getChildCount()-1).setBackgroundResource(R.drawable.style_tab_right_circle);

drawable文件:


style_tab_left_circle


style_tab_right_circle

五、TabLayout和ViewPager的搭配使用

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容