前言
Tablayout一般做主页底下的导航栏开发或者上面的选择栏开发,就个人感觉Tablayout用于主页导航栏会比BottomNavigationView更好,自定义方面也更容易.缺点是没有动画也不是Material Design设计模式的一部分.下面就讲解用于有导航栏的主页开发:
一般主页导航栏与内容用Tablayout与Fragment配合使用
1.第一种Tablayout+ViewPager+Fragment,好处是可以左右滑动不需要自己实现滑动,并且可以有动画出现
2.第二种Tablayout+Fragment,如果你不需要左右滑动就可以轻松的选择这个模式.
在xml里
因为有2种添加Item的方式,所以写法也可以是2个种
第一种,这种方法可以直接配置Item的名称属性
第二种,这种需要自己在代码里添加子Item,并且可以实现自定义布局和View的Item(下面会说明在代码里添加Item)
代码部分讲解
方式1.如果你需要与ViewPager配合使用,那么你需要知道下面的关键代码
ContentFragment fragment1 = new ContentFragment(); ContentFragment fragment2 = new ContentFragment(); ContentFragment fragment3 = new ContentFragment(); ContentFragment fragment4 = new ContentFragment(); fragments.add(fragment1); fragments.add(fragment2); fragments.add(fragment3); fragments.add(fragment4); adapter = new FragmentAdapter(getSupportFragmentManager(), fragments); viewpager.setAdapter(adapter); tablayout.setupWithViewPager(viewpager);
tablayout.setupWithViewPager(viewpager);是关键,负责连接ViewPager与Tablayout,当然选择的适配器FragmentAdapter也是关键
方式2.如果你是需要自定义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
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 } }); } XML属性讲解
设置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 ： 指示线的高度
- app:tabIndicatorFullWidth="false" 指示线是否铺满宽度
- app:tabSelectedTextColor ： tab选中时的字体颜色
- app:tabTextColor="@color/colorPrimary" ：未选中字体颜色
- app:tabBackground="color" ： 整个tablayout颜色
- app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的
以下是从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;
补充内容
在代码里选中某一个TabItem
mTabLayout.getTabAt(0).select();
你从select()方法就可以看出.就是希望你使用select()方法来切换item
end