Android TabLayout总结

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是否选中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

基本使用

TabLayout样式：

<style name="MyTabLayoutStyle">
    "android:textSize">16sp
    "android:textStyle">normal
    "textAllCaps">false
style>
1
2
3
4
5

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" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

代码：

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

添加图标、隐藏下划线

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"
                                            />
1
2
3
4
5
6
7
8
9
10
11
12

代码：

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))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

自定义下划线：

<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>
1
2
3
4
5
6
7
8
9
10

自定义分割线：

<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>
1
2
3
4
5
6
7
8
9
10
11

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" />
1
2
3
4
5
6
7
8
9
10
11
12

代码：

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

设置角标

XML布局：

1
2
3
4
5
6
7
8
9
10
11
12

代码：

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

圆角样式

tab_bg_shape

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/color_main" />
    <corners android:radius="100dp" />
shape>
1
2
3
4
5
6

tab_indicator_shape

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

自定义View+Lottile

XML布局：

1
2
3
4
5
6
7

item_tab

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

代码：

viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        tabLayout06.getTabAt(position)?.select()
    }
})
1
2
3
4
5
6

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/**
 * 选中状态
 */
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)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

代码下载