Android TabLayout总结

已于 2022-11-15 10:30:47 修改
阅读量3.4k 收藏 17
点赞数 1
分类专栏： Android 文章标签： android TabLayout
于 2022-11-15 10:24:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/127844487
版权

文章目录

Android TabLayout总结

TabLayout基本属性：
- background：背景颜色
- tabTextColor：默认文本颜色
- tabSelectedTextColor：选中文本颜色
- tabIndicatorColor：下划线颜色
- tabIndicatorFullWidth：下划线是否填充宽度
- tabIndicator：指示器
- tabMode：滚动模式
- tabTextAppearance：文本样式，如字体大小、粗细、大小写
- tabIndicatorHeight：下划线高度。设置为0时，则不显示
- tabMaxWidth：tab最大宽度
- tabMinWidth：tab最小宽度

TabLayout.Tab基本属性：
- setCustomView：自定义View
- setIcon：设置图标
- setText：设置文本
- getOrCreateBadge：获取badge
- removeBadge：移除badge
- select：选中tab
- isSelected：判断tab是否选中

基本使用

在这里插入图片描述

TabLayout样式：

<style name="MyTabLayoutStyle">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">normal</item>
    <item name="textAllCaps">false</item>
</style>

XML布局：

<com.google.android.material.tabs.TabLayout
                                            android:id="@+id/tabLayout01"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            app:tabIndicatorColor="@color/red"
                                            app:tabIndicatorFullWidth="false"
                                            app:tabMode="fixed"
                                            app:tabSelectedTextColor="@color/red"
                                            app:tabTextAppearance="@style/MyTabLayoutStyle"
                                            app:tabTextColor="@color/black" />

<androidx.viewpager2.widget.ViewPager2
                                       android:id="@+id/viewPager2"
                                       android:layout_width="match_parent"
                                       android:layout_height="match_parent" />

代码：

viewPager2.adapter = object :
        FragmentStateAdapter(this@TabLayoutActivity) {
            override fun getItemCount(): Int {
                return fragments.size
            }

            override fun createFragment(position: Int): Fragment {
                return fragments[position]
            }
        }

TabLayoutMediator(
    tabLayout01,
    viewPager2,
    object : TabLayoutMediator.TabConfigurationStrategy {
        override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
            tab.text = titles[position]
        }
    }).attach()

添加图标、隐藏下划线

在这里插入图片描述

XML布局：

<com.google.android.material.tabs.TabLayout
                                            android:id="@+id/tabLayout02"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:layout_marginTop="10dp"
                                            app:tabIndicatorHeight="0dp"
                                            app:tabMode="fixed"
                                            app:tabSelectedTextColor="@color/color_main"
                                            app:tabTextAppearance="@style/MyTabLayoutStyle"
                                            app:tabTextColor="@color/grey" 
                                            app:tabIconTint="@color/grey"
                                            />

代码：

TabLayoutMediator(
    tabLayout02,
    viewPager2,
    object : TabLayoutMediator.TabConfigurationStrategy {
        override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
            tab.text = titles[position]
        }
    }).attach()
for (i in 0..tabLayout02.tabCount) {
    tabLayout02.getTabAt(i)?.setIcon(drawables[i])
}
tabLayout02.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) {
        tab?.icon?.selected()
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
        tab?.icon?.unselected()
    }

    override fun onTabReselected(tab: TabLayout.Tab?) {
    }
})
val defaultTab = tabLayout02.getTabAt(defaultIndex)
defaultTab?.select()
defaultTab?.icon?.selected()

//图片选中状态
fun Drawable.selected() {
    this.setTint(ContextCompat.getColor(mContext, R.color.color_main))
}

//图片未选中状态
fun Drawable.unselected() {
    this.setTint(ContextCompat.getColor(mContext, R.color.grey))
}

自定义下划线、添加分割线

在这里插入图片描述

自定义下划线：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="15dp"
        android:height="5dp"
        android:gravity="center">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

自定义分割线：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
          android:width="5dp"
          android:height="5dp"
          android:gravity="center">
        <shape android:shape="oval">
            <solid android:color="@color/green" />
        </shape>
    </item>
</layer-list>

XML布局：

