案例效果:
模拟器上运行有些锯齿,真机上和预期一样好
案例分析:
看效果,第一直觉肯定是Android原生态控件中没有这样的控件实现这种效果,自然想到应该需要自定义控件了,没错,这就是通过自定义控件来绘制的一个圆环进度条。仔细分析发现这个效果的进度条应该由几个部分组成,首先是无进度时的浅色圆环,然后是一个随进度变化的深色圆弧,而中间部分是一个深蓝色的实心圆,最后就是显示进度百分比的文字。这几部分大部分都是图形,所以使用图形绘制技术应该可以绘制出分部分效果,然后加上进度控制部分应该心里就有底了。
技术实现:
按照上面的分析我们一部分一部分的来实现。先大概列一个步骤:
(1)自定义View,重写构造方法,重写onDraw()方法。
重写onDraw()方法的目的是为了找到绘制图形的时机与场所。
(2)绘制浅色圆环。
需求准备Paint画笔,并设置画笔宽度,颜色,样式等,然后绘制圆环。
(3)绘制深色进度圆弧。
重置Paint画笔,并设置画笔颜色,绘制进度圆弧。
(4)添加SeekBar,并通过进度变化控制进度圆弧。
测试进度圆弧是否会随进度的变化正常工作。
(5)绘制深蓝色实心圆。
重置Paint画笔,并设置画笔颜色,绘制实心圆。
(6)绘制百分比文本。
计算进度百分比,绘制文本。
(7)自定义属性,使进度条样式可配置(扩展部分)。
- 自定义View,重写构造方法,重写onDraw()方法
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布局文件。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.kedi.myprogressbar.MyProgressBar
android:id="@+id/pg"
android:layout_width="120dp"
android:layout_height="120dp"
android:padding="5dp"
android:layout_centerInParent="true" >
</com.kedi.myprogressbar.MyProgressBar>
<SeekBar
android:id="@+id/sb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/pg"
android:max="100"
android:layout_margin="20dp" />
</RelativeLayout>
- 绘制浅色圆环
Paint 画笔:
|- new Paint() 创建画笔|- setColor() 设置画笔颜色|- setStyle()设置画笔样式(Paint.Style.STROKE 虚框样式,Paint.Style.FILL 实心样式)|- setStrokeWidth()设置画笔线宽|- setAntiAlias()消除锯齿或毛边|- setTextSize()设置画文本时的文本大小|- setTypeface()设置画文本时的文本字体
Canvas画布:
|- drawCircle(cx, cy, radius, paint)绘制圆环或圆。cx,cy:圆心坐标,radius:圆半径,paint:画笔。|- drawText(text, x, y, paint)绘制文本。text:文本,x,y:文本坐标,paint:画笔。|