Material Design 中如何设置水平进度条的颜色？

Material Design 是由 Google 推出的一套设计语言，旨在为应用程序提供一致的外观和行为。在 Material Design 中，进度条是一个常见的 UI 元素，用于显示某个任务的进度。

水平进度条的颜色在 Material Design 中非常重要，因为它可以传达任务进度的信息。在本文中，我们将探讨如何设置水平进度条的颜色。

1. 确定进度条的类型

在 Material Design 中，有两种类型的水平进度条：确定性进度条和不确定性进度条。

确定性进度条用于显示任务的确切进度，例如上传文件或下载文件。不确定性进度条用于显示尚未确定的任务进度，例如应用程序启动时的进度条。

在设置水平进度条的颜色之前，您需要确定进度条的类型，因为不同的类型需要不同的颜色方案。

2. 确定颜色方案

在 Material Design 中，颜色方案是一个重要的概念，用于确定元素的颜色。颜色方案由一个基本颜色和它的变体组成，例如深色和浅色。

Material Design 中有两种类型的颜色方案：主要颜色和辅助颜色。主要颜色用于应用程序的品牌颜色和主要元素，例如导航栏和按钮。辅助颜色用于次要元素，例如进度条和标签。

在确定进度条的颜色方案之前，您需要确定应用程序的主要颜色和辅助颜色。

3. 设置进度条的颜色

在 Material Design 中，进度条的颜色由以下属性控制：

• colorPrimary：主要颜色
• colorPrimaryDark：主要颜色的深色变体
• colorAccent：辅助颜色

确定性进度条的颜色由 colorPrimary 控制，不确定性进度条的颜色由 colorAccent 控制。

以下是一个确定性进度条的示例代码：

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="50"
    android:progressTint="@color/colorPrimary"
    android:indeterminate="false" />

以下是一个不确定性进度条的示例代码：

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:indeterminateTint="@color/colorAccent" />

在这些示例中，android:progressTint 和 android:indeterminateTint 属性控制进度条的颜色。

4. 结论

在 Material Design 中，设置水平进度条的颜色需要确定进度条的类型和应用程序的颜色方案。确定性进度条的颜色由主要颜色控制，不确定性进度条的颜色由辅助颜色控制。

通过掌握这些概念，您可以更好地设计和实现 Material Design 中的水平进度条。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6766243776af2b9a20f318ff