<com.google.android.material.tabs.TabLayout
                                            android:id="@+id/tabLayout03"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:layout_marginTop="10dp"
                                            app:tabIndicator="@drawable/tab_indicator"
                                            app:tabIndicatorColor="@color/green"
                                            app:tabIndicatorFullWidth="false"
                                            app:tabMode="fixed"
                                            app:tabSelectedTextColor="@color/green"
                                            app:tabTextAppearance="@style/MyTabLayoutStyle"
                                            app:tabTextColor="@color/grey" />

代码：

TabLayoutMediator(
    tabLayout03,
    viewPager2,
    object : TabLayoutMediator.TabConfigurationStrategy {
        override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
            tab.text = titles[position]
        }
    }).attach()

for (i in 0..tabLayout03.tabCount) {
    val linearLayout = tabLayout03.getChildAt(i) as? LinearLayout
    linearLayout?.apply {
        showDividers = LinearLayout.SHOW_DIVIDER_MIDDLE
        dividerDrawable =
        ContextCompat.getDrawable(mContext, R.drawable.tab_divider)
        dividerPadding = 2.dp
    }
}

val defaultTab = tabLayout03.getTabAt(defaultIndex)
defaultTab?.select()

设置角标

在这里插入图片描述

XML布局：

<com.google.android.material.tabs.TabLayout
                                            android:id="@+id/tabLayout04"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:layout_marginTop="10dp"
                                            app:tabIndicator="@drawable/tab_indicator"
                                            app:tabIndicatorColor="@color/blue"
                                            app:tabIndicatorFullWidth="false"
                                            app:tabMode="fixed"
                                            app:tabSelectedTextColor="@color/blue"
                                            app:tabTextAppearance="@style/MyTabLayoutStyle"
                                            app:tabTextColor="@color/grey" />

代码：

TabLayoutMediator(
    tabLayout04,
    viewPager2,
    object : TabLayoutMediator.TabConfigurationStrategy {
        override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
            tab.text = titles[position]
        }
    }).attach()

//数字角标
tabLayout04.getTabAt(1)?.let {
    it.orCreateBadge.apply {
        backgroundColor = Color.RED
        maxCharacterCount = 3
        number = 99999
        badgeTextColor = Color.WHITE
    }
}

//红点
tabLayout04.getTabAt(2)?.let {
    it.orCreateBadge.backgroundColor = ContextCompat.getColor(this, R.color.orange)
}

val defaultTab = tabLayout04.getTabAt(defaultIndex)
defaultTab?.select()

圆角样式

在这里插入图片描述

tab_bg_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/color_main" />
    <corners android:radius="100dp" />
</shape>

tab_indicator_shape

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:gravity="center"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <corners android:radius="100dp" />
            <size android:height="40dp" />
        </shape>
    </item>
</layer-list>

XML布局：

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout05"
        android:layout_width="wrap_content"
        android:layout_height="42dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="@drawable/tab_bg_shape"
        app:tabIndicator="@drawable/tab_indicator_shape"
        app:tabIndicatorColor="@color/white"
        app:tabIndicatorFullWidth="true"
        app:tabMinWidth="80dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/color_main"
        app:tabTextAppearance="@style/MyTabLayoutStyle"
        app:tabTextColor="@color/black" />

自定义View+Lottile

在这里插入图片描述

XML布局：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout06"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed" />

item_tab

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/tab_img"
        android:layout_width="30dp"
        android:layout_height="30dp" />

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp" />

</LinearLayout>

代码：

viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        tabLayout06.getTabAt(position)?.select()
    }
})

val layoutInflate = LayoutInflater.from(mContext)
val map = mapOf<String, Int>(
    "apple" to R.raw.apple,
    "heart" to R.raw.heart,
    "sun_moon" to R.raw.sun_moon,
    "pizza" to R.raw.pizza
)
map.keys.forEach { s: String ->
                  val tab = tabLayout06.newTab()
                  val view = layoutInflate.inflate(R.layout.item_tab, null)
                  val image = view.findViewById<LottieAnimationView>(R.id.tab_img).apply {
                      setAnimation(map[s]!!)
                      setColorFilter(Color.BLUE)
                  }
                  val text = view.findViewById<TextView>(R.id.tab_text).apply {
                      text = s
                  }
                  tab.customView = view
                  tabLayout06.addTab(tab)
                 }
tabLayout06.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) {
        tab?.selected()
        tab?.let {
            viewPager2.currentItem = it.position
        }
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
        tab?.unselect()
    }

    override fun onTabReselected(tab: TabLayout.Tab?) {
    }
})
val defaultTab = tabLayout06.getTabAt(defaultIndex)
defaultTab?.select()
defaultTab?.selected()

/**
 * 选中状态
 */
fun TabLayout.Tab.selected() {
    this.customView?.let {
        val image = it.findViewById<LottieAnimationView>(R.id.tab_img)
        val text = it.findViewById<TextView>(R.id.tab_text)
        if (!image.isAnimating) image.playAnimation()
        setLottieColor(image, true)
        text.setTextColor(ContextCompat.getColor(mContext, R.color.blue))
    }
}

/**
 * 未选中状态
 */
fun TabLayout.Tab.unselect() {
    this.customView?.let {
        val image = it.findViewById<LottieAnimationView>(R.id.tab_img)
        val text = it.findViewById<TextView>(R.id.tab_text)
        if (image.isAnimating) image.cancelAnimation()
        image.progress = 0F
        setLottieColor(image, false)
        text.setTextColor(ContextCompat.getColor(mContext, R.color.black))
    }
}

/**
 * set lottie icon color
 */
private fun setLottieColor(imageView: LottieAnimationView?, isSelected: Boolean) {
    imageView?.let {
        val color = if (isSelected) R.color.blue else R.color.black
        val csl = AppCompatResources.getColorStateList(this@TabLayoutActivity, color)
        val filter = SimpleColorFilter(csl.defaultColor)
        val keyPath = KeyPath("**")
        val callback = LottieValueCallback<ColorFilter>(filter)
        it.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)
    }
}

代码下载

xiangxiongfly915
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安卓TabLayout的使用
自古文人黑客梦
06-22 2401
安卓TabLayout的使用我们在进行安卓开发时，常常会使用到ViewPager,为了展示更美观的效果，我们经常会选择第三方的诸如TabPageIndicator等配合ViewPager使用。但是TabPageIndicator已经很老了，越来越难以满足现在的诸多需求。庆幸的是谷歌公司在2015年的I/O大会上发布了Design support library库的TabLayout，可以用来代替Ta
Android控件-TabLayout使用介绍(1)
最新发布
2301_79600088的博客
05-04 1022
在技术领域内，没有任何一门课程可以让你学完后一劳永逸，再好的课程也只能是“师傅领进门，修行靠个人”。“学无止境”这句话，在任何技术领域，都不只是良好的习惯，更是程序员和工程师们不被时代淘汰、获得更好机会和发展的必要前提。如果你觉得自己学习效率低，缺乏正确的指导，可以一起学习交流！加入我们吧！群内有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。
Android 使用TabLayout实现可水平滑动的标签选择布局
u010231454的专栏
09-05 6060
一说到标签布局，一般都会想到是流式布局FlowLayout，流式布局网上有太多的demo可参考了，但是今天产品上有个横向水平滑动的标签布局，有选中和未选中的状态，并且初始状态是不选中任何一个标签。折腾了一番，最终在TabLayout上修饰了一阵，解决了需求和想要的效果。具体如下： 1.先附上效果截图：（默认都是未选中的） 2.xml中使用如下所示： 因为tabLayout有个默认的点击效...
Android TabLayout控件的使用(一)
yangjunjin的博客
11-06 808
1、xml布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <android.support.design.widget.TabLayout andr
TabLayout的属性介绍
fengyeNom1的博客
12-12 1884
TabLayout在清单文件的属性设置: app:tabIndicatorFullWidth 为false时【标签下划线】自适应文字的宽度 android.support.design:tabIndicatorColor — 设置tab指示器(tab的下划线)的颜色。 android.support.design:tabIndicatorHeight — 设置tab指示器(tab的下划线)...
TabLayout学习笔记（简介及进阶）
fjnu_se的博客
06-10 417
前言：小白入门学习博客，大佬可以直接跳过此博客（大佬轻喷哈） TabLayout简介：    TabLayout是属于容器控件, 提供水平显示Tab的效果. 常常和ViewPager配合使用。Tablayout继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。 TabLayout属性简介 android.support.design:tab...
TabLayout tabMode="scrollable" 时，修改tab的宽度
jingbin_的博客
07-21 2291
使用TabLayout，但是 tabMode="scrollable" 时，两个tab之间的间距太开了，实在不美观，看TabLayout源码，原来是设置了最小间距导致的： this.scrollableTabMinWidth = res.getDimensionPixelSize(dimen.design_tab_scrollable_min_width); <dimen name="des...
Android TabLayout实现京东详情效果
09-01
总结来说，使用Android TabLayout实现京东详情效果，主要是通过集成Android Design Support Library，结合TabLayout、Toolbar和ViewPager来实现。通过合理的布局设计和编程实现，可以轻松创建出符合Material Design...
Android中TabLayout结合ViewPager实现页面切换效果
09-01
总结来说，`TabLayout` 和 `ViewPager` 在Android中的结合使用是一种强大的工具，可以方便地创建一个多页面、可切换的界面。通过在XML布局中设置组件和属性，以及在Java代码中进行初始化和绑定，我们可以实现美观且...
Android使用TabLayout+Fragment实现顶部选项卡
08-30
Android 使用 TabLayout+Fragment 实现顶部选项卡 本文主要介绍了 Android 使用 TabLayout+Fragment 实现顶部选项卡的功能，包括 TabLayout 的使用和 Fragment 的实现。下面是详细的知识点： 一、TabLayout 的使用...
基于TabLayout中的Tab间隔设置方法(实例讲解)
08-28
TabLayout是Android设计支持库中的一种布局控件，通常与ViewPager搭配使用，用于实现多页签切换效果。然而，TabLayout的使用中存在一些不足之处，例如Tab之间的间隔设置问题。今天，我们将探索基于TabLayout中的Tab...
Android TabLayout(选项卡布局)简单用法实例分析
09-02
主要介绍了Android TabLayout(选项卡布局)简单用法,结合实例形式简单分析了Android选项卡布局的界面布局与功能实现具体相关技巧,需要的朋友可以参考下
安卓好看的tablayout动画（国外的）
11-23
国外的稀有资源，动画不花哨，简约大方，好看。
Tablayout简单使用方法总结
01-05
本文为大家分享了Tablayout简单的使用方法，供大家参考，具体内容如下 一、TabLayout普通用法 在项目中使用viewpager的时候大多数都是和TabPagerIndicator结合使用，... compile 'com.android.support:design:23.1.1
TabLayout用法详解及自定义样式
08-31
总结来说，TabLayout是一个强大且灵活的组件，通过理解其默认样式和提供的API，开发者可以轻松地创建符合应用风格的标签页。无论是改变文字颜色、图标，还是自定义整个Tab视图，都能实现。通过结合`ViewPager`，...
总结Android中MD风格相关控件
01-05
要使用MD风格控件，首先需要在Gradle中加入Support Design Library，例如：...android.support.design.widget.CoordinatorLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:app=http://schemas
TabLayout属性详解
wanleiSuper的博客
09-14 1253
1.什么是TabLayout TabLayout提供了一个水平的布局用来展示Tabs。 2.TabLayout的基本使用方式 方式一： 1.在布局中加入该控件： <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_
Android 自定义View
java_option的博客
03-03 133
public class JoTabLayout extends TabLayout { public JoTabLayout(@NonNull Context context) { super(context); } public JoTabLayout(@NonNull Context context, @Nullable AttributeSet attrs) { super(context, attrs); } public
Android Tablayout的简单使用
weixin_42630638的博客
06-03 562
先看效果图 再看一下我创建的文件 上代码 1.先创建一些fragment，我这里就展示ShowFragment public class ShowFragment extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstance
Android Tablayout
09-04
Android TabLayout是一个用于显示标签页的控件，可以在布局中使用TabLayout来创建并管理多个标签页。可以使用XML布局文件来定义TabLayout，并设置其属性来自定义样式和行为。 在XML布局中，可以使用TabLayout标签来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值