网友通过本文主要向大家介绍了android 自定义控件,android中自定义控件,android自绘控件,android 自定控件,android 动态添加控件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
Android自定义控件系列案例【四】
案例效果：
模拟器上运行有些锯齿，真机上和预期一样好
案例分析：
看效果，第一直觉肯定是Android原生态控件中没有这样的控件实现这种效果，自然想到应该需要自定义控件了，没错，这就是通过自定义控件来绘制的一个圆环进度条。仔细分析发现这个效果的进度条应该由几个部分组成，首先是无进度时的浅色圆环，然后是一个随进度变化的深色圆弧，而中间部分是一个深蓝色的实心圆，最后就是显示进度百分比的文字。这几部分大部分都是图形，所以使用图形绘制技术应该可以绘制出分部分效果，然后加上进度控制部分应该心里就有底了。</div>
技术实现：
按照上面的分析我们一部分一部分的来实现。先大概列一个步骤：</div> </div>重写onDraw()方法的目的是为了找到绘制图形的时机与场所。</div></div>
需求准备Paint画笔，并设置画笔宽度，颜色，样式等，然后绘制圆环。</div></div>
重置Paint画笔，并设置画笔颜色，绘制进度圆弧。</div></div>
测试进度圆弧是否会随进度的变化正常工作。</div></div>
重置Paint画笔，并设置画笔颜色，绘制实心圆。</div></div>
计算进度百分比，绘制文本。</div></div> </div> </div>
package com.kedi.myprogressbar;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;
public class MyProgressBar extends View {
public MyProgressBar(Context context) {
this(context, null);
}
public MyProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
有了自定义MyProgressBar,此时就可以在XML布局中先占位了，下面是XML布局文件。</div>
绘制浅色圆环
</div> </div>
</div>
</div>|- new Paint() 创建画笔</div>|-setColor() 设置画笔颜色</div>|-setStyle()设置画笔样式（Paint.Style.STROKE 虚框样式，Paint.Style.FILL 实心样式）</div>|-setStrokeWidth()设置画笔线宽</div>|-setAntiAlias()消除锯齿或毛边</div>|-setTextSize()设置画文本时的文本大小</div>|-setTypeface()设置画文本时的文本字体</div>
</div>
</div> 有了这些技术准备，绘制工作将一路顺利。为了进行接下来的绘制工作，先在初始化方法中创建一个空画笔。</div>|-drawCircle(cx, cy, radius, paint)绘制圆环或圆。cx,cy:圆心坐标，radius:圆半径，paint:画笔。</div>|-drawText(text, x, y, paint)绘制文本。text:文本，x,y:文本坐标，paint:画笔。</div>|-drawArc(oval, startAngle, sweepAngle, useCenter, paint)绘制圆弧。</div>oval:矩形区域，用来确定圆弧形状和大小。new RectF(left, top, right, bottom)确定一个矩形区域。</div>startAngle:圆弧始端角度。</div>sweepAngle:圆弧末端角度。</div>paint:画笔。</div>userCenter:设置是否显示圆弧的两边线条，false时只画圆弧没有两边，true时带两边。如下图：</div>
public class MyProgressBar extends View {
private Paint paint;// 画笔
public MyProgressBar(Context context) {
this(context, null);
}
public MyProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
/**
* 初始化方法
*/
private void init() {
paint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
接下来绘制浅色圆环</div>
</div>
private int roundW;// 圆环宽
/**
* 初始化方法
*/
private void init() {
paint = new Paint();
//初始化圆环宽，这里考虑了适配把15dp进行了对应平台的像素转换。
roundW = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 15, getResources().getDisplayMetrics());
}
// 1.圆心（x,y）坐标值
int centerX = getWidth() / 2;
int centerY = centerX;
// 2.圆环半径
int radius1 = (centerX - roundW / 2);
// 3.设置圆环颜色（浅色）
paint.setColor(Color.parseColor("#11339ED4"));
// 4.设置画笔的风格
paint.setStyle(Paint.Style.STROKE);
// 5.设置画圆环的宽度
paint.setStrokeWidth(roundW);
// 6.消除锯齿
paint.setAntiAlias(true);
// 7.画圆环
canvas.drawCircle(centerX, centerY, radius1, paint);
</div>
</div> </div>
package com.kedi.myprogressbar;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
public class MyProgressBar extends View {
private Paint paint;// 画笔
private int roundW;// 圆环宽
public MyProgressBar(Context context) {
this(context, null);
}
public MyProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
/**
* 初始化方法
*/
private void init() {
paint = new Paint();
// 初始化圆环宽，这里考虑了适配把15dp进行了对应平台的像素转换。
roundW = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 15, getResources().getDisplayMetrics());
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制浅色圆环
// 1.圆心（x,y）坐标值
int centerX = getWidth() / 2;
int centerY = centerX;
// 2.圆环半径
int radius1 = (centerX - roundW / 2);
// 3.设置画大圆环颜色
paint.setColor(Color.parseColor("#11339ED4"));
// 4.设置画