1.Progress indicators

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

类型

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

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

为什么android distributionUrl 一直变化_android


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

<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" />

为什么android distributionUrl 一直变化_ci_02

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 distributionUrl 一直变化_android_03

修改轨道主题

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

为什么android distributionUrl 一直变化_ide_04

添加步长

<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" />

为什么android distributionUrl 一直变化_ci_05

添加步长并去掉步长间隔

<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"/>

为什么android distributionUrl 一直变化_ci_06


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等,用来配置一些外观