Android初探自定义View

写了一段时间Android了却发现关于自定义View这一块一直不是很懂,人们都说自定义View是进阶高手的阶梯.所以想研究下自定义View,我知道有很多大神写的自定义View讲解比我好的太多了,我只是记录一下我的研究过程.当然,能够帮助大家是最好不过的.

首先,在Values文件夹下建一个attrs文件:

<declare-styleable name="CircleProgress">
<attr name="circleText" format="string"></attr>
<attr name="circleColor" format="color"></attr>
<attr name="circleTextSize" format="dimension"></attr>
<attr name="arcColor" format="color"></attr>
<attr name="arcStokeWidth" format="integer"></attr>
</declare-styleable>

然后,创建一个class类继承View,在构造方法中:

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircleProgress);
circleText = array.getString(R.styleable.CircleProgress_circleText);
circleTextSize = array.getDimension(R.styleable.CircleProgress_circleTextSize, 0);
circleColor = array.getColor(R.styleable.CircleProgress_circleColor, 0);
arcColor = array.getColor(R.styleable.CircleProgress_arcColor, 0);
arcStokeWidth = array.getInteger(R.styleable.CircleProgress_arcStokeWidth,0);
array.recycle();

一定要调用recycle()方法,然后创建画笔,设置属性:

mArcPaint = new Paint();//弧线画笔
mCirclePaint = new Paint();//圆圈画笔
mTextPaint = new Paint();//文字画笔

mTextPaint.setTextSize(circleTextSize);
/*设置CENTER*/
mTextPaint.setTextAlign(Paint.Align.CENTER);

mCirclePaint.setColor(circleColor);
mCirclePaintTwo.setColor(getResources().getColor(R.color.black));

mArcPaint.setColor(arcColor);
mArcPaint.setStrokeWidth(arcStokeWidth);
mArcPaint.setAntiAlias(true);//消除锯齿
mArcPaint.setStyle(Paint.Style.STROKE);//空心

重写onDraw()方法,

int center = getWidth()/2;
float radius = center /2;

Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
/*fontMetrics.ascent + fontMetrics.descent  获取文字的高度*/
int halfHeight = (fontMetrics.ascent + fontMetrics.descent)/2;
RectF rectF = new RectF(center - radius, center - radius, center + radius, center + radius);
/**
* 画圆
*/
canvas.drawCircle(center,center,radius/2,mCirclePaint);
/**
* 画弧线
* 360*progress/100 将百分比转成度数
*/
canvas.drawArc(rectF, 270, 360*progress/100, false, mArcPaint);
/**
* 画文字
*/
canvas.drawText(circleText, 0, circleText.length(), center, center - halfHeight, mTextPaint);

然后,写一个方法设置进度:

/**
* 设置进度
* @param progress1
*/
public void setArcProgress(float progress1){
progress = progress1;
invalidate();
}

然后在XML中使用:

<com.hexstudy.simplecustormview.CircleProgress
android:id="@+id/circleprogress"
android:layout_width="match_parent"
android:layout_height="match_parent"
CircleProgress:circleText = "圆形"
CircleProgress:arcColor="#000"
CircleProgress:circleTextSize="14sp"
CircleProgress:circleColor="#f00"
CircleProgress:arcStokeWidth="30"
/>

好了,最后的效果是: