Android

自定义UI

custom view

美工同学指定了一个进度条样式

这斑斓的进度条，如果要自己画实在是劳民伤财。于是请美工切了一张素材(样例)。

如果用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() 方法。

回到我们要的进度条。布局文件中放置好层叠的图片。

android:id="@+id/progress_layout"

android:layout_width="190dp"

android:layout_height="10dp"

android:layout_centerInParent="true">

android:id="@+id/p_bot_iv"

android:layout_width="190dp"

android:layout_height="10dp"

android:src="@drawable/shape_round_corner_bottom" />

android:id="@+id/p_cover_iv"

android:layout_width="100dp"

android:layout_height="10dp"

android:scaleType="centerCrop"

android:src="@drawable/pic_cover_blue_white" />

复制代码

需要在代码中动态地改变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并传入进度，就可以看到效果了。

这只是实现效果的一种方法，如果有更多的想法，欢迎和我交流~