Tablayout-布局标签

文章目录

• ​​先用起来​​
• ​​属性​​

• ​​常用属性​​
• ​​设置文字和图片​​
• ​​设置布局模式​​
• ​​设置边距、宽度等​​
• ​​设置指示器​​
• ​​设置水波纹的属性​​
• ​​使用style设置tablayout样式​​

• ​​设置监听​​
• ​​与ViewPager关联​​
• ​​setCustomView（）自定义布局​​

Tablayout继承自HorizontalScrollView，用作页面切换指示器

先用起来

添加依赖

implementation 'com.google.android.material:material:1.0.0'

<com.google.android.material.tabs.TabLayout
  android:id="@+id/tabLayout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

tabLayout = findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("文章").setIcon(R.mipmap.article));
tabLayout.addTab(tabLayout.newTab().setText("消息").setIcon(R.mipmap.message));
tabLayout.addTab(tabLayout.newTab().setText("店铺").setIcon(R.mipmap.shop));
tabLayout.addTab(tabLayout.newTab().setText("分类").setIcon(R.mipmap.category));

图一：

属性

常用属性

app:tabTextColor="@color/colorPrimary"//未选中文字颜色
        app:tabSelectedTextColor="@color/colorPrimaryDark"//选中文字颜色
        app:tabBackground="@color/colorAccent"//tab背景色
        app:tabIndicatorColor="@color/colorPrimaryDark"//指示器（下划线）颜色
        app:tabIndicatorHeight="5dp"//指示器（下划线）高度

设置文字和图片

tabTextAppearance改变字体属性

app:tabTextAppearance="@style/AppTheme.TabLayout.TextAppearance"//设置style改变字体属性

<style name="AppTheme.TabLayout.TextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#B2A04D4D</item>
        <item name="textAllCaps">false</item>
    </style>

tabIconTint：设置文字上面图标的颜色

app:tabIconTint="@color/colorAccent"

tabInlineLabel：设置图标和文字的方向

app:tabInlineLabel="true" //默认为 false，效果看图一

设置布局模式

tabMode 设置 Tablayout 的布局模式：固定或可滑动
我们增加点数据来测试

app:tabMode="fixed" //固定

app:tabMode="scrollable" //可滑动的

tabGravity设置 TabLayout 的布局方式：充满或居中

app:tabGravity="center" //居中

app:tabGravity="fill" //默认是fill，且只有当tabMode为fixed时才有效

设置边距、宽度等

paddingStart，paddingEnd 设置整个TabLayout的内边距

app:tabPaddingStart="50dp"
        app:tabPaddingEnd="10dp"

tabMaxWidth、tabMinWidth 设置 tab 项最大/小的宽度

app:tabGravity="center"
        app:tabMinWidth="80dp" //最小宽度

app:tabMaxWidth="80dp" //最大宽度

设置tab项的内边距
​​​tabPadding，tabPaddingStart，tabPaddingEnd，tabPaddingTop，tabPaddingBottom​​ 设置tab项的内边距

部分举例

app:tabPaddingTop="20dp"
        app:tabPaddingBottom="20dp"

设置指示器

tabIndicatorFullWidth：指示器是否占满整个宽度

app:tabIndicatorFullWidth="false" //指示器是否占满整个宽度，默认为true

tabIndicatorGravity：设置指示器的方位

app:tabIndicatorGravity="top" //设置指示器的方位，默认为 bottom，效果图看图一

center

stretch

tabIndicatorAnimationDuration：设置指示器动画时间

app:tabIndicatorAnimationDuration="2000"

设置水波纹的属性

app:tabRippleColor：设置水波纹颜色

app:tabRippleColor="#9370DB" //水波纹颜色

tabUnboundedRipple：设置水波纹是否无边界

app:tabUnboundedRipple="true" //设置水波纹是否无边界（默认有边界）默认为false，效果看图一

使用style设置tablayout样式

sytle设置tablayout样式

style="@style/AppTheme.TabLayout"

<style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMode">scrollable</item>
        <item name="tabIndicatorColor">#000000</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabTextAppearance">@style/AppTheme.TabLayout.TextAppearance</item>
        <item name="tabBackground">@color/colorAccent</item>
        <item name="tabSelectedTextColor">#00ff00</item>
    </style>

还有俩属性没看懂，大神帮忙解释：tabContentStart、tabIconTintMode

设置监听

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //添加选中Tab的逻辑
                Log.d("Tablayout",tab.getText().toString()+"被选中");
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //添加未选中Tab的逻辑
                Log.d("Tablayout",tab.getText().toString()+"不被选中了");
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //再次选中tab的逻辑
                Log.d("Tablayout",tab.getText().toString()+"又被选中了");
            }
        });

与ViewPager关联

tabLayout.setupWithViewPager(viewpager);

需要注意的是，viewpager 的 adapter 中需要重写 ​​getPageTitle(int position)​​ 这个方法返回 tablayout 的标题，否则标题不显示

setCustomView（）自定义布局

​​TabLayout高端用法（三）​​

​​TabLayout-标签布局​​