UI组件移动开发设计系统【免费下载链接】material-components-android[MAINTENANCE MODE] Modular and customizable Material Design UI components for Android项目地址https://gitcode.com/gh_mirrors/ma/material-components-android点击查看免费下载本指南以 Material Components for AndroidMDC-Android仓库中的 Tabs 组件文档 为核心结合 TabLayout 源码、TabLayoutMediator 以及res/values/attrs.xml、styles.xml等资源文件系统讲解在 Android 应用中集成 Material 3 风格 Tabs 的全部要点从 Primary/Secondary 两种变体与解剖结构到全部可配置属性与默认值再到固定/可滚动 Tab、徽标Badge、无障碍支持、ViewPager/ViewPager2 联动及主题定制。读完后你将能够独立搭建、深度定制并无障碍化一套生产可用的 Tab 导航。Tabs 组件概览Primary 与 Secondary 两种变体Tabs 用于在不同屏幕、数据集和其他交互之间组织内容。在 Material 3 中Tabs 分为两种变体Primary tabs主选项卡放置在应用栏下方的内容面板顶部用于展示主要的内容目的地。它承载核心的顶层导航职责。Secondary tabs次要选项卡用于在某个内容区域内进一步细分相关内容和建立层级关系通常在 Primary tabs 已存在的场景下作为补充导航出现。两种变体在默认样式上的差异可以从仓库的样式定义中直接看到Widget.Material3.TabLayout与Widget.Material3.TabLayout.Secondary分别对应 styles.xml 中的两个风格族。Secondary 样式在背景色、图标/文字色调色板、指示器形状使用m3_tabs_line_indicator而非圆角线指示器以及tabIndicatorFullWidth默认为true等维度上与 Primary 不同。注意官方文档中的示意图使用了多种动态配色Dynamic Color方案实际渲染颜色会随系统主题动态变化。解剖结构AnatomyPrimary tabs的组成部分包括容器Container徽标Badge可选图标Icon可选标签文本Label分隔线Divider激活指示器Active indicatorSecondary tabs的组成部分默认不含图标容器Container徽标Badge可选标签文本Label分隔线Divider激活指示器Active indicator从源码布局资源看图标与文本是分开渲染的design_layout_tab_icon.xml 与 design_layout_tab_text.xml 分别承载 Tab 的图标与标签视图TabLayout会根据是否存在图标/文本及tabInlineLabel的值决定它们的排列方式。关键属性Key Properties所有 TabLayout 属性的完整声明都集中在 attrs.xml 的TabLayout与TabItem两个declare-styleable中。下面按官方文档的分类逐一列出属性、对应方法及默认值。容器属性Container attributes元素属性相关方法默认值颜色android:backgroundsetBackground/getBackground?attr/colorOnSurfaceVariant高度android:elevationsetElevation0dp高度无由内容决定无内联文本48dp非内联文本或含图标时72dp模式tabModesetTabMode/getTabModefixedtabMode在 attrs.xml 中定义了三个枚举值scrollable(0)、fixed(1)、auto(2)对应 TabLayout.java 中的MODE_SCROLLABLE、MODE_FIXED、MODE_AUTO常量。auto模式会根据 Tab 总宽度是否超过容器宽度自动在 fixed 与 scrollable 之间切换。Tab 图标属性Tab item icon attributes元素属性相关方法默认值图标android:iconsetIcon/getIconnull颜色tabIconTintsetTabIconTint/setTabIconTintResource/getTabIconTint未选中为colorOnSurfaceVariant选中activated为colorPrimarytabIconTint的默认状态列表定义在 m3_tabs_icon_color.xml 中禁用态使用material_emphasis_disabled透明度选中态引用m3_comp_primary_navigation_tab_with_icon_active_icon_color未选中态引用 inactive 宏。选中态通过android:state_selectedtrue区分。Tab 文本标签属性Tab item text label attributes元素属性相关方法默认值文本android:textsetText/getTextnull颜色tabTextColorsetTabTextColors/getTabTextColors未选中colorOnSurfaceVariant选中colorPrimary字体tabTextAppearance无?attr/textAppearanceTitleSmall选中字体tabSelectedTextAppearance无无回退到tabTextAppearance内联标签tabInlineLabelsetInlineLabel/setInlineLabelResource/isInlineLabelfalse重要提示使用tabSelectedTextAppearance时必须保证tabTextAppearance中包含匹配的文本属性如字体、字号、颜色否则可能出现意外的渲染行为。文本颜色选择器见 m3_tabs_text_color.xml。当tabInlineLabeltrue时图标与文本水平排列在同一行为false默认时图标在上、文本在下。Tab 项容器属性Tab item container attributes元素属性相关方法默认值水波纹颜色tabRippleColorsetTabRippleColor/setTabRippleColorResource/getTabRippleColorcolorOnSurfaceVariant16% 透明度选中态colorPrimary16% 透明度无界波纹tabUnboundedRipplesetUnboundedRipple/setUnboundedRippleResource/hasUnboundedRipplefalse对齐方式tabGravitysetTabGravity/getTabGravityfill最小宽度tabMinWidth无72dpscrollable 模式或wrap_content最大宽度tabMaxWidth无264dp内边距tabPaddingStart/tabPaddingEnd/tabPaddingTop/tabPaddingBottom/tabPadding无12dp/12dp/0dp/0dp/0dptabGravity支持fill(0)、center(1)、start(2) 三个枚举见 attrs.xml 与 TabLayout.java 的GRAVITY_FILL、GRAVITY_CENTER、GRAVITY_START。最小/最大宽度对应 dimens.xml 中的design_tab_scrollable_min_width72dp与design_tab_max_width264dp。水波纹状态列表见 m3_tabs_ripple_color.xml。Tab 指示器属性Tab indicator attributes元素属性相关方法默认值颜色tabIndicatorColorsetSelectedTabIndicatorColorcolorPrimaryDrawabletabIndicatorsetSelectedTabIndicator/getSelectedTabIndicatorm3_tabs_rounded_line_indicator高度tabIndicatorHeightsetSelectedTabIndicatorHeight2dp全宽tabIndicatorFullWidthsetTabIndicatorFullWidth/isTabIndicatorFullWidthfalse动画模式tabIndicatorAnimationModesetTabIndicatorAnimationMode/getTabIndicatorAnimationModeelastic位置tabIndicatorGravitysetSelectedTabIndicatorGravity/getSelectedTabIndicatorGravitybottom动画时长tabIndicatorAnimationDuration无250毫秒指示器默认 drawable m3_tabs_rounded_line_indicator.xml 是一个 layer-list 包裹的圆角矩形左右各留2dp边距、顶部圆角3dp颜色由代码以tabIndicatorColor的值程序化填充。tabIndicatorAnimationMode支持三种枚举见 attrs.xmllinear(0) 左右边界同步移动、elastic(1) 左右边界异步移动形成拉伸-收缩弹性效果默认也是 M3 规范推荐、fade(2) 先淡出再淡入。对应的插值器实现分别为 ElasticTabIndicatorInterpolator.java 与 FadeTabIndicatorInterpolator.java。tabIndicatorGravity支持bottom(0)、center(1)、top(2)、stretch(3)见 TabLayout.java。另外 attrs.xml 中还有tabIndicatorHeight的说明官方已将其标记为deprecated推荐改为在自定义tabIndicatordrawable 中通过size属性设置固有高度。样式Styles元素样式主题属性默认样式Widget.Material3.TabLayout?attr/tabStyle用于可抬高表面Widget.Material3.TabLayout.OnSurface无次要选项卡样式Widget.Material3.TabLayout.Secondary?attr/tabSecondaryStyle从 styles.xml 可以看到完整的样式继承链Widget.Material3.TabLayout继承自Base.Widget.Material3.TabLayout后者又继承自Widget.MaterialComponents.TabLayout最终追溯到Widget.Design.TabLayout。M3 样式相比 M2 的关键差异包括默认指示器动画模式为elasticM2 为lineartabIndicatorFullWidth默认为falseM2 为true指示器只贴合标签内容宽度背景使用drawable/m3_tabs_background容器颜色来自动态宏m3_comp_primary_navigation_tab_container_colorWidget.Material3.TabLayout.OnSurface将背景设为透明适合放在已着色的表面如可抬高卡片上Widget.Material3.TabLayout.Secondary使用独立的宏与色板指示器改为m3_tabs_line_indicator且tabIndicatorFullWidth为true。tabStyle与tabSecondaryStyle两个主题属性声明于 attrs.xml。代码实现Code Implementation添加依赖在使用 Material Tabs 之前需要在模块的build.gradle中添加 Material Components for Android 库依赖完整接入步骤如主题必须继承Theme.Material3.*等要求请参阅 Getting started。添加 TabsTabLayout可以直接添加到布局中com.google.android.material.tabs.TabLayout android:layout_widthmatch_parent android:layout_heightwrap_content ... /com.google.android.material.tabs.TabLayout随后通过TabItem作为子视图添加具体标签com.google.android.material.tabs.TabLayout ... com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/text_label_1 / com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/text_label_2 / ... /com.google.android.material.tabs.TabLayoutTabItem支持的属性声明在 attrs.xml 的TabItemstyleable 中android:text、android:icon以及可选的android:layout自定义 Tab 内容的布局资源。TabItem本身仅是 XML 声明载体实际 Tab 内容由 TabItem.java 解析后交给TabLayout构建。监听 Tab 选择变化tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { override fun onTabSelected(tab: TabLayout.Tab?) { // Handle tab select } override fun onTabReselected(tab: TabLayout.Tab?) { // Handle tab reselect } override fun onTabUnselected(tab: TabLayout.Tab?) { // Handle tab unselect } })仓库示例应用中TabsMainDemoFragment.java 展示了 TabLayout 的基础用法与各 Tab 内容区的切换TabsControllableDemoFragment.java 则演示了以编程方式增删 Tab、控制选中状态等进阶操作。让 Tabs 无障碍化Making tabs accessibleAndroid Tab 组件支持为 Tab 与徽标提供屏幕阅读器TalkBack描述。虽然可选但强烈建议使用。为整个 TabLayout 设置内容描述可在 XML 中使用android:contentDescription或以编程方式tabLayout.contentDescription contentDescription为单个 Tab 设置内容描述val tab tabLayout.getTabAt(index) tab?.contentDescription contentDescription为徽标BadgeDrawable设置内容描述BadgeDrawable提供多个针对不同徽标状态的 setterval badge tab.getOrCreateBadge() // For badges with a number badge.setContentDescriptionNumberless(contentDescription) badge.setContentDescriptionQuantityStringsResource(R.string.content_description) badge.setContentDescriptionExceedsMaxBadgeNumberStringResource(R.string.content_description) // For badges with a text badge.setContentDescriptionForText(contentDescription)BadgeDrawable的实现位于 BadgeDrawable.java它负责徽标的显示、数字/文本内容、超过最大数字时的 N 展示以及对应的无障碍描述逻辑。与 ViewPager 配合使用TabLayout可与经典ViewPagerandroidx.viewpager配合实现两个能力根据页面数量、标题等动态创建TabItem在页面滑动时同步选中 Tab 与指示器位置。首先PagerAdapter或其子类需要重写getPageTitle以提供 Tab 文本标签class Adapter : PagerAdapter() { ... override fun getPageTitle(position: Int): CharSequence? { // Return tab text label for position } }将 adapter 设置到ViewPager后同步TabLayouttabLayout.setupWithViewPager(viewPager)对动态创建的TabItem做进一步定制如设置图标需要单独处理val tab tabLayout.getTabAt(index) tab?.icon drawable示例应用中的 TabsViewPagerDemoFragment.java 配合 TabsPagerAdapter.java 演示了这一完整流程。与 ViewPager2 配合使用与ViewPager2配合的理念相同但实现方式不同——一切由TabLayoutMediator类处理TabLayoutMediator(tabLayout, viewPager2) { tab, position - when (position) { 0 - { tab.text textLabel1 tab.icon drawable1 } 1 - { tab.text textLabel2 tab.icon drawable2 } ... } }.attach()从 TabLayoutMediator.java 源码可以看到其工作机制对应源码注释见 TabLayoutMediator.java它同时监听ViewPager2.OnPageChangeCallback、TabLayout.OnTabSelectedListener和RecyclerView.AdapterDataObserver实现三向同步必须先给ViewPager2设置 adapter再调用attach()否则会抛出IllegalStateExceptionTabLayoutMediator attached before ViewPager2 has an adapter构造参数包括可选的autoRefresh数据集变化时自动重建 Tab默认true与smoothScroll切换时平滑滚动默认trueTabConfigurationStrategy回调lambda 形式用于配置每个新创建的 Tab 的文本与样式更换ViewPager2的 adapter 后需要先detach()再attach()更换 TabLayout 或 ViewPager2 则需要重新实例化 mediator。给 Tab 添加徽标BadgesTabs 支持通过BadgeDrawable类添加徽标// Get badge from tab (or create one if none exists) val badge tab.getOrCreateBadge() // Customize badge badge.number number // Remove badge from tab tab.removeBadge()getOrCreateBadge()在 Tab 上不存在徽标时会自动创建removeBadge()则将其移除。徽标的样式由ThemeOverlay.Material3.TabLayout中的badgeStyle决定见 styles.xml默认指向Widget.Material3.Badge。添加固定 TabsFixed tabs固定 Tab 在同一屏内显示全部 Tab每个 Tab 具有固定宽度宽度由屏幕宽度除以 Tab 数量得出。它们不会滚动以显示更多 Tab可见集合即全部可用 Tab。com.google.android.material.tabs.TabLayout android:layout_widthmatch_parent android:layout_heightwrap_content app:tabModefixed com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_1 android:icondrawable/ic_favorite_24dp / com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_2 android:icondrawable/ic_music_24dp / com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_3 android:icondrawable/ic_search_24dp / /com.google.android.material.tabs.TabLayout添加可滚动 TabsScrollable tabs可滚动 Tab 没有固定宽度当 Tab 数量超出屏幕宽度时部分 Tab 会保持屏幕外直到用户滚动查看。结合tabContentStart可以控制首个 Tab 距容器起点的起始位置com.google.android.material.tabs.TabLayout android:layout_widthmatch_parent android:layout_heightwrap_content app:tabModescrollable app:tabContentStart56dp com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_1 / com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_2 / com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_3 / com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_4 / com.google.android.material.tabs.TabItem android:layout_widthwrap_content android:layout_heightwrap_content android:textstring/tab_5 / ... /com.google.android.material.tabs.TabLayout示例应用中的 TabsScrollableDemoFragment.java 完整演示了可滚动 Tab 的布局与运行效果对应布局见 cat_tabs_scrollable_fragment.xml。自定义 TabsCustomizing tabs主题化 TabsTheming tabsTabs 支持颜色与字体的主题化定制。核心 API 与源码TabLayout类定义、TabLayout.java 源码TabItemTabItem.java 源码定制有三种作用范围可按需选用。方式一全局主题属性影响其他组件在res/values/styles.xml中使用主题属性与样式作用于所有 Tab 并同时影响其他组件style nameTheme.App parentTheme.Material3.* ... item namecolorPrimarycolor/shrine_pink_900/item item namecolorSurfacecolor/shrine_pink_light/item item namecolorOnSurfacecolor/shrine_pink_900/item item nametextAppearanceLabelLargestyle/TextAppearance.App.LabelLarge/item /style style nameTextAppearance.App.LabelLarge parentTextAppearance.Material3.LabelLarge item namefontFamilyfont/rubik/item item nameandroid:fontFamilyfont/rubik/item /style方式二默认样式主题属性 主题叠加仅影响 Tab使用默认样式主题属性、样式与主题叠加ThemeOverlay作用于所有 Tab 但不影响其他组件style nameTheme.App parentTheme.Material3.* ... item nametabStylestyle/Widget.App.LabelLarge/item /style style nameWidget.App.TabLayout parentWidget.Material3.TabLayout item namematerialThemeOverlaystyle/ThemeOverlay.App.TabLayout/item item nametabTextAppearancestyle/TextAppearance.App.LabelLarge/item /style style nameThemeOverlay.App.TabLayout parent item namecolorPrimarycolor/shrine_pink_900/item item namecolorSurfacecolor/shrine_pink_light/item item namecolorOnSurfacecolor/shrine_pink_900/item /style方式三布局内直接指定样式仅影响这些 Tab在布局中通过style属性应用样式只影响当前这些 Tabcom.google.android.material.tabs.TabLayout ... stylestyle/Widget.App.TabLayout /主题化的完整运行效果浅粉色背景、选中文本深粉色、未选中文本灰色参见 tabs-theming.png。仓库还提供了values-night夜间样式、values-land横屏样式与values-sw600dp平板样式等限定符变体方便适配不同屏幕与明暗主题。结语与延伸阅读Tabs 是 Material Design 中最基础的导航组件之一。通过tabMode切换固定/可滚动行为、通过tabIndicatorAnimationMode选择指示器动画linear/elastic/fade、通过TabLayoutMediator桥接 ViewPager2再配合 BadgeDrawable 与三层主题化机制你可以构建出完全符合 Material 3 规范且高度可定制的导航体验。想深入了解或动手实验可在仓库中找到组件实现源码lib/java/com/google/android/material/tabs含TabLayout.java、TabLayoutMediator.java、TabItem.java及三个指示器插值器资源与样式定义tabs 资源目录attrs.xml、styles.xml、dimens.xml及各色板、指示器 drawable可运行的示例应用catalog/java/io/material/catalog/tabs含基础、可滚动、可控、ViewPager 联动四个 Demo Fragment赞分享UI组件移动开发设计系统【免费下载链接】material-components-android[MAINTENANCE MODE] Modular and customizable Material Design UI components for Android项目地址https://gitcode.com/gh_mirrors/ma/material-components-android点击查看免费下载相关推荐Material Components for Android Dialog 完整指南从 MaterialAlertDialogBuilder 到 Material 3 主题定制Material Components for Android Dialog 完整指南从 MaterialAlertDialogBuilder 到 MaterUI组件移动开发设计系统Material Components for Android Snackbar 完整指南从基础用法到 Material 3 主题定制Material Components for Android Snackbar 完整指南从基础用法到 Material 3 主题定制 Snackbar轻量UI组件移动开发设计系统Material Components for Android BottomAppBar 开发指南属性配置、FAB 锚定、滚动隐藏与主题定制Material Components for Android BottomAppBar 开发指南属性配置、FAB 锚定、滚动隐藏与主题定制 本篇技术指南以UI组件移动开发设计系统上一篇Universal-Updater快捷键与快捷方式功能详解提升使用效率的10个技巧下一篇Cleanflight飞控系统遥测功能全面解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考