Android 如何使Tablayout內容和下劃線長度相同?
阿新 • • 發佈:2018-12-11
我們在使用Tablayout選項卡控制元件的時候經常要根據專案需求做一些改動,比如如何使Tablayout內容和下劃線長度相同,類似頭條選項卡那種。通常我們的策略是通過反射的機制去改變Tabview的長度。下面直接貼程式碼:
public void setIndicator(){ //拿到tabLayout的mTabStrip屬性 Field mTabStripField = tabLayout.getClass().getDeclaredField("mTabStrip"); mTabStripField.setAccessible(true); LinearLayout mTabStrip = (LinearLayout) mTabStripField.get(tabLayout); int dp10 = Utils.dip2px1(tabLayout.getContext(), 10); for (int i = 0; i < mTabStrip.getChildCount(); i++) { View tabView = mTabStrip.getChildAt(i); //拿到tabView的mTextView屬性 Field mTextViewField = tabView.getClass().getDeclaredField("mTextView"); mTextViewField.setAccessible(true); TextView mTextView = (TextView) mTextViewField.get(tabView); tabView.setPadding(0, 0, 0, 0); //因為我想要的效果是 字多寬線就多寬,所以測量mTextView的寬度 int width = 0; width = mTextView.getWidth(); if (width == 0) { mTextView.measure(0, 0); width = mTextView.getMeasuredWidth(); } LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams(); params.width = width ; params.leftMargin = dp10; params.rightMargin = dp10; tabView.setLayoutParams(params); tabView.invalidate(); }
通常在debug狀態下可以達到我們的效果,但是釋出的簽名版的時候記得加上忽略混淆。
#保持該類不被混淆 用到了反射修改tablayout下劃線長度
-keep public class android.support.design.widget.**{*;}
-keep class android.support.design.internal.**{*;}
到這裡基本可以滿足我們的專案需求了,但是
因為我的專案使用到了api28
,api28
Tablayout增加了一些差異性和新特性。最為重要的就是原來的mTabStrip
和mTextView
已經改名為slidingTabIndicator
textView
,這樣當你的專案使用了api28的時候常規的方法已經不可用,無法達到我們的效果,所以得將mTabStrip
和mTextView
分別改為slidingTabIndicator
和textView
。**但是**同樣的28之後Tablayout也增加了一個新屬性,使我們省了不少事情,
app:tabIndicatorFullWidth="false"
新屬性tabIndicatorFullWidth
設定為false
就可以了,google已經把這件事情幫我們完成了。
程式碼和效果圖如下:
<android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="#25367b" app:tabIndicatorHeight="4dp" app:tabMode="fixed" app:tabSelectedTextColor="#1c3599" app:tabIndicatorFullWidth="false" app:tabTextAppearance="@style/MyTabLayoutTextAppearance" app:tabTextColor="#a1a6a5"> <!--app:tabIndicatorFullWidth="false"--> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="真好" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="真香" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="IG牛逼" /> </android.support.design.widget.TabLayout>
希望可以幫助到大家。