Android如何按Material规范实现带外围环形进度条的按钮
实现方案
完全不需要引入第三方库,直接通过Material官方组件组合就能实现符合规范的带外侧环形进度条的浮动操作按钮,比用CardView模拟FAB的方案更简单,尺寸自动匹配Material设计规范。
- 先确保项目依赖的Material组件库版本不低于1.4.0,推荐使用稳定版:
implementation 'com.google.android.material:material:1.9.0'
- 布局层直接用FrameLayout叠放原生FAB和环形进度条即可,不需要修改你原有FAB的业务逻辑:
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <!-- 外侧环绕进度条 --> <com.google.android.material.progressindicator.CircularProgressIndicator android:id="@+id/fab_progress" android:layout_width="58dp" android:layout_height="58dp" android:layout_gravity="center" <!-- 开启不确定进度模式后就是官方规范的循环加载动画 --> android:indeterminate="true" app:indicatorColor="?attr/colorPrimary" app:trackColor="@android:color/transparent" app:trackThickness="2dp" app:indicatorDirectionCircular="counterclockwise" app:indeterminateAnimationType="contiguous"/> <!-- 原有浮动操作按钮,不需要调整原有属性 --> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/floatingActionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:clickable="true" android:src="?android:attr/actionModeWebSearchDrawable" app:fabSize="normal"/> </FrameLayout>
参数适配说明
- 常规尺寸(normal)FAB的官方规范大小为56dp,对应进度条宽高设为58dp、轨道厚度2dp,刚好贴合FAB外侧,不会留空隙也不会遮挡按钮边缘
- 如果使用迷你尺寸(mini)FAB(官方大小40dp),只需把进度条宽高改为42dp即可适配
- 不需要显示进度条底色时将
trackColor设为透明即可,需要底色时替换为目标颜色 - 如果需要实现确定进度效果,删除
android:indeterminate="true"属性,在代码中调用setProgress()方法传入进度值即可 - 进度条的显示隐藏直接通过
setVisibility()控制即可,FAB位于布局上层,不会影响原有点击事件
你之前用CardView模拟FAB出现尺寸不匹配的问题,是因为CardView默认自带内边距,且手动设置的ImageView尺寸不符合FAB图标规范(常规FAB图标标准尺寸为24dp),直接使用原生FAB不需要手动调整这些参数,自动符合设计要求。
内容的提问来源于stack exchange,提问作者RenegadeAndy
相关产品推荐
相关产品推荐

