iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0
Mobile Development

Android Studio開發系列 第 22

【DAY 22】元件應用:tablayout-2-tab的樣式

  • 分享至 

  • xImage
  •  

今天我們來介紹tablayout中tab的樣式,如果我們希望客製化一下自己的tab,使它跟主題比較契合,就可以在tab的屬性中加入一些設定來達成自己想要的效果。

下面先介紹一些常用的屬性:

  • app:tabGravity=""-調整tab的位置,center代表於tablayout置中,fill代表填滿整個tablayout
  • app:tabBackground=""-tab的調整背景顏色
  • app:tabTextColor=""-調整未選中tab的文字顏色
  • app:tabSelectedTextColor=""-調整選中tab的文字顏色
  • app:tabIndicatorGravity=""-調整tab選擇線的位置,top代表置於tab的頂端,center代表置於tab的中間,bottom代表置於tab的底端,stretch代表填滿整個tab
  • app:tabIndicatorColor=""-調整tab選擇線的顏色
  • app:tabIndicatorFullWidth=""-選擇是否讓tab選擇線填滿整個tab,true代表填滿,false代表不填滿
  • app:tabPadding=""-調整tab文字的位置
  • app:tabMode=""-選擇是否將多的分頁壓縮顯示,fixed為壓縮,scrollable為不壓縮

下面來看看添加了屬性後的tab吧:

app:tabGravity="fill"
app:tabBackground="@color/gray"
app:tabTextColor="@color/black"
app:tabSelectedTextColor="#F75000"
app:tabIndicatorGravity="stretch"
app:tabIndicatorColor="#750000"
app:tabIndicatorFullWidth="false"
app:tabPaddingTop="30sp"
app:tabMode="scrollable"

有時候我們還希望在tab之間設置短邊線,我們可以在主程式中加上一些產生短邊線的方法:

//設定tab之間的短邊線
LinearLayout linearLayout=(LinearLayout) tl.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this,R.drawable.tablinestyle));

其中的tablinestyle是自己在drawable當中建立的xml檔,主要只是設定線的顏色,可以設定如下:

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


出現短邊線了~~

以上就是其他客製化tab的方法,tablayout的tab介紹就介紹到這裡~~


上一篇
【DAY 21】元件應用:tablayout-1-tablayout與viewPager2介紹
下一篇
【DAY 23】元件應用:API連線-1-利用API和retrofit2抓取氣象局天氣資料(上)
系列文
Android Studio開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言