TabLayout
效果圖:
簡單使用
XML佈局
<android.support.design.widget.TabLayout
android:id="@+id/register_type_tab"
android:layout_width="match_parent"
android:layout_height="20dp"
app:tabBackground="@color/colorWhite"
app:tabIndicatorColor="@color/colorTabBg"
app:tabIndicatorHeight="1dp"
app:tabSelectedTextColor="@color/colorTabBg"
app:tabTextAppearance="@style/TabLayoutTextSizeStyle"
app:tabTextColor="@color/colorUserTv" />
常用屬性
- 設定選中字型的顏色
app:tabSelectedTextColor="@android:color/holo_orange_light"
- 設定未選中字型的顏色
app:tabTextColor="@color/colorPrimary"
- 設定指示器下標(下劃線)的顏色
app:tabIndicatorColor="@android:color/holo_orange_light"
- 設定TabLayout的背景(可設定選中與未選中狀態)
app:tabBackground="color"
- 設定TabLayout內部字型大小
app:tabTextAppearance="@style/TabLayoutTextSizeStyle"//設定文字的外貌
自定義style
<style name="TabLayoutTextSizeStyle">
<item name="android:textSize">16sp</item>
</style>
- 設定指示器下標的高度
app:tabIndicatorHeight="1dp"//如果不需要就設定成0dp
- 新增圖示
有時候Tab只有文字感覺有點單調了:
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
- 設定Tab的可以滑動
app:tabMode="scrollable"//設定為可以滑動的
預設是fixed:固定的,標籤很多的時候會被擠壓,不能滑動。
9.內容的顯示模式
app:tabGravity="center"//居中,如果是fill,則是充滿
10.Tab的寬度限制
設定最大的tab寬度:
app:tabMaxWidth="xxdp"
設定最小的tab寬度:
app:tabMinWidth="xxdp"
- 設定Tab內部的子控制元件的Padding:
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
設定整個TabLayout的Padding:
app:paddingEnd="xxdp"
app:paddingStart="xxdp"
TabLayout的監聽事件
選中了某個tab的監聽事件OnTabSelectedListener():
tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//選中了tab的邏輯
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未選中tab的邏輯
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次選中tab的邏輯
}
});
和ViewPager的聯動
tabLayout.setupWithViewPager(Viewpager);
TabLayout設定指示器長度
在Tablayout渲染之後,呼叫方法:
tab.post(new Runnable() {
@Override
public void run() {
setIndicator(tab,60,60);//如果數值太大,會使設定的tab字型大小失去效果
}
});
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();
}
}
相關文章
- 模仿Google News的TabLayoutGoTabLayout
- Android中TabLayout修改字型大小AndroidTabLayout
- Android中TabLayout新增小紅點AndroidTabLayout
- MaterialDesign系列文章(八)TabLayout的使用TabLayout
- ViewPager、Fragment和TabLayout實現切頁效果ViewpagerFragmentTabLayout
- TabLayout+ViewPager+Fragment實現切頁展示TabLayoutViewpagerFragment
- Android tabLayout+viewPager+fragment處理懶載入AndroidTabLayoutViewpagerFragment
- ToolBar、TabLayout、Fragment+ViewPager的開發實踐TabLayoutFragmentViewpager
- 使用系統TabLayout的app快來修BugTabLayoutAPP
- 記一次TabLayout字型太粗解決辦法TabLayout
- TabLayout您可能不知道的實用用法TabLayout
- 優雅地修改 TabLayout 指示線 Indicator 的寬度TabLayoutIndicator
- 直播系統app原始碼,TabLayout:自定義字型大小APP原始碼TabLayout自定義字型
- Android開發之無侵入式修改TabLayout tabIndicator寬度AndroidTabLayoutIndicator
- TabLayout + ViewPager +Fragment 實現頁面的動態重新整理TabLayoutViewpagerFragment
- 解決viewpager+fragment+tablayout的動態重新整理ViewpagerFragmentTabLayout
- 使用ViewPager和TabLayout來實現滑動切換效果ViewpagerTabLayout
- Android原生TabLayout使用全解析,看這篇就夠了AndroidTabLayout
- 『Material Design入門學習筆記』TabLayout與NestedScrollView(附demo)Material Design筆記TabLayoutView
- TabLayout+ViewPager+Fragment實現懶載入完全解決方案TabLayoutViewpagerFragment
- Tablayout+Viewpager+Fragment組合使用以及懶載入機制TabLayoutViewpagerFragment
- 修改 support 包 TabLayout,實現新浪微博/即刻 APP 蚯蚓導航效果TabLayoutAPP
- 從原始碼角度來理解TabLayout設定下劃線寬度問題原始碼TabLayout
- 一個工具類實現自定義Tablayout的下劃線寬度TabLayout
- 安卓開發中修改TabLayout下劃線的寬度和高度安卓TabLayout
- 直播平臺原始碼,TabLayout標籤較少時,如何居中顯示原始碼TabLayout
- 關於Android改變TabLayout 下劃線(Indicator)寬度實踐總結AndroidTabLayoutIndicator
- 直播平臺開發,TabLayout的使用和自定義紅點訊息提示TabLayout
- Android使用(TabLayout+ViewPager+fragment)與(FragmentTabHost+ViewPager+Fragment)實現底部狀態列切換AndroidTabLayoutViewpagerFragment
- 短視訊平臺原始碼,android去掉tablayout指示器自帶的下劃線原始碼AndroidTabLayout
- android使用TabLayout+NestedScrollView 實現詳情介面tab頁 關聯 上下滑動檢視的效果AndroidTabLayoutView