1. 程式人生 > >Android 如何使Tablayout內容和下劃線長度相同?

Android 如何使Tablayout內容和下劃線長度相同?

我們在使用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.**{*;}

到這裡基本可以滿足我們的專案需求了,但是
因為我的專案使用到了api28api28Tablayout增加了一些差異性和新特性。最為重要的就是原來的mTabStripmTextView已經改名為slidingTabIndicator

textView,這樣當你的專案使用了api28的時候常規的方法已經不可用,無法達到我們的效果,所以得將mTabStripmTextView分別改為slidingTabIndicatortextView。*
*但是**同樣的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>

在這裡插入圖片描述

希望可以幫助到大家。