android仿照IOS AppStore下载进度条
2015-10-24 15:59
302 查看
下面有效果图,本人也是在网上搜集进度条之后修改而成,不喜勿喷!
先上效果图
public class TasksCompletedView2 extends View {
// 画最外边圆环的画笔
private Paint mCirclePaint;
// 画圆环的画笔
private Paint mRingPaint;
//矩形画笔
private Paint mRectPaint;
// 圆环颜色
private int mRingColor;
// 半径
private float mRadius;
// 圆环半径
private float mRingRadius;
// 圆环宽度
private float mStrokeWidth;
// 矩形宽度
private float rectWidth;
// 圆心x坐标
private int mXCenter;
// 圆心y坐标
private int mYCenter;
// 总进度
private int mTotalProgress = 100;
// 当前进度
private int mProgress;
// 最外层圆的宽度
private int mcircleWidth = 6;
public TasksCompletedView2(Context context, AttributeSet attrs) {
super(context, attrs);
// 获取自定义的属性
initAttrs(context, attrs);
initVariable();
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView, 0, 0);
mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
rectWidth = typeArray.getDimension(R.styleable.TasksCompletedView_myrectWidth, 15);
mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
mRingRadius = mRadius + mStrokeWidth / 2 - mcircleWidth/2;
}
private void initVariable() {
//最外层圆形画笔
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mRingColor);
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setStrokeWidth(mcircleWidth);
//动态圆弧画笔
mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
//动态弧形的宽度
mRingPaint.setStrokeWidth(mStrokeWidth);
mRectPaint = new Paint();
mRectPaint.setAntiAlias(true);
mRectPaint.setColor(mRingColor);
mRectPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onDraw(Canvas canvas) {
mXCenter = getWidth() / 2;
mYCenter = getHeight() / 2;
//画出最外层的圆
canvas.drawCircle(mXCenter, mYCenter, mRadius+mcircleWidth, mCirclePaint);
//画出里面的矩形
canvas.drawRect(mXCenter-rectWidth, mYCenter-rectWidth, mXCenter+rectWidth, mYCenter+rectWidth, mRectPaint);
//动态画圆环
if (mProgress > 0 ) {
RectF oval = new RectF();
oval.left = (mXCenter - mRingRadius);
oval.top = (mYCenter - mRingRadius);
oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); //
}
}
public void setProgress(int progress) {
mProgress = progress;
postInvalidate();
}
}
在values下新建一个attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TasksCompletedView">
<attr name="radius" format="dimension"/>
<attr name="strokeWidth" format="dimension"/>
<attr name="myrectWidth" format="dimension"/>
<attr name="circleColor" format="color"/>
<attr name="ringColor" format="color"/>
</declare-styleable>
</resources>
这样就完成了,如果要使用在layout中这样就可
<com.snailws.taskscompleted.activity.TasksCompletedView2
android:id="@+id/tasks_view"
android:layout_width="55dp"
android:layout_height="55dp"
tc:radius="20dip"
tc:strokeWidth="5dip"
tc:myrectWidth="8dip"
tc:ringColor="@color/ring_color" />
最后主要有一些自定义属性没有用,可以自行修改,本人技术太菜,项目赶进度所以匆匆记录一下
先上效果图
public class TasksCompletedView2 extends View {
// 画最外边圆环的画笔
private Paint mCirclePaint;
// 画圆环的画笔
private Paint mRingPaint;
//矩形画笔
private Paint mRectPaint;
// 圆环颜色
private int mRingColor;
// 半径
private float mRadius;
// 圆环半径
private float mRingRadius;
// 圆环宽度
private float mStrokeWidth;
// 矩形宽度
private float rectWidth;
// 圆心x坐标
private int mXCenter;
// 圆心y坐标
private int mYCenter;
// 总进度
private int mTotalProgress = 100;
// 当前进度
private int mProgress;
// 最外层圆的宽度
private int mcircleWidth = 6;
public TasksCompletedView2(Context context, AttributeSet attrs) {
super(context, attrs);
// 获取自定义的属性
initAttrs(context, attrs);
initVariable();
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView, 0, 0);
mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
rectWidth = typeArray.getDimension(R.styleable.TasksCompletedView_myrectWidth, 15);
mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
mRingRadius = mRadius + mStrokeWidth / 2 - mcircleWidth/2;
}
private void initVariable() {
//最外层圆形画笔
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mRingColor);
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setStrokeWidth(mcircleWidth);
//动态圆弧画笔
mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
//动态弧形的宽度
mRingPaint.setStrokeWidth(mStrokeWidth);
mRectPaint = new Paint();
mRectPaint.setAntiAlias(true);
mRectPaint.setColor(mRingColor);
mRectPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onDraw(Canvas canvas) {
mXCenter = getWidth() / 2;
mYCenter = getHeight() / 2;
//画出最外层的圆
canvas.drawCircle(mXCenter, mYCenter, mRadius+mcircleWidth, mCirclePaint);
//画出里面的矩形
canvas.drawRect(mXCenter-rectWidth, mYCenter-rectWidth, mXCenter+rectWidth, mYCenter+rectWidth, mRectPaint);
//动态画圆环
if (mProgress > 0 ) {
RectF oval = new RectF();
oval.left = (mXCenter - mRingRadius);
oval.top = (mYCenter - mRingRadius);
oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); //
}
}
public void setProgress(int progress) {
mProgress = progress;
postInvalidate();
}
}
在values下新建一个attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TasksCompletedView">
<attr name="radius" format="dimension"/>
<attr name="strokeWidth" format="dimension"/>
<attr name="myrectWidth" format="dimension"/>
<attr name="circleColor" format="color"/>
<attr name="ringColor" format="color"/>
</declare-styleable>
</resources>
这样就完成了,如果要使用在layout中这样就可
<com.snailws.taskscompleted.activity.TasksCompletedView2
android:id="@+id/tasks_view"
android:layout_width="55dp"
android:layout_height="55dp"
tc:radius="20dip"
tc:strokeWidth="5dip"
tc:myrectWidth="8dip"
tc:ringColor="@color/ring_color" />
最后主要有一些自定义属性没有用,可以自行修改,本人技术太菜,项目赶进度所以匆匆记录一下
相关文章推荐
- 一看就会Android之按钮Button和图片按钮ImageButton的用法
- iOS Good Practices
- 一看就会Android之TextView,EditText以及CheckedTextView
- Android:Android中的Surface和SurfaceView
- 一看就会Android之开发自定义的View
- 微信浏览器内建的WeixinJSBridge 实现“返回”操作 WeixinJSBridge.call('closeWindow');
- 一看就会Android之布局高度和布局宽度与组件高度和宽度的区别
- swift闭包的理解
- WebView后台耗电问题
- 怎样做一个iOS App的启动分层引导动画
- Android support.v7库中的几种控件,布局控件
- 一看就会Android之View类和ViewGroup的关系
- android中影藏状态栏和标题栏的几种方法
- android 修改RadioButton的drawTop图片大小
- Android中使用Parcelable接口
- swift:创建九宫格
- 微信运动刷步数教程详解
- IOS隐藏navigationItem左右按钮的方法
- CharlesProxy学习笔记
- cocos2d-x项目目录梳理