1. 程式人生 > >Android中自定義TabLayout指示器長度

Android中自定義TabLayout指示器長度

效果圖:

MainActivity.java檔案

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TabLayout id_tabl_one_s = (TabLayout)
findViewById(R.id.id_tab_one_fill_fixed); id_tabl_one_s.addTab(id_tabl_one_s.newTab().setText("新聞")); id_tabl_one_s.addTab(id_tabl_one_s.newTab().setText("熱門")); id_tabl_one_s.addTab(id_tabl_one_s.newTab().setText("日報")); final TabLayout id_tabl_one_s1 = (TabLayout)
findViewById(R.id.id_tab_one_fill_fixed1); id_tabl_one_s1.addTab(id_tabl_one_s1.newTab().setText("新聞")); id_tabl_one_s1.addTab(id_tabl_one_s1.newTab().setText("熱門")); id_tabl_one_s1.addTab(id_tabl_one_s1.newTab().setText("日報")); final TabLayout id_tabl_one_s2 = (TabLayout)
findViewById(R.id.id_tab_one_fill_fixed2); id_tabl_one_s2.addTab(id_tabl_one_s2.newTab().setText("新聞")); id_tabl_one_s2.addTab(id_tabl_one_s2.newTab().setText("熱門")); id_tabl_one_s2.addTab(id_tabl_one_s2.newTab().setText("日報")); setIndicator(id_tabl_one_s1, 25, 25); setIndicator(id_tabl_one_s2, 35, 35); TabLayout id_tabl_four_s = (TabLayout) findViewById(R.id.id_tab_four_center_scrollable); id_tabl_four_s.addTab(id_tabl_four_s.newTab().setText("新聞")); id_tabl_four_s.addTab(id_tabl_four_s.newTab().setText("熱門")); id_tabl_four_s.addTab(id_tabl_four_s.newTab().setText("日報")); TabLayout id_tabl_four_s1 = (TabLayout) findViewById(R.id.id_tab_four_center_scrollable1); id_tabl_four_s1.addTab(id_tabl_four_s1.newTab().setText("新聞")); id_tabl_four_s1.addTab(id_tabl_four_s1.newTab().setText("熱門")); id_tabl_four_s1.addTab(id_tabl_four_s1.newTab().setText("日報")); TabLayout id_tabl_four_s2 = (TabLayout) findViewById(R.id.id_tab_four_center_scrollable2); id_tabl_four_s2.addTab(id_tabl_four_s2.newTab().setText("新聞")); id_tabl_four_s2.addTab(id_tabl_four_s2.newTab().setText("熱門")); id_tabl_four_s2.addTab(id_tabl_four_s2.newTab().setText("日報")); setTabLayoutWidth(id_tabl_four_s1, 10, 10); setTabLayoutWidth(id_tabl_four_s2, 15, 15); } /** * 反射指示器變短 */ public void setIndicator(TabLayout tabs, int leftDip, int rightDip) { tabs.post(() -> { 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()); //直接獲取子view改變寬度 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(); } }); } /** * 反射拿到文字的屬性對指示器進行操作 */ public void setTabLayoutWidth(TabLayout tabLayout, int leftDip, int rightDip) { tabLayout.post(() -> { try { //拿到tabLayout的mTabStrip屬性 LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0); for (int i = 0; i < mTabStrip.getChildCount(); i++) { View tabView = mTabStrip.getChildAt(i); //拿到tabView的mTextView屬性 tab的字數不固定一定用反射取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(); } 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()); //設定tab左右間距 注意這裡不能使用Padding 因為原始碼中線的寬度是根據 tabView的寬度來設定的 LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams(); params.width = width + left + right; //如果只是width就是指示器和文字長度一樣長 params.leftMargin = left; params.rightMargin = right; tabView.setLayoutParams(params); tabView.invalidate(); } } catch (NoSuchFieldException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } }); } }

activity_main.xml佈局檔案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <!--所有  TabLayout  layout_width設定為match_parent的情況下-->


    <Button
        android:id="@+id/btn_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:text="tab" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B.標題想數目數量少的時候" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="1.tabGravity:fill,tabMode:fixed" />


    <android.support.design.widget.TabLayout
        android:id="@+id/id_tab_one_fill_fixed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/c_9b9b9b" />


    <android.support.design.widget.TabLayout
        android:id="@+id/id_tab_one_fill_fixed1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/c_9b9b9b" />

    <android.support.design.widget.TabLayout
        android:id="@+id/id_tab_one_fill_fixed2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/c_9b9b9b" />



    <!--&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="4.tabGravity:center,tabMode:scrollable常用"
        android:textColor="@color/colorAccent" />


    <android.support.design.widget.TabLayout
        android:id="@+id/id_tab_four_center_scrollable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/c_9b9b9b" />


    <android.support.design.widget.TabLayout
        android:id="@+id/id_tab_four_center_scrollable1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/c_9b9b9b" />

    <android.support.design.widget.TabLayout
        android:id="@+id/id_tab_four_center_scrollable2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/c_9b9b9b" />


</LinearLayout>