TabLayout 的用法
TabLayout是属于容器控件, 提供水平显示Tab的效果. 常常和ViewPager配合使用. 我将全面地讲解其用法. 反正我是没看过比我还详细的了.
演示
添加依赖
这是Android Design 包下的类, 该包是Android5.0 引入的UI包
compile'com.android.support:design:25.2.0'
布局
代码
publicclassMainActivityextendsAppCompatActivity{@BindView(R.id.tab_layout) TabLayout mTabLayout;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); mTabLayout.addTab(mTabLayout.newTab().setText("首页")); mTabLayout.addTab(mTabLayout.newTab().setText("分类")); mTabLayout.addTab(mTabLayout.newTab().setText("设置")); }}
第二种方式
完全通过布局创建
TabLayout
方法有点多
属性
修改布局的属性
显示模式
可滑动
app:tabMode="scrollable"
固定
app:tabMode="fixed"
指示器选项
app:tabIndicatorHeight="10dp"//指示器高度app:tabIndicatorColor="@color/colorPrimary"// 指示器颜色
文字选项
app:tabSelectedTextColor="#ffffff"// 选择的Tab的文字颜色app:tabTextColor="#000000"// 未选择的Tab文字颜色app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large"// 文字样式
背景设置
两者没什么区别
android:background="@color/colorAccent"// 背景app:tabBackground="@color/colorPrimary"//背景
标签距离
app:tabPaddingStart="10dp"app:tabPaddingBottom="10dp"app:tabPadding="10dp"app:tabPaddingEnd="10dp"app:tabPaddingTop="10dp"
对齐方式
居中显示
app:tabGravity="center"
填充
app:tabGravity="fill"
偏移
从左边开始偏移距离, 必须是可滑动的模式 scrollable
app:tabContentStart="200dp"
标签宽度限制
最大宽度
app:tabMaxWidth="50dp"
最小宽度
app:tabMinWidth="100dp"
代码
TabLayout提供的方法
标签
创建标签
TabLayout.TabnewTab()
添加标签, 只有添加后才能显示
voidaddTab(TabLayout.Tab tab)voidaddTab(TabLayout.Tab tab,intposition)voidaddTab(TabLayout.Tab tab,booleansetSelected)voidaddTab(TabLayout.Tab tab,intposition,booleansetSelected)
删除标签
voidremoveTab(TabLayout.Tab tab)
通过索引删除标签
voidremoveTabAt(intposition)
删除全部标签
voidremoveAllTabs()
得到标签
TabLayout.TabgetTabAt(intindex)
得到标签总数
intgetTabCount()
设置样式
指示器
voidsetSelectedTabIndicatorColor(intcolor)// 指示器颜色voidsetSelectedTabIndicatorHeight(intheight)// 指示器高度
标签文本
voidsetTabTextColors(intnormalColor,// 正常颜色intselectedColor)// 选择状态颜色voidsetTabTextColors(ColorStateList textColor)// 状态颜色
显示模式
这个之前属性里面介绍过了
intgetTabMode()voidsetTabMode(intmode)
mode:
MODE_SCROLLABLE
MODE_FIXED
对齐方式
voidsetTabGravity(intgravity)intgetTabGravity()
添加View
不止是添加标签Tab还可以直接添加View
voidaddView(View child)voidaddView(View child,intindex)voidaddView(View child,
ViewGroup.LayoutParams params)voidaddView(View child, // View对象intindex, // 位置索引 ViewGroup.LayoutParams params)// 布局参数
得到当前选择的位置
intgetSelectedTabPosition()
监听器
选择监听器
该方法已经被废弃, 不推荐使用.
voidsetOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)
替代的方法是
voidaddOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)
该监听器用完后需要删除
voidremoveOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)
一次性删除所有添加的选择监听器
voidclearOnTabSelectedListeners()
Tab
该类是TabLayout的内部类, 表示TabLayout中的每一个标签. 我将介绍这个类的所有方法
判断是否被选择
booleanisSelected()
设置为被选择状态
voidselect()
描述内容
如果你没用设置描述内容, 默认的是标签的标题
TabLayout.TabsetContentDescription(intresId)// 用strings id的TabLayout.TabsetContentDescription(CharSequence contentDesc)CharSequencegetContentDescription()
自定义标签的内容
每个标签可以尽情的自定义视图
TabLayout.TabsetCustomView(intresId)TabLayout.TabsetCustomView(View view)
标签的标签
给Tab设置tag, 然后就可以通过tag得到Tab
TabLayout.TabsetTag(Object tag)ObjectgetTag()
添加图标
TabLayout.TabsetIcon(Drawable icon)TabLayout.TabsetIcon(intresId)DrawablegetIcon()
标题的文字
TabLayout.TabsetText(intresId)TabLayout.TabsetText(CharSequence text)CharSequencegetText()
当前标签位置
intgetPosition()
关联ViewPager
TabLayout和ViewPager配合使用是最常见的运用方式, 可以说量身打造. 这里我将介绍两种方式.
两者配合使用后TabLayout就不能通过自己创建Tab了, 需要PagerAdapter中实现 getPagerTitle() 方法返回标签的文字. 标签的数量有ViewPager的分页数量决定.
布局中嵌套
布局
代码
publicclassMainActivityextendsAppCompatActivity{@BindView(R.id.tab_layout) TabLayout mTabLayout;@BindView(R.id.viewpager) ViewPager mViewpager;privateArrayList mList;privateString[] mTitle;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); initData(); mViewpager.setAdapter(newPagerAdapter() {@OverridepublicintgetCount(){returnmList.size(); }@OverridepublicbooleanisViewFromObject(View view, Object object){returnview == object; }@OverridepublicObjectinstantiateItem(ViewGroup container,intposition){ View view = mList.get(position); container.addView(view);returnview; }@OverridepublicvoiddestroyItem(ViewGroup container,intposition, Object object){ container.removeView((View) object); }@OverridepublicCharSequencegetPageTitle(intposition){returnmTitle[position]; } }); } privatevoidinitData(){ View viewpagerA = getLayoutInflater().inflate(R.layout.viewpager_a,null); View viewpagerB = getLayoutInflater().inflate(R.layout.viewpager_b,null); View viewpagerC = getLayoutInflater().inflate(R.layout.viewpager_c,null); mList =newArrayList<>(); mList.add(viewpagerA); mList.add(viewpagerB); mList.add(viewpagerC); mTitle =newString[]{"首页","分类","设置"}; }
布局中关联
如果布局没有嵌套
就需要在ViewPager设置PagerAdapter之前关联两者
mTabLayout.setupWithViewPager(mViewpager);
虽然配合ViewPager后TabLayout创建的Tab并不能正常显示, 因为setupWithViewPager内部方法是先删除所有的标签再添加.
但是还是可以通过 getTabAt() 得到标签之后进行修改.
来自：http://liangjingkanji.coding.me/2017/03/03/TabLayout/
