废话不多说先上效果.
有点类似于QQ的步数加载的那个效果.
效果图.gif
看到这样的一个效果的时候, 先来分析一波.
- 有两个弧形, 暂且称为底部和顶部
- 底部的弧形, 就是背景的那个, 应该是固定在界面上的.
- 主要就是顶部的弧形绘制及动画.
- 图形的中间是一个 textView, 随着内层弧形进度的改变而改变数值,
下面将详细说一下怎么实现我们分析出来的这几点.
1. 创建自定义控件属性文件 attrs
看效果图可以得知这个自定义View大概有以下几个属性.
- 底部弧形的颜色
- 顶部弧形的颜色
- 弧形的宽度
- 文本显示字体的大小
- 文本字体的颜色.
那么我们在res/values文件夹下创建一个 attrs 文件来声明这些属性
<resources>
<declare-styleable name="myView">
<!-- 底部弧形颜色 -->
<attr name="bottomArcColor" format="color"/>
<!-- 顶部弧形颜色 -->
<attr name="topArcColor" format="color"/>
<!-- 两个弧的宽度 -->
<attr name="borderWidth" format="dimension"/>
<!-- 文本字体的大小 -->
<attr name="myTextSize" format="dimension"/>
<!-- 文本字体的颜色 -->
<attr name="myTextColor" format="color"/>
</declare-styleable>
</resources>
2. 创建自定义View类 MyView.java
- 继承 View
- 重写三个构造方法
- 重写
onMeasure, onDraw方法 - 获取刚才我们自定义的属性.
public class MyView extends View {
//默认的底部弧形颜色
private int mBottomArcColor = Color.RED;
//默认的顶部弧形颜色
private int mTopArcColor = Color.BLUE;
//默认文本字体大小
private int mTextSize = 10;
//默认弧形的边框大小
private int mBorderWidth = 20; //20px,要转dip
//默认文本颜色
private int mTextColor = Color.RED;
public MyView(Context context) {
this(context, null);
}
public MyView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttr(context, attrs);
}
private int sp2px(int sp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, getResources().getDisplayMetrics());
}
private void initAttr(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.myView);
mBottomArcColor = array.getColor(R.styleable.myView_bottomArcColor, mBottomArcColor);
mTopArcColor = array.getColor(R.styleable.myView_topArcColor, mTopArcColor);
mBorderWidth = (int) array.getDimension(R.styleable.myView_borderWidth, mBorderWidth);
mTextSize = array.getDimensionPixelSize(R.styleable.myView_myTextSize, sp2px(mTextSize));
mTextColor = array.getColor(R.styleable.myView_myTextColor, mTextColor);
array.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
准备阶段已经做完了, 下一步就要开始测量了.
3. onMeasure 开始测量
实际在开发过程中, 可能需要考虑到很多情况. 例如: 在外部对控件进行设置属性的时候, 调用者有可能会直接设置固定的宽高或者使用
wrap_content又或者使用match_parent. 这些都是不可预测的, 可以在onMeasure中通过判断宽高的mode来进行一系列的操作(前两章已经讲过). 这里为了演示, 就不考虑外部设置的是不是wrap_content / match_parent了. 就认定外部设置固定宽高.固定为正方形
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取设置的宽高
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
//设置宽高 , 采用最大的值
setMeasuredDimension(width, height);
}
4. onDraw 开始绘制
我们先从简单的开始 ,先绘制底部的弧形. 准备一个绘制底部的画笔
private Paint mBottomArcPaint,
/**
* 底部弧形画笔设置
* 在 initAttr 方法中调用
*/
private void initBottomArcPaint() {
mBottomArcPaint = new Paint();
//设置抗锯齿
mBottomArcPaint.setAntiAlias(true);
//设置画笔宽度
mBottomArcPaint.setStrokeWidth(mBorderWidth);
//设置颜色
mBottomArcPaint.setColor(mBottomArcColor);
//设置画圆弧的画笔的属性为描边,空心
//Paint.Style.STROKE 只绘制图形轮廓（描边）
//Paint.Style.FILL 只绘制图形内容
//Paint.Style.FILL_AND_STROKE 既绘制轮廓也绘制内容
mBottomArcPaint.setStyle(Paint.Style.STROKE);
//设置画笔始末端样式为圆形
mBottomArcPaint.setStrokeCap(Paint.Cap.ROUND);
}
4.1 开始绘制底部圆弧
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//设置落笔的上下左右, 需要考虑到画笔宽度
RectF rectF = new RectF(mBorderWidth / 2, mBorderWidth / 2,
getWidth() - mBorderWidth / 2, getHeight() - mBorderWidth / 2);
canvas.drawArc(rectF, 135, 270, false, mBottomArcPaint);
}
有些朋友要问了, 为什么绘制的大小要边框大小 / 2 呢.
因为笔触的宽度, 并不是往笔触内侧增加宽度的, 而是外侧一半, 内侧一半
drawArc 参数说明
- 参数1: 定义圆弧的形状和大小的范围
- 参数2: 设置圆弧是从哪个角度来顺时针绘画的
- 参数3: 设置圆弧扫过的角度
- 参数4: 圆弧在绘画的时候，是否经过圆心
- 参数5: 画笔
那么为什么是从135°开始, 顺时针画270°呢 ? 看下图
开始扫描的角度是 180° - 45° = 135°
扫的范围就是 360° - 90°(缺的那块的) = 270°
这个时候可以运行一下看一下效果, 如下图
底部的弧形已经绘制好了, 现在开始绘制顶部的圆弧.
4.2 绘制顶部圆弧
内圆弧的扫描角度, 是不能写死的. 需要外部传入进来, 所以就需要设置两个变量, 一个是总进度, 一个是当前进度.当然, 还需要一个绘制顶部的圆弧的画笔
//总进度
private int mToalProgress = 0;
//当前进度
private int mCurrentProgress = 0;
//顶部画笔
private Paint mTopArcPaint;
/**
* 顶部弧形画笔设置
* 在 initAttr 方法中调用
*/
private void initTopArcPaint() {
mTopArcPaint= new Paint();
mTopArcPaint.setAntiAlias(true);
mTopArcPaint.setStrokeWidth(mBorderWidth);
mTopArcPaint.setColor(mTopArcColor);
mTopArcPaint.setStyle(Paint.Style.STROKE);
mTopArcPaint.setStrokeCap(Paint.Cap.ROUND);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制底部圆弧
...
//绘制顶部圆弧, 如果总进度是 0 那么直接不继续绘制
if (mToalProgress == 0){
return;
}
float sweepAngle = (float) mCurrentProgress / mToalProgress;
canvas.drawArc(rectF, 135, sweepAngle * 270, false, mTopArcPaint);
}
为了看到效果, 我们先给总进度设置为100, 当前进度设置为60, 运行一下看下效果.
OK, 就是这样, 下面还剩最后一个, 就是中间的文字
4.3 绘制中间进度显示文本
首先是 文字画笔设置
private Paint mTextPaint;
private void initTextPaint() {
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画底部圆弧
...
//画顶部圆弧
...
//画文字
String str = mCurrentProgress + "";
//测量文字的宽度
Rect textBounds = new Rect();
mTextPaint.getTextBounds(str , 0, str .length(), textBounds);
//开始绘制文字的位置
int dx = getWidth() / 2 - textBounds.width() / 2;
//基线
Paint.FontMetricsInt metricsInt = mTextPaint.getFontMetricsInt();
int dy = (metricsInt.bottom - metricsInt.top) / 2 - metricsInt.bottom;
int basrLine = getHeight() / 2 + dy;
canvas.drawText(str , dx, basrLine, mTextPaint);
}
还需要加入两个方法, 来设置总进度和当前进度的值
public synchronized void setToalProgress(int toal) {
this.mToalProgress = toal;
}
public synchronized void setCurrentProgress(int currentProgress) {
this.mCurrentProgress = currentProgress;
//不断绘制,会不断的去调用onDraw
invalidate();
}
至此这个自定义View 已经算是完成了, 剩下的就是外面的调用了.
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.view_day03.MyView
android:id="@+id/myView"
android:layout_centerInParent="true"
app:bottomArcColor="@color/colorPrimary"
app:topArcColor="@color/colorAccent"
app:borderWidth="20dp"
app:myTextColor="@color/colorAccent"
app:myTextSize="36sp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
MainActivity
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final MyView myView = findViewById(R.id.myView);
myView.setToalProgress(100);
//设置属性动画
ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, 80);
valueAnimator.setDuration(2000);
//设置差值器, 由快变慢
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
myView.setCurrentProgress((int)value);
}
});
valueAnimator.start();
}
}
OK, 这个小试牛刀的自定义View就完成了.
稍后会放上代码的Git地址.
