Android Material 常用组件详解（六）—— Progress indicators、Slider 使用详解

1.Progress indicators

Progress indicators是自带动画效果的Progress。进度指示器向用户通知正在进行的进程的状态，例如加载应用程序，提交表单或保存更新。

类型

△ 线性和圆形
Material Design提供两种视觉上不同类型的进度指示器：线性和循环进度指示器。
分别对应LinearProgressIndicator和CircularProgressIndicator

△ 确定和不确定
进度指标可能是确定的或不确定的。确定指标显示流程需要多长时间。 不确定的指标表示不确定的等待时间。 如果无法检测到进度，或者没有必要指出活动需要多长时间。
只需要添加android:indeterminate="true"属性就可以循环滚动，实现不确定的进度指示器。

上图分别对应这线性不确定进度指示器、圆形不确定进度指示器、线性确定进度指示器、圆形确定进度指示器

  <com.google.android.material.progressindicator.LinearProgressIndicator
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:indeterminate="true"/>

  <com.google.android.material.progressindicator.CircularProgressIndicator
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:indeterminate="true"/>

  <com.google.android.material.progressindicator.LinearProgressIndicator
      android:id="@+id/linear_determinate"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

  <com.google.android.material.progressindicator.CircularProgressIndicator
      android:id="@+id/circular_determinate"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"/>

常用属性如下：

属性	描述
app:indicatorDirectionLinear	线性指示器前进的方向模式
app:indicatorDirectionCircular	圆形指示器前进的方向模式
app:indicatorCornerRadius	指示器和轨道的每个角的圆角半径
app:indicatorSize	进度跟踪和指标的宽度
app:circularRadius	定义圆形进度指示器的半径
app:circularInset	从指示器的外部边缘到指示器边缘的额外空间，相当于margin
app:trackColor	进度轨道使用的颜色，进度未完成的颜色
app:indicatorColor	指示器颜色，可设置单一颜色或者颜色数组。

设置指示器颜色数组

app:indicatorColor="@array/cat_custom_progress_colors"

colors.xml

  <integer-array name="cat_custom_progress_colors">
    <item>@color/yellow_500</item>
    <item>@color/blue_700</item>
    <item>@color/red_500</item>
  </integer-array>

2.Slider

加强版的SeekBar

Slider

  <com.google.android.material.slider.Slider
      android:id="@+id/slider"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:value="8.09"
      android:valueFrom="0.0"
      android:valueTo="11.0" />

RangeSlider

  <com.google.android.material.slider.RangeSlider
    android:id="@+id/range_slider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:values="@array/initial_slider_values"
    android:valueFrom="0.0"
    android:valueTo="11.0" />

arrays.xml

<resources>
  <array name="initial_slider_values">
    <item>2.0</item>
    <item>7.0</item>
  </array>
</resources>

修改轨道主题

android:theme="@style/ThemeOverlay.PrimaryPalette.Green"

  <style name="ThemeOverlay.PrimaryPalette.Green" parent="">
    <item name="colorPrimary">#43a047</item>
    <item name="colorPrimaryDark">#00701a</item>
  </style>

添加步长

      <com.google.android.material.slider.Slider
          android:id="@+id/slider_5"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:theme="@style/ThemeOverlay.PrimaryPalette.Blue"
          android:valueFrom="0"
          android:valueTo="5.75"
          android:stepSize="0.25" />

添加步长并去掉步长间隔

      <com.google.android.material.slider.Slider
        android:id="@+id/slider_6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.PrimaryPalette.Green"
        android:valueFrom="0"
        android:valueTo="10"
        android:stepSize="1"
        app:tickVisible="false"/>

Slider可以实现滑块头部数字变化效果，还可以实现类似刻度尺效果，比原生的SeekBar加强了不少。
常用属性如下：

属性	描述
android:valueFrom	进度起点
android:valueTo	进度终点
android:value	当前进度点
android:stepSize	步长（必须大于0）
app:values	配置多个slider节点
app:labelBehavior	slider 滑动时顶部是否显示变化效果
app:labelStyle	配置slider节点顶部view style

其他属性还有haloColor、haloRadius、thumbColor等，用来配置一些外观