Android TabLayout选项卡使用教程
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
TabLayout
TabLayout 在开发中一般作为选项卡使用,常与 ViewPager2 和Fragment 结合起来使用。
常用属性:
app:tabBackground 设置 TabLayout 的背景色,改变整个TabLayout 的颜色;
app:tabTextColor 设置未被选中时文字的颜色;
app:tabSelectorColor 设置选中时文字颜色;
app:tabTextAppearance="@android:style/TextAppearance.Large" 设置 TabLayout 的文本主题,无法通过 textSize 来设置文字大小,只能通过主题来设定;
app:tabMode="scrollable"设置 TabLayout 可滑动,当 tabItem 个数较多时,一个界面无法呈现所有的导航标签,此时就必须要用;
app:tabIndicator 设置指示器;
app:tabIndicatorColor 设置指示器颜色;
app:tabIndecatorHeight 设置指示器高度,当app:tabIndecatorHeight="0dp",隐藏 Indicator 效果;
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large" 改变 TabLayout 里 TabItem 文字的大小;
app: tabPadding 设置 Tab 内部 item 的 padding。也可以单独设置某个方向的padding, 比如 app:tabPaddingStart 设置左边距;
app:paddingEdng / app:paddingStart 设置整个 TabLayout 的 padding;
app:tabGravity="center" 居中,如果是 fill,则充满;
app:tabMaxWidth / app:tabMinWidth 设置最大/最小的 tab 宽度,对 Tab 的宽度进行限制。
TabItem
给TabLayout 添加 Item 有两种方法,其中一种就是使用 TabItem 在 xml 里直接添加。
1. 使用TabItem 给 TabLayout 添加卡片。
1 2 3 4 5 | < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_add" android:text = "添加" /> |
android:icon 设置图标;
Android:text 设置文本;
2. 通过代码添加。使用 TabLayoutMediator()
1 2 3 4 5 6 7 8 | new TabLayoutMediator(binding.tab, binding.viewPager, new TabLayoutMediator.TabConfigurationStrategy() { @Override public void onConfigureTab( @NonNull TabLayout.Tab tab, int position) { //TODO 设置卡片的文本/图标 tab.setText(mTitles.get(position)) .setIcon(mIcons.get(position)); } }).attach(); |
其中 mTitles 和 mIcons 是存放 text 和 Icon 的list。效果如下:
可以看到 text 在英文状态下默认都是大写,这是因为在 TabLayout 的源码中默认设置属性 textAllCaps=true。所以可以在 TabLayout 中设置如下属性来改成小写。
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
演示效果的xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout 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:orientation = "vertical" tools:context = ".MainActivity" > < com.google.android.material.tabs.TabLayout android:id = "@+id/tabs" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_margin = "8dp" > < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_add" android:text = "添加" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_delete" android:text = "删除" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_camera" android:text = "相机" /> </ com.google.android.material.tabs.TabLayout > < com.google.android.material.tabs.TabLayout android:id = "@+id/tabs1" style = "@style/Widget.MaterialComponents.TabLayout" android:layout_width = "match_parent" android:layout_height = "wrap_content" app:tabMode = "scrollable" android:layout_margin = "8dp" > < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_add" android:text = "添加" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_delete" android:text = "删除" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_camera" android:text = "相机" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_add" android:text = "添加" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_delete" android:text = "删除" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_camera" android:text = "相机" /> </ com.google.android.material.tabs.TabLayout > < com.google.android.material.tabs.TabLayout android:id = "@+id/tabs2" style = "@style/Widget.MaterialComponents.TabLayout.Colored" android:layout_width = "match_parent" android:layout_height = "wrap_content" app:tabIndicatorColor = "@color/purple_700" android:layout_margin = "8dp" > < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_add" android:text = "添加" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_delete" android:text = "删除" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_camera" android:text = "相机" /> </ com.google.android.material.tabs.TabLayout > < com.google.android.material.tabs.TabLayout android:layout_margin = "8dp" android:id = "@+id/tabs3" style = "@style/Widget.Design.TabLayout" android:layout_width = "match_parent" android:layout_height = "wrap_content" > < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_add" android:text = "添加" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_call" android:text = "删除" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_camera" android:text = "菜单" /> </ com.google.android.material.tabs.TabLayout > < com.google.android.material.tabs.TabLayout android:id = "@+id/tabs4" app:tabTextAppearance = "@android:style/TextAppearance.Holo.Large" android:layout_width = "match_parent" android:layout_height = "wrap_content" app:tabIndicatorHeight = "0dp" android:layout_margin = "8dp" > < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_add" android:text = "add" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_delete" android:text = "删除" /> < com.google.android.material.tabs.TabItem android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:icon = "@android:drawable/ic_menu_camera" android:text = "相机" /> </ com.google.android.material.tabs.TabLayout > </ LinearLayout > |
到此这篇关于Android TabLayout选项卡使用教程的文章就介绍到这了,更多相关Android TabLayout内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Android Flutter绘制有趣的 loading加载动画
在网络速度较慢的场景,一个有趣的加载会提高用户的耐心和对 App 的好感。本篇我们利用Flutter 的 PathMetric来玩几个有趣的 loading 效果,感兴趣的可以动手尝试一下2022-07-07Android startActivityForResult的调用与封装详解
startActivityForResult 可以说是我们常用的一种操作了,目前有哪些方式实现 startActivityForResult 的功能呢?本文就来和大家详细聊聊2023-03-03实例解析Android系统中的ContentProvider组件用法
这篇文章主要介绍了Android系统中的ContentProvider组件用法,举例讲解了ContentProvider传递数据及监听ContentProvider数据改变的方法,十分详细,需要的朋友可以参考下2016-04-04
最新评论