一、要实现的效果:
1、底色;2、进度色(有斜条纹);3、有文字显示状态;4、平滑地展示进度(有前进的过程)。
二、实现如下:
1、布局
使用FrameLayout + textView实现文字状态显示。
ProgressBar的 属性android:progressDrawable中设置 底色、进度色(实际就是让设计切的一张图片,clip标签可以实现进度显示效果)。
<!-- 进度条 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_4"
android:layout_marginBottom="@dimen/dp_4">
<ProgressBar
android:id="@+id/flash_sale_progress_bar"
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_gravity="center"
style="@android:style/Widget.ProgressBar.Horizontal"
android:progressDrawable="@drawable/flash_sale_homepage_progress_drawable"
android:progress="60"/>
<TextView
android:id="@+id/flash_sale_progress_bar_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginLeft="4dp"
android:layout_gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/common_color_fffeff"
android:textSize="8dp"
tools:text="Terjual(100%)" />
</FrameLayout>
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置背景色 -->
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<solid android:color="#fffccaca" />
<corners android:radius="100dp" />
</shape>
</item>
<!-- 设置进度条颜色 -->
<item android:id="@android:id/progress">
<!--clip标签控制这个drawable的剪切区域,以及相相对于容器的对齐方式,android中的进度条就是使用一个ClipDrawable实现效果的,它根据level的属性值,决定剪切区域的大小-->
<clip>
<bitmap android:src="@drawable/flash_sale_home_page_progress_foreground"/>
</clip>
</item>
</layer-list>
2、代码中设置进度
- 使用属性动画,可实现平滑进度显示。时间、速度模式 均可设置。
/**
* 设置ProgressBar的进度(平滑的增长)
* @param progressBar progressBar
* @param progress 取值0-100
*/
public static void setProgressSmooth(ProgressBar progressBar, int progress) {
ObjectAnimator animation = ObjectAnimator.ofInt(progressBar, "progress", progress);
// 1 second
animation.setDuration(1000);
//先加速在减速
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.start();
}