条纹进度条¶
相关代码请参阅： https://github.com/RustFisher/aboutView/blob/master/app/src/main/java/com/rust/aboutview/activity/RoundCornerActivity.java
素材图
如果用shape或者.9图片不太好处理这个条纹。转变思路，放置2张图片。一张作为背景（底，bottom），一张作为进度条图片（cover）。 进度改变时，改变上面图片的宽度。
这就要求上面的图片是圆角的。自定义ImageView，调用canvas.clipPath来切割画布。
public class RoundCornerImageView extends android.support.v7.widget.AppCompatImageView {
private float mRadius = 18;
private Path mClipPath = new Path();
private RectF mRect = new RectF();
public RoundCornerImageView(Context context) {
super(context);
}
public RoundCornerImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RoundCornerImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setRadiusDp(float dp) {
mRadius = dp2px(dp, getResources());
postInvalidate();
}
public void setRadiusPx(int px) {
mRadius = px;
postInvalidate();
}
@Override
protected void onDraw(Canvas canvas) {
mRect.set(0, 0, this.getWidth(), this.getHeight());
mClipPath.reset(); // remember to reset path
mClipPath.addRoundRect(mRect, mRadius, mRadius, Path.Direction.CW);
canvas.clipPath(mClipPath);
super.onDraw(canvas);
}
private float dp2px(float value, Resources resources) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, resources.getDisplayMetrics());
}
}
Path.reset()方法。
回到我们要的进度条。布局文件中放置好层叠的图片。
<RelativeLayout
android:id="@+id/progress_layout"
android:layout_width="190dp"
android:layout_height="10dp"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/p_bot_iv"
android:layout_width="190dp"
android:layout_height="10dp"
android:src="@drawable/shape_round_corner_bottom" />
<com.rustfisher.view.RoundCornerImageView
android:id="@+id/p_cover_iv"
android:layout_width="100dp"
android:layout_height="10dp"
android:scaleType="centerCrop"
android:src="@drawable/pic_cover_blue_white" />
</RelativeLayout>
需要在代码中动态地改变cover的宽度；dialog中提供如下方法改变LayoutParams
public void updatePercent(int percent) {
mPercent = percent;
mPercentTv.setText(String.format(Locale.CHINA, "%2d%%", mPercent));
float percentFloat = mPercent / 100.0f;
final int ivWidth = mBotIv.getWidth();
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) mProgressIv.getLayoutParams();
int marginEnd = (int) ((1 - percentFloat) * ivWidth);
lp.width = ivWidth - marginEnd;
mProgressIv.setLayoutParams(lp);
mProgressIv.postInvalidate();
}
显示出dialog并传入进度，就可以看到效果了。
本站说明
一起在知识的海洋里呛水吧。广告内容与本站无关。如果喜欢本站内容，欢迎投喂作者，谢谢支持服务器。如有疑问和建议，欢迎在下方评论~