Android控件<第十四篇>:TabLayout-标签布局

TabLayout是Material design控件之一,效果图如下:

图片.png
(1)导入依赖包
implementation 'com.android.support:design:28.0.0'
(2)基础代码
<android.support.design.widget.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.home));
    tabLayout.addTab(tabLayout.newTab().setText("消息").setIcon(R.mipmap.message));
    tabLayout.addTab(tabLayout.newTab().setText("工具").setIcon(R.mipmap.tool));
    tabLayout.addTab(tabLayout.newTab().setText("提醒").setIcon(R.mipmap.notification));
    tabLayout.addTab(tabLayout.newTab().setText("我").setIcon(R.mipmap.me));

以上就是基础代码,首先在xml中写一个TabLayout布局,然后用代码为TabLayout添加Tab,Tab中设置好文字和图片,效果如下:

25.gif
(3)基本属性

tabTextColor:设置Tab未被选中时的文字颜色

    app:tabTextColor="@color/bt_1"
图片.png

tabSelectedTextColor:设置选中项中的字体颜色

    app:tabSelectedTextColor="@color/colorPrimary"
图片.png

tabBackground:设置Tab背景

app:tabBackground="@color/bt_1"
图片.png

tabIndicatorColor:设置指示器的颜色

    app:tabIndicatorColor="@color/bt_1"
图片.png

tabIndicatorHeight:设置指示器的高度

    app:tabIndicatorHeight="10dp"
图片.png

tabTextAppearance:设置style改变字体属性

    app:tabTextAppearance="@style/AppTheme.TabLayout.TextAppearance"


<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>
图片.png

tabMode:设置Tablayout的布局模式,有两个值

  • fixed:固定的,不能滑动,很多标签的时候会被挤压(默认是fixed)

      app:tabMode="fixed"
    
图片.png
  • scrollable:可以滑动的

      app:tabMode="scrollable"
    
26.gif

tabGravity:设置TabLayout的布局方式,有两个值

  • fill:充满

      app:tabGravity="fill"
    
图片.png
  • center:居中

      app:tabGravity="center"
    
图片.png

默认是fill,且只有当tabMode为fixed时才有效

tabMaxWidth:设置tab项最大的宽度

tabMinWidth:设置tab项最小的宽度

tabContentStart:设置TabLayout开始位置的偏移量

paddingStart,paddingEnd:设置整个TabLayout的内边距

tabPadding,tabPaddingStart,tabPaddingEnd,tabPaddingTop,tabPaddingBottom:设置tab项的内边距

style:设置样式

    style="@style/AppTheme.TabLayout"


<style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMode">scrollable</item>
    <item name="tabIndicatorColor">@color/bt_1</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabTextAppearance">@style/AppTheme.TabLayout.TextAppearance</item>
    <item name="tabBackground">@color/colorPrimary</item>
    <item name="tabSelectedTextColor">@color/bt_2</item>
</style>

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

app:tabIconTint="@color/bt_1"
图片.png

tabIconTintMode:文字上的图标和文字上图标区域的颜色之间的图像混合模式

    app:tabIconTintMode="src_in"

这个混合模式可以查看以下xfermode示例图

xfermode示例图.jpg

它的取值有:src_atopsrc_overaddscreensrc_inmultiply

tabIndicatorFullWidth:指示器是否沾满整个宽度(默认为true)

    app:tabIndicatorFullWidth="false" 

值为true的效果:

图片.png

值为false的效果:

图片.png

tabIndicatorGravity:设置指示器的方位(默认指示器在下方)

    app:tabIndicatorGravity="bottom"

它有四个值,分别是:

top:指示器在上方

图片.png

bottom:指示器在下方

图片.png

center:指示器在中间

图片.png

stretch:指示器沾满整个布局

图片.png

tabIndicatorAnimationDuration:设置指示器动画时间

    app:tabIndicatorAnimationDuration="5000"
26.gif

tabInlineLabel:设置图标和文件的方向(默认为false)

    app:tabInlineLabel="true"

如果为true

图片.png

tabRippleColor:设置水波纹的颜色

    app:tabRippleColor="@color/bt_1"
27.gif

tabUnboundedRipple:设置水波纹是否有边界(默认有边界)

    app:tabUnboundedRipple="true"

如果为true,则无边框

28.gif
(4)设置监听
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            //添加选中Tab的逻辑
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            //添加未选中Tab的逻辑
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            //再次选中tab的逻辑
        }
    });

它有三个回调方法,假如初始位置在“首页”标签,现在从“首页”标签点到“我”标签,那么onTabUnselected首先被执行,这里的tab是“首页”标签,然后onTabSelected被执行,这里的tab是“我”标签。
又假如,当前标签是“首页”标签,现再次点击“首页”标签,这是onTabReselected回调被触发。

(5)与ViewPager关联

代码如下:

mytab.setupWithViewPager(mViewPager);
(6)github中丰富TabLayout推荐

https://github.com/18317084205/JTabLayout

大家有空可以看一下这位大神的项目。

[本章完...]

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容