在 Material Design 中,ProgressBar 是一个非常常见的组件,它可以用来展示任务的进度,让用户了解任务的完成情况。虽然 Material Design 已经预设了一些 ProgressBar 样式,但是在实际开发中,我们经常需要自定义一些 ProgressBar 样式,以更好地适配项目需求。
本文将介绍 Material Design 中 ProgressBar 的自定义实现方法,包括进度颜色、宽度、高度、形状等,帮助读者更加灵活地使用 ProgressBar 组件。
进度颜色
ProgressBar 的进度颜色是根据 Material Design 中的颜色规范来设计的。一般来说,ProgressBar 的颜色分为两类:Indeterminate(不确定)和Determinate(确定)。前者表示进度无法预估,后者表示进度可以预估。
Indeterminate
Indeterminate ProgressBar 的进度颜色一般为 Accent Color 的 100%,透明度为 87%。可以使用以下代码实现:
<ProgressBar style="@style/Widget.AppCompat.ProgressBar" android:indeterminate="true" android:indeterminateTint="#FF4081" android:indeterminateTintMode="src_atop" />
Determinate
Determinate ProgressBar 的进度颜色一般由 Background Color(底层颜色)和 Secondary Color(进度颜色)组成。具体的颜色值可以根据项目设计来确定。可以使用以下代码实现:
<ProgressBar style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:progressDrawable="@drawable/custom_progress_bar" android:progress="50" android:max="100" />
其中,custom_progress_bar.xml 的代码如下:
-- -------------------- ---- ------- ----- ------------- ------------------ ----------- ---------------------------------------------------------- ------------------------ ---------------------------- ----- ------------------------------------ ------- -------- --------------------- -- ------ ----------------------- -- -------- ------- ----- ---------------------------------- ------ ------- -------- --------------------- -- ------ ----------------------- -- -------- ------- ------- -------------
宽度和高度
ProgressBar 的宽度和高度可以通过修改 Layout Params 来实现。一般来说,可以利用 layout_weight 属性控制宽度占比,利用 layout_height 属性控制高度。
-- -------------------- ---- ------- ------------- -------------------------------- ----------------------------------- ------------------------------------ ----------------------- ------------ ------------------------------ ------------------------------------------------ -------------------------- --------------------------- ------------------------- -- ---------------
形状
ProgressBar 的形状可以通过修改样式来实现。在 Material Design 中,ProgressBar 有两种形状:Linear 和 Circular。
Linear
Linear ProgressBar 的形状是线性的,可以通过修改 ProgressBar 的 Style 属性来实现。
<ProgressBar style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" />
Circular
Circular ProgressBar 的形状是圆形的,可以通过使用第三方库来实现。在这里,我们使用 Google 官方推荐的 Material Design 风格的 ProgressBar 库。具体的实现方法如下:
- 在 build.gradle 文件中添加以下代码:
dependencies { implementation 'com.github.rahatarmanahmed:circularprogressview:2.5.0' }
- 在布局文件中添加 Circular Progress View:
-- -------------------- ---- ------- ---------------------------------------------------- ----------------------------------- --------------------------- ---------------------------- ------------------------------- --------------------- ---------------------------- -------------------------- ----------------------- --------------------------- ----------------------- --
其中,cpv_color 表示 ProgressBar 的颜色,cpv_thickness 表示线条的粗细,cpv_animDuration 表示 ProgressBar 动画时间。
总结
本文介绍了 Material Design 中 ProgressBar 的自定义实现方法,包括进度颜色、宽度和高度、形状等。读者可以根据需要来灵活运用这些技巧,以更好地适配项目需求。代码示例可参考 Github。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64829db748841e989420091d