导语
6月初自己的项目有一个需要进度条的地方，先看需求，要求挺低的，就展示一个项目进度，不需要转，不需要跑，就是一个横着的一根把棍子，没毛病，系统自带的progressbar，drawable里面画几个样式OK了。当拿到UI图的那一刻，原来事情并没有辣么简单。
如图
进度条
我了个去，道理我都懂，中间那个小圆球是啥东西。有些麻烦，去找UI沟通，看看能不能改一下图，把中间的小圆点去掉,嘿嘿嘿。
啪啪啪
恩.....我回来了，此路不通，看上去也没啥难的，自己画一个好了。
开始分析
既然就只是简单的展示，画几个圆几个四方框放一张图片好了。想想，先起个草稿好了。
我是草稿
恩，可以看出作者深厚的画工。分析下，外面的一套进度条小圆点的位置和大小，里面是进度条的大小。所以看上去，我们只需先要确定好小圆点的位置就可以了，然后进度条两边是两个半圆，里面是两个长方形，左边橙色进度和右边的灰色进度。OK，开整。等等，哎呦，我可以偷个懒，因为两边的半圆会被小圆点盖住，那岂不是在计算的时候可以省去这一段，反正0%的时候和100%的时候基本可以盖住，嘿嘿嘿。
代码
public class LZProgressbar extends View {
private Paint mPaintO = new Paint();
private Paint mPaintB = new Paint();
private double progress = 0;
private int pbColor;
private int bgColor;
private int circularPic;
private Bitmap circularBm;
private int heightPx;
public LZProgressbar(Context context) {
super(context);
}
public LZProgressbar(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint(attrs);
}
public LZProgressbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint(attrs);
}
// 2.初始化画笔
private void initPaint(AttributeSet attrs) {
final TypedArray a = getContext().obtainStyledAttributes(attrs,
R.styleable.cProgressbarStyle);
pbColor = a.getColor(R.styleable.cProgressbarStyle_cPbNowColor, 0xffff0000);
bgColor = a.getColor(R.styleable.cProgressbarStyle_cPbBackgroundColor, 0xffff0000);
circularPic = a.getResourceId(R.styleable.cProgressbarStyle_picSrc, R.drawable.yuandian);
heightPx = a.getDimensionPixelOffset(R.styleable.cProgressbarStyle_heightPx,60);
setBitmap();
mPaintB.setColor(bgColor); //设置画笔颜色
mPaintB.setStyle(Paint.Style.FILL); //设置画笔模式为填充
mPaintB.setAntiAlias(true);
mPaintO.setColor(pbColor); //设置画笔颜色
mPaintO.setStyle(Paint.Style.FILL); //设置画笔模式为填充
mPaintO.setAntiAlias(true);
}
private void setBitmap() {
Bitmap bm = BitmapFactory.decodeResource(getResources(), circularPic);
int width = bm.getWidth();
int height = bm.getHeight();
// 设置想要的大小
int newWidth = heightPx;
int newHeight = heightPx;
// 计算缩放比例
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// 取得想要缩放的matrix参数
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
// 得到新的图片
circularBm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
}
@Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
int w = getWidth();
int h = getHeight();
//第一个圆
canvas.drawCircle(h / 2, h / 2, (h - 14) / 2, mPaintO);
//第一个矩形
canvas.drawRect(h / 2, 7, (float) ((w - h) * progress + 7 + (h - 14) / 2), h - 7, mPaintO);
//第二个圆
canvas.drawCircle(w - (h / 2), h / 2, (h - 14) / 2, mPaintB);
//第二个矩形
canvas.drawRect((float) ((w - h) * progress + 7 + (h - 14) / 2), 7, w - (h / 2), h - 7, mPaintB);
//图形圆点
canvas.drawBitmap(circularBm, (float) (((getWidth() - getHeight()) * progress)), 0, new Paint());
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
public void setProgress(double progress) {
this.progress = progress;
}
}
一万年以后......
搞定，运行下，可以的，基本满足了UI的要求。中间踩了个坑就是两边绘制图片和各种测量，墨迹的不行。也不知道性能如何，会不会卡什么的......要不拓展一下？加上XML属性？好的，说干......等等UI走过来了，看上去她有什么要对我说。
“那个进度条不好看，我们换一个吧，一会我给你图”
“......”
等我去找一把刀。
给我刀
补张图最后的样子
最终进度条
其他
UI出图这个事肯定每个开发都会遇到，有弊有利吧。如果项目催得不紧，基本无所谓，反正都是整。但是要是催得紧，那酸爽，high的不行。不过总结下来就是自己技术差的不行，不然不会因为这种小玩意琢磨半天 = =
OVER 老白想嗑瓜子磕到上火。
咔嚓咔嚓咔嚓
网友评论