=====Material Design 的时代要来了 所有app都扛不住======

本文详细介绍了 Material Design 相关的库资源,这些库可以帮助开发者更轻松地实现 Google 的 Material Design 设计理念,涵盖各种 UI 组件及样式规范。
http://www.youkuaiyun.com/article/2014-11-21/2822753-material-design-libs
<think> 我们需要解释TabLayout中tabIndicatorGravity属性的"stretch"和"center"值的区别。 根据Material Design的TabLayout文档: - "stretch": 指示器会拉伸以填满整个Tab的宽度(即与Tab等宽)。 - "center": 指示器会在Tab的中间位置,宽度为文本内容的宽度(或通过app:tabIndicatorFullWidth调整)。 具体说明: 1. tabIndicatorGravity="stretch": 指示器会占据整个Tab的宽度,通常用于固定模式(tabMode="fixed")且每个Tab宽度相等的情况。 此时,即使设置tabIndicatorFullWidth="true"也不会改变,因为已经拉伸到最大。 2. tabIndicatorGravity="center": 指示器默认宽度与文本内容宽度相同(如果tabIndicatorFullWidth="false"),或者与整个Tab宽度相同(如果tabIndicatorFullWidth="true")。 当tabIndicatorFullWidth="false"(默认值)时,指示器宽度等于文本宽度,并居中显示。 当tabIndicatorFullWidth="true"时,指示器会填满整个Tab,但此时与stretch的区别在于:center模式下,指示器的位置仍然是居中的,但宽度已经被设为全宽,所以视觉上可能和stretch相同。但实际上,stretch是强制拉伸,而center在tabIndicatorFullWidth="true"时也会全宽,但居中的设置可能对位置有影响(比如多个Tab时,每个Tab内指示器居中,但全宽后每个Tab内都居中,所以看起来也是全宽)。 然而,实际测试发现: - 当tabIndicatorFullWidth="true"时,无论gravity是center还是stretch,指示器都会占据整个Tab的宽度。 - 当tabIndicatorFullWidth="false"时(默认): gravity="center": 指示器宽度等于文本宽度,在Tab内居中。 gravity="stretch": 指示器会拉伸至整个Tab的宽度(即使tabIndicatorFullWidth为false)。 因此,区别主要在于tabIndicatorFullWidth属性为false时: center: 指示器宽度自适应文本,居中。 stretch: 指示器宽度为整个Tab的宽度(忽略tabIndicatorFullWidth的设置)。 注意:官方文档中,tabIndicatorGravity的stretch值要求使用Material Components库1.1.0及以上版本。 总结: - 想要指示器与Tab文本等宽并居中:使用 center 且 tabIndicatorFullWidth="false"。 - 想要指示器填满整个Tab(无论文本长短):使用 stretch 或者使用 center 且 tabIndicatorFullWidth="true"(但两者在视觉效果上可能相同,实际上stretch在低版本中可能不支持,而center+fullWidth是另一种实现方式)。 但根据实测(使用Material Components 1.3.0): tabIndicatorFullWidth="true" 时,center和stretch效果相同(都是全宽)。 tabIndicatorFullWidth="false" 时,center为文本宽度,stretch为全宽。 因此,核心区别在于tabIndicatorFullWidth为false时,stretch会强制指示器全宽,而center不会。 §§相关问题§§ 1. 如何在TabLayout中自定义指示器的宽度而不使用全宽? 2. TabLayout的tabMode属性设置为scrollable和fixed有什么区别? 3. 如何动态改变TabLayout的指示器颜色? 4. 在TabLayout中,如何为每个Tab设置不同的指示器样式? 5. 为什么设置tabIndicatorGravity="stretch"后指示器没有效果? </think> 在 Android Material Design 的 `TabLayout` 中,`app:tabIndicatorGravity` 属性控制指示器的对齐方式,`"stretch"` 和 `"center"` 的主要区别如下: ### 核心区别 | **属性值** | **视觉表现** | **适用场景** | **与 `app:tabIndicatorFullWidth` 的关联** | |------------|--------------|--------------|------------------------------------------| | **`center`** | 指示器居中显示,宽度默认等于 **文本宽度**<br>(若启用 `tabIndicatorFullWidth="true"` 则等于 Tab 宽度) | 标准设计,常见于非满宽 Tab | 需配合 `tabIndicatorFullWidth` 控制宽度 | | **`stretch`** | 指示器强制 **拉伸填满整个 Tab 区域**<br>(忽略文本宽度,始终满宽) | 需要视觉上强调选中态的场景 | 自动强制满宽,无视 `tabIndicatorFullWidth` 设置 | ### 示意图 ``` [ Tab1 | Tab2 | Tab3 ] ← TabLayout ● center 模式: [ "文本" ] ← 指示器宽度 = 文本宽度 ↑ 居中显示 ● stretch 模式: [─────────] ← 指示器强制拉伸填满整个 Tab ↑ 宽度始终 = Tab 宽度 ``` ### 使用建议 1. **`center` 更灵活** 适合需要精细控制指示器宽度的场景(如配合 `tabIndicatorFullWidth="false"` 实现文本宽度指示器) 2. **`stretch` 更强调** 适合需要突出选中状态的场景(如电商类 APP 的筛选 Tab) 3. **版本要求** `stretch` 需 Material Components **1.1.0+**,低版本需升级依赖: ```gradle implementation 'com.google.android.material:material:1.5.0' ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值