Android中Tablayout的tabMode和tabGravity的使用以及自定义TabLayout指示器长度

1.Tablayout的tabMode和tabGravity的使用
效果图:

代码:
TablayoutActivity.Java
activity_tablayout.xml

2.Tablayout的tab数目数量少时自定义指示器长度
效果图:

如果要指示器长度和tab文字长度一样长,在java文件第119行设置tabview的宽度的时候不要加上左右边距即可

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>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Android自定义TabLayout是指在TabLayout的基础上,通过修改样式、添加图标、自定义布局等方式,实现个性化的TabLayout效果。可以通过修改TabLayout的属性、使用自定义View等方式来实现。 具体实现步骤如下: 1. 在布局文件添加TabLayout控件,并设置相关属性。 2. 在代码获取TabLayout控件,并设置TabLayout的样式、添加Tab等。 3. 自定义TabLayout的样式,可以通过修改TabLayout的属性、使用自定义View等方式来实现。 4. 自定义TabLayout的布局,可以通过使用自定义View来实现。 5. 在TabLayout添加图标,可以通过设置Tab的图标属性来实现。 总之,Android自定义TabLayout可以通过多种方式来实现,具体实现方式取决于具体需求。 ### 回答2: AndroidTabLayout是一个非常常见且重要的控件,用于在界面上实现选项卡切换的效果,TabLayout的默认实现满足了很多场景的需求,但是也有一些场景需要我们自定义TabLayout的样式。 Android自定义TabLayout需要以下步骤: 1. 创建Layout文件 首先,我们需要创建一个布局文件,用于自定义TabLayout的样式。在布局文件,我们可以自由进行UI设计和排版。 2. 创建自定义TabItem 自定义TabLayout的样式,通常需要创建自定义TabItem来实现。我们可以通过重写TabItem的布局来实现自定义TabItem的功能。自定义TabItem使我们可以更加灵活地控制选项卡的外观和动画效果。 3. 创建自定义TabLayout 接下来,我们需要创建自定义TabLayout,我们可以通过继承TabLayout类来实现。在自定义TabLayout,我们可以添加一些自己的方法和属性,这使得我们可以在代码更灵活地控制TabLayout。 4. 设置TabLayout的自定义属性 为了使TabLayout支持我们自定义的属性,我们需要在attrs.xml文件创建自定义属性。 5. 使用自定义TabLayout 最后,我们需要在布局文件使用自定义TabLayout,并且通过代码调用自定义TabLayout的方法来实现我们想要的效果。 综上所述,Android自定义TabLayout需要一定的UI设计和编程能力,但是通过自定义TabLayout,我们可以实现更加精美和有趣的选项卡效果,从而使我们的应用更加吸引人。 ### 回答3: Android自定义TabLayout是一种可以让开发者自定义TabLayout样式、添加图片、设置字体等等的功能,非常实用。以下是具体使用步骤和过程。 首先,我们需要在布局文件添加TabLayout,具体代码如下: ``` <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" app:tabGravity="center" app:tabIndicatorHeight="2dp" app:tabTextColor="@color/tab_text_color" app:tabSelectedTextColor="@color/colorAccent" app:tabTextAppearance="@style/CustomTabText" /> ``` 其,我们可以自定义TabLayout的样式,比如指示器高度、字体颜色、大小等等。同时,还可以添加自定义样式的TabTextAppearance,在其设置自己所需的字体大小、颜色和样式,比如: ``` <style name="CustomTabText" parent="TextAppearance.Design.Tab"> <item name="android:textSize">16sp</item> <item name="android:textColor">@color/tab_text_color</item> <item name="textAllCaps">true</item> </style> ``` 接下来,我们需要在Java文件设置TabLayout每个Tab的属性。比如: TabLayout.Tab tab = tabLayout.newTab(); tab.setText("Tab1"); tab.setIcon(R.drawable.tab_1_icon); tabLayout.addTab(tab); 在上述代码,我们实例化了一个TabLayout.Tab对象,设置了Tab的文本和图标,并将其添加到TabLayout。 除了图标和文本属性外,我们还可以为每个Tab设置一个自定义View来实现更加个性化的效果。比如: TabLayout.Tab tab = tabLayout.newTab(); View customView = getLayoutInflater().inflate(R.layout.custom_tab_item, null); tab.setCustomView(customView); tabLayout.addTab(tab); 在上述代码,我们使用了一个自定义布局文件custom_tab_item,将其实例化后并设置为tab自定义View,从而实现更加个性化的效果。 综上所述,Android自定义TabLayout功能非常强大,开发者可以根据自己的需求自定义TabLayout样式、添加图片、设置字体等等。但也需要注意,自定义过程需要保证代码的可读性和可维护性,避免出现过多的硬编码和重复代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值