AndroidX TabLayout使用、扩展及解析All In One

APP源码解析

于 2024-03-15 20:41:39 发布

阅读量948

点赞数 16

分类专栏： Android程序员文章标签： androidx

本文链接：https://blog.csdn.net/m0_61331367/article/details/136749463

版权

Android程序员专栏收录该内容

11 篇文章 0 订阅

订阅专栏

android.widget.FrameLayout

|
|

↳

android.widget.HorizontalScrollView

|
|

↳

com.google.android.material.tabs.TabLayout

2.基本功能及使用

TabLayout继承自 HorizontalScrollView

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

控件的基本层次关系

2.1 代码添加tab

TabLayout提供了用于显示选项卡的水平布局。要显示的选项卡的填充是通过TabLayout.Tab实例完成的。可以通过创建标签 newTab()。在此处，您可以分别通过setText(int) 和更改选项卡的标签或图标setIcon(int)。要显示选项卡，需要通过一种addTab(Tab)方法将其添加到布局中。例如：

TabLayout tabLayout = …;
tabLayout.addTab（tabLayout.newTab（）。setText（“ Tab 1”））;
tabLayout.addTab（tabLayout.newTab（）。setText（“ Tab 2”））;
tabLayout.addTab（tabLayout.newTab（）。setText（“ Tab 3”））;

应该添加一个监听器，addOnTabSelectedListener(OnTabSelectedListener)以在任何选项卡的选择状态更改时得到通知。

2.2 xml配置tab

还可以通过使用将项目添加到布局中的TabLayout TabItem。用法示例如下：

<com.google.android.material.tabs.TabLayout
android：layout_height =“ wrap_content”
android：layout_width =“ match_parent”>

<com.google.android.material.tabs.TabItem
android：text =“ @ string / tab_text” />

<com.google.android.material.tabs.TabItem
android：icon =“ @ drawable / ic_android” />

</com.google.android.material.tabs.TabLayout>

2.3 tab配置viewpager

如果ViewPager将此布局与一起使用，则可以调用setupWithViewPager(ViewPager)将两者链接在一起。该版式将从PagerAdapter的页面标题中自动填充。

此视图还支持用作ViewPager装饰的一部分，并且可以像这样在布局资源文件中直接添加到ViewPager：

<androidx.viewpager.widget.ViewPager
android：layout_width =“ match_parent”
android：layout_height =“ match_parent”>

<com.google.android.material.tabs.TabLayout
android：layout_width =“ match_parent”
android：layout_height =“ wrap_content”
android：layout_gravity =“ top” />

</androidx.viewpager.widget.ViewPager>

3.使用详解

这里很多人都使用的都是design 28，主工程的gradle的配置根据不同情况改。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

工程库引用

上面三种使用方法，我们使用新的库androidx看下使用的效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

基础库使用效果

3.1 使用扩展

这里列举一下主要使用到到属性,只列举几个，具体可看官方文档。

|
属性

值

说明

|
| — | — | — |
|

tabMode

scrollable/fixed

tab是水平可滚动的还是固定宽，个数较少的时候可以使用fixed,如果标签超出了屏幕范围，设置为scrollable比较好

|
|

tabGravity

fill/center

tab的布局是布满空间还是居中

|
|

tabIndicatorHeight

（dp/pix）

底部滑动线条的高度

|
|

tabMaxWidth

（dp/pix）

Tab的最大宽度

|
|

tabTextColor

颜色值

默认样式未选中颜色

|
|

app:tabSelectedTextColor

颜色值

选中颜色

3.2 典型的使用场景

（1）代码添加tab

//TabLayout的基本使用
for(int i=0;i<mTitles.length;i++){
TabLayout.Tab tab=mTabLayout.newTab();
tab.setTag(i);
tab.setText(mTitles[i]);
mTabLayout.addTab(tab);
}