Tablayout选中回调

版权声明

本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/11039643.html

本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。

前言

Tablayout一般做主页底下的导航栏开发或者上面的选择栏开发,就个人感觉Tablayout用于主页导航栏会比BottomNavigationView更好,自定义方面也更容易.缺点是没有动画也不是Material Design设计模式的一部分.下面就讲解用于有导航栏的主页开发:

一般主页导航栏与内容用Tablayout与Fragment配合使用

1.第一种Tablayout + ViewPager + Fragment, 好处是可以左右滑动不需要自己实现滑动,并且可以有动画出现

2.第二种Tablayout + Fragment, 如果你不需要左右滑动就可以轻松的选择这个模式.

在xml里

因为有2种添加Item的方式,所以写法也可以是2个种

第一种,这种方法可以直接配置Item的名称属性，注意！这种方法还可以设置图标android:icon=

android:layout_width="wrap_content"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

第二种,这种需要自己在代码里添加子Item,并且可以实现自定义布局和View的Item(下面会说明在代码里添加Item)

android:id="@+id/tablayout"

android:layout_width="0dp"

android:layout_height="56dp"

app:tabIndicatorHeight="0dp"

app:tabBackground="@android:color/transparent"

app:tabRippleColor="@android:color/transparent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent">

需要自定义Item(下面用创建Tab的方式添加到TabLayout里,就前面说的代码里添加Item)

private void addTabData() {

mTablayout = findViewById(R.id.tablayout);

String[] tabContentArray = {"首页", "通知", "圈子", "我的"};

int[] tabIconArray = {R.drawable.ic_home_homepage, R.drawable.ic_home_notice, R.drawable.ic_home_circle, R.drawable.ic_home_my};

for (int i = 0; i < 4; i++) {

TabLayout.Tab tab = mTablayout.newTab();//关键的创建一个Tab,注意这里使用的是已经实例的mTablayout创建的Tab,很容易疏忽使用new Tablayout().new Tab()的方式创建,这个是会报错的.

View view = LayoutInflater.from(this).inflate(R.layout.home_tab_item,mTablayout,false);

ImageView icon = view.findViewById(R.id.icon);

TextView content = view.findViewById(R.id.content);

icon.setImageResource(tabIconArray[i]);

content.setText(tabContentArray[i]);

tab.setCustomView(view);

if (i == 0){

mTablayout.addTab(tab,0,true);//设置选择的item

}else {

mTablayout.addTab(tab);

}

}

}

home_tab_item.xml

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical"

android:layout_width="35dp"

android:layout_height="wrap_content">

android:id="@+id/red_dot"

android:layout_width="10dp"

android:layout_height="10dp"

android:background="@drawable/bg_reddot"

app:layout_constraintTop_toTopOf="@id/icon"

app:layout_constraintLeft_toRightOf="@id/icon"

app:layout_constraintRight_toRightOf="@id/icon"/>

android:id="@+id/icon"

android:layout_width="24dp"

android:layout_height="24dp"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"/>

android:id="@+id/content"

android:textColor="@color/fontColorMain2"

android:textSize="@dimen/font_size_11"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="2dp"

app:layout_constraintTop_toBottomOf="@id/icon"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"/>

ic_home_homepage.xml

Tablayout选中回调

private void initTablayoutListener(){

mTablayout.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后的重复点击tab

}

});

}

选中指定item

在代码里选中某一个TabItem，从select()方法就可以看出.就是希望你使用select()方法来切换item

mTabLayout.getTabAt(0).select();

设置Tab的TextSize

首先你需要在styles.xml文件里创建这个文字属性的styles

然后在使用以下属性导入styles

app:tabTextAppearance="@style/TabLayoutTextStyle"

如果你不需要选中下划线,可以使用这个属性取消

app:tabIndicatorHeight="0dp"

如果你不需要点击后的阴影加涟漪动画效果,可以使用下面2个属性取消

app:tabBackground="@android:color/transparent"

app:tabRippleColor="@android:color/transparent"

指示线的颜色

app:tabIndicatorColor

指示线的高度

app:tabIndicatorHeight

指示线是否铺满整个tab宽度，可以配合实现圆角

app:tabIndicatorFullWidth="false"

Tab选中时的字体颜色

app:tabSelectedTextColor

未选中字体颜色

app:tabTextColor="@color/colorPrimary"

设置背景颜色与选中背景颜色

背景颜色

app:tabBackground="color"

选中背景颜色

背景xml

使用

app:tabBackground="@drawable/snake_tuya_shape_rectangle_000000"

是否可以滚动

app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的

tab的最大最小宽度

app:tabMaxWidth="0dp" ：

app:tabMinWidth="0dp" ：

tab的内边距

app:tabPaddingTop="0dp" ：tab上内边距

app:tabPadding="0dp" ：tab的内边距

tab的位置

app:tabGravity="center" ：设置 fill 可以填充满item

自定义指示线

app:tabIndicator= : 注意！这里的指示线其实是android:state_selected="true"的选中状态，所以如果单单写一个shape的xml文件设置是无法显示的,需要在写一个选中状态的xml。参考如下：

android:bottom="8dp"

android:left="8dp"

android:right="8dp"

android:top="8dp">

android:width="1dp"

android:color="@color/colorAccent" />

改变字体大小与颜色

app:tabTextAppearance="@style/tab_layout_item_text" ： 改变字体大小颜色等等，style参考如下：

TabLayout宽度填满

有时候你会发现TabLayout无法填满父类容器的宽度，在xml中添加下面三个属性，可以实现将宽度填充满

app:tabMaxWidth="0dp"

app:tabMode="fixed"

app:tabGravity="fill"

TabLayout与ViewPager配合使用

请注意，TabLayout与ViewPager配合使用是无法自定义标题Tab的View的。因为FragmentPagerAdapter会帮你实现标题Tab

代码

class HomeFragment : BaseFragment() {

private val mBinding by lazy { MainFragmentUsageBinding.inflate(layoutInflater) }

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

return mBinding.root

}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

super.onViewCreated(view, savedInstanceState)

initView()

}

private fun initView() {

val list = listOf("主页","消息","设置")

val fragmentList = mutableListOf()

list.forEachIndexed { index, pair ->

fragmentList.add(Fragment.newInstance())

}

/**

* 如果你的布局是在fragment里，可以选择childFragmentManager或者activity的parentFragmentManager

* 如果你的布局在activity里，则选择supportFragmentManager

*/

val myAdapter = MyAdapter(parentFragmentManager, fragmentList, list)

mBinding.usageDayViewPager.adapter = myAdapter

//setupWithViewPager方法是关键，它负责组合ViewPager与TabLayout

mBinding.tabLayout.setupWithViewPager(mBinding.usageDayViewPager)

}

}

/**

* FragmentPagerAdapter需要使用它来创建适配器

*/

class MyAdapter(fm: FragmentManager, val list: List, val titleList: List) : FragmentPagerAdapter(fm) {

override fun getCount() = list.size

override fun getItem(position: Int): Fragment {

return list[position]

}

/**

* 注意!TabLayout与ViewPager的组合会自己实现子Tab，所以子Tab的文字需要从这里提供

*/

override fun getPageTitle(position: Int): CharSequence? {

return titleList?.get(position)

}

}

其他API

以下是从View的源码里复制来的属性,以下属性仅做参考,有些并没有提供方法设置.比如tabTextSize 有归有,但是人家不提供方法设置..除非自己继承重写

int tabPaddingStart;int tabPaddingTop;int tabPaddingEnd;int tabPaddingBottom;int tabTextAppearance;android.content.res.ColorStateList tabTextColors;android.content.res.ColorStateList tabIconTint;android.content.res.ColorStateList tabRippleColorStateList;@androidx.annotation.Nullableandroid.graphics.drawable.Drawable tabSelectedIndicator;android.graphics.PorterDuff.Mode tabIconTintMode;float tabTextSize;float tabTextMultiLineSize;final int tabBackgroundResId;int tabMaxWidth;private final int requestedTabMinWidth;private final int requestedTabMaxWidth;private final int scrollableTabMinWidth;private int contentInsetStart;int tabGravity;int tabIndicatorAnimationDuration;int tabIndicatorGravity;int mode;boolean inlineLabel;boolean tabIndicatorFullWidth;boolean unboundedRipple;

end