Android 深度实践

Appearance

进度条 (Progress Indicators) ​

源：Progress indicators

进度条实时展示当前流程的状态。M3 提供了线性与圆形两种。

进度条类型

状态对比 ​

  • Determinate (确定性): 从 0% 填充到 100%。用于进度已知的场景。
  • Indeterminate (不确定性): 在固定轨道上不断循环动画。用于进度未知的场景（如“加载中...”）。

核心结构 (Anatomy) ​

结构图

  1. 活动指示器 (Active indicator) | 2. 轨道 (Track) | 3. 停止点 (Stop indicator)

代码实现 ​

1. 线性进度条 (Linear) ​

xml
<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true" />
xml
<com.google.android.material.progressindicator.LinearProgressIndicator
    android:id="@+id/linearProgress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="70" />

2. 圆形进度条 (Circular) ​

xml
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:indicatorSize="40dp"
    app:trackThickness="4dp" />

M3 新特性：波浪效果 (Wavy) ​

M3 1.3+ 引入了极具表现力的波浪进度条。

xml
<com.google.android.material.progressindicator.LinearProgressIndicator
    style="@style/Widget.Material3Expressive.LinearProgressIndicator.Wavy"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

交互监听与控制 ​

kotlin
// 切换不确定状态
indicator.isIndeterminate = false

// 平滑更新进度
indicator.setProgressCompat(80, true)

// 隐藏/显示动画
indicator.show()
indicator.hide()

主题化 ​

你可以通过 app:indicatorColor 和 app:trackCornerRadius 自定义颜色和圆角。

xml
<com.google.android.material.progressindicator.LinearProgressIndicator
    ...
    app:indicatorColor="@color/my_brand_color"
    app:trackCornerRadius="4dp" />