今天,我在腾讯课堂学习了自定义一个进度条,视频链接:https://ke.qq.com/course/144239#term_id=100163342,我根据此视频教程,写了关于此代码的详细注释,非常简单,非常适合小白学习。
主要步骤是:
1. 创建一个类,继承View
2. 初始化画笔
3. 调用Canvas.draw开始做画。
4. 在主方法布局
实现的效果是:
附上代码:
package com.demo.customview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by 乔明 on 2016/7/25.
*/
public class Custom extends View {
private Paint mPaint1; //定义第一个画笔
private Paint mPaint2; //定义第二个画笔
private Paint mPaintText; //定义一个字符画笔
private float mWidth=50; //定义圆环的宽度
//设置画笔一个中心点,这个中心点
private float mX=200+mWidth/2;
private float mY=200+mWidth/2;
//设置半径
private float mRaius=200;
//定义一个矩形
private RectF mRectf;
private int min=0;
private int max=100;
public Custom(Context context) {
this(context,null);
}
public Custom(Context context, AttributeSet attrs) {
this(context, null,0);
}
public Custom(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float currAngle=(float) min/max*360;
//画一个圆,指定圆心,半径,还有画笔
canvas.drawCircle(mX,mY,mRaius,mPaint1);
/**
* 画一个扇形
* param1指定矩形
* param2开始角度
* param3结束角度
* param4扇形的口是否封闭
* param5指定画笔
*/
canvas.drawArc(mRectf,-90,currAngle,false,mPaint2);
//画文字
canvas.drawText(min+"%",mX,mY,mPaintText);
//设置进度
if(min<max){
min++;
invalidate(); //强制调用onDraw()
}
}
public void init(){
//创建画笔1的实例
mPaint1=new Paint();
mPaint1.setColor(Color.RED); //设置画笔的颜色
mPaint1.setAntiAlias(true); //去掉锯齿
mPaint1.setStyle(Paint.Style.STROKE); //画笔的样式为圆
mPaint1.setStrokeWidth(mWidth); //设置圆环的宽度
//创建画笔2的实例
mPaint2=new Paint();
mPaint2.setColor(Color.BLUE);
mPaint2.setAntiAlias(true); //去掉锯齿
mPaint2.setStyle(Paint.Style.STROKE); //画笔的样式为圆
mPaint2.setStrokeWidth(50); //设置圆环的宽度
//创建字符画笔的实例
mPaintText=new Paint();
mPaintText.setColor(Color.RED);
mPaintText.setAntiAlias(true);
mPaintText.setTextSize(50); //设置文字大小
mPaintText.setTextAlign(Paint.Align.CENTER); //设置文字居中
//创建矩形实例
mRectf=new RectF(25,25,mRaius*2+25,mRaius*2+25);
}
}
将此自定义的类布局到主方法的xml布局上:
<com.demo.customview.Custom
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerInParent="true"
/>