Android 自定义TabLayout
Posted 哈特谢普苏特
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android 自定义TabLayout相关的知识,希望对你有一定的参考价值。
默认的TabLayout是没有花里胡哨的功能的,比如说我们可能希望它有边框,或者有背景颜色,或者外边框。因此就需要更改一些属性,或者在代码中实现。比如下图这种带边框,字体改变。
实现思路:
tablayout外层嵌套RelativeLayout,和viewpager配合使用
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#FAFAFA">
<RelativeLayout
android:id="@+id/rlyout"
android:layout_width="228dp"
android:layout_height="25dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="@drawable/tab_background_ridus"
android:padding="1dp">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabGravity="fill"
app:tabIndicatorColor="#FF000000"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/white"
app:tabTextAppearance="@style/tabLayoutTextStyle"
app:tabTextColor="@color/black" />
</RelativeLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/rlyout"
android:layout_marginTop="20dp"
android:background="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>
tab_background_ridus.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充 -->
<solid android:color="@color/white" />
<!-- 圆角 -->
<corners android:radius="20dp" />
<stroke
android:width="1dp"
android:color="@color/black" />
</shape>
tabLayoutTextStyle 这个是自定义tablayout的字体大小等
<style name="tabLayoutTextStyle">
<item name="android:textSize">13sp</item>
<item name="android:fontFamily">sans-serif-medium</item>
</style>
在代码中添加addOnTabSelectedListener进行监听,然后修改当前布局的圆角、颜色等值,默认选中的是0位置的tab
binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener
override fun onTabReselected(tab: TabLayout.Tab)
override fun onTabUnselected(tab: TabLayout.Tab)
setBackground(tab, false)
override fun onTabSelected(tab: TabLayout.Tab)
setBackground(tab, true)
)
binding.tabLayout.getTabAt(0)?.let setBackground(it, true)
setBackground()中做的事情就是根据当前位置的不同,设置不同的布局
private fun setBackground(tab: TabLayout.Tab, selected: Boolean)
var drawable: Drawable? = null
when (tab.position)
0 ->
if (selected)
drawable = getDrawable(R.drawable.tab_background_checked)
else
drawable = getDrawable(R.drawable.tab_unchecked_first)
1 ->
if (selected)
drawable = getDrawable(R.drawable.tab_background_checked_second)
else
drawable = getDrawable(R.drawable.tab_unchecked_second)
ViewCompat.setBackground(tab.view, drawable)
比如,当第一个tab被选中时,我们希望它的左上左下都有圆角
也就是drawable为tab_background_checked文件
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/black" />
<corners
android:topLeftRadius="20dp"
android:bottomLeftRadius="20dp"
/>
</shape>
这样就可以实现定制的一些需求
ps:当时一开始想的是去重写tablayout,这样就可以自定义它的字体大小、边框等等,但是发现其实没有必要,tablayout已经通过接口、或者是xml帮我们实现好了。
一个参考资料 tablayout自定义总结
以上是关于Android 自定义TabLayout的主要内容,如果未能解决你的问题,请参考以下文章
Android 自定义View实现SegmentControlView(自定义多样式tablayout)
Android - 防止 TabLayout 的子级剪切 Tab 内容