1. 思路分析
自定义View步骤：
1>：values__attrs.xml，自定义属性；
2>：在自定义View的第三个构造方法中获取自定义属性；
3>：onMeasure【非必须】；
4>：onDraw：绘制代码全部在onDraw方法中写；
步骤分析：
1>：固定不动的蓝色大圆弧 颜色和圆弧宽度：color、borderWidth；
2>：可以变化的红色小圆弧 颜色和圆弧宽度：color、borderWidth；
3>：中间的步数文字 颜色和大小：color、textSize；
2. 效果如下
图片.png
3. 代码如下
1>：attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 自定义qq计步器 -->
<declare-styleable name="QQStepView">
<!-- 外圆及内圆颜色 -->
<attr name="outerColor" format="color"/>
<attr name="innerColor" format="color"/>
<!-- 圆弧宽度 -->
<attr name="borderWidth" format="dimension"/>
<!-- 文字大小和颜色 -->
<attr name="stepTextSize" format="dimension"/>
<attr name="stepTextColor" format="color"/>
</declare-styleable>
</resources>
2>：QQStepView
/**
* ================================================
* Email: 2185134304@qq.com
* Created by Novate 2018/12/28 17:51
* Version 1.0
* Params:
* Description: 仿qq运动计步器
* ================================================
*/
public class QQStepView extends View {
/**
* 思路分析：
* 1. 固定不动的蓝色大圆弧 颜色和宽度[color、borderWidth]
* 2. 可以变化的红色小圆弧 颜色和宽度[color、borderWidth]
* 3. 中间的步数文字 颜色和大小[color、textSize]
*/
// 外圆默认颜色
private int mOuterColor = Color.RED ;
// 内圆默认颜色
private int mInnerColor = Color.BLUE ;
// 圆弧宽度 20sp
private int mBorderWidth = 20 ;
// 默认文字颜色
private int mStepTextColor ;
// 默认文字大小
private int mStepTextSize ;
// 设置3个画笔 外圆画笔、内圆画笔、文字画笔
private Paint mOutPaint , mInnerPaint , mTextPaint ;
// 总共步数
private int mStepMax = 0 ;
// 当前步数
private int mCurrentStep = 0 ;
public QQStepView(Context context) {
this(context,null);
}
public QQStepView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public QQStepView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 步骤：
// 1. values__attrs.xml中自定义属性
// 2. 在布局文件中使用
// 3. 在构造方法中获取自定义属性
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.QQStepView);
// 获取外圆颜色、内圆颜色、圆弧宽度、文字颜色、文字大小
mOuterColor = typedArray.getColor(R.styleable.QQStepView_outerColor , mOuterColor) ;
mInnerColor = typedArray.getColor(R.styleable.QQStepView_innerColor , mInnerColor) ;
mBorderWidth = typedArray.getDimensionPixelSize(R.styleable.QQStepView_borderWidth , mBorderWidth) ;
mStepTextColor = typedArray.getColor(R.styleable.QQStepView_stepTextColor , mStepTextColor) ;
mStepTextSize = typedArray.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize , mStepTextSize) ;
// 释放资源
typedArray.recycle();
// 4. 初始化画笔
mOutPaint = new Paint() ;
mOutPaint.setAntiAlias(true); //设置抗锯齿，为了文字能清晰显示不至于很模糊
mOutPaint.setStrokeWidth(mBorderWidth); //设置画笔宽度，单位px
mOutPaint.setColor(mOuterColor); //设置外圆画笔颜色
mOutPaint.setStrokeCap(Paint.Cap.ROUND) ; //设置画笔笔刷类型 帽子 圆弧两边的小盖子 把圆弧封闭住
mOutPaint.setStyle(Paint.Style.STROKE); //设置画笔空心
//初始化内圆画笔
mInnerPaint = new Paint() ;
mInnerPaint.setAntiAlias(true); //设置内圆抗锯齿，为了文字能清晰显示不至于很模糊
mInnerPaint.setStrokeWidth(mBorderWidth); //设置画笔宽度 ，单位px
mInnerPaint.setColor(mInnerColor);
mInnerPaint.setStrokeCap(Paint.Cap.ROUND); //设置画笔笔刷类型
mInnerPaint.setStyle(Paint.Style.STROKE); //设置画笔空心 FILL：是实心
//初始化文字画笔
mTextPaint = new Paint() ;
mTextPaint.setAntiAlias(true); //设置抗锯齿
mTextPaint.setTextSize(mStepTextSize);
mTextPaint.setColor(mStepTextColor);
// 5. 重写onMeasure
// 6. 画外圆弧、内圆弧、文字
// 7. 其他
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 这里为了方便，直接在这里获取width和height，然后测量宽高；
// 如果想要在布局文件中给QQStepView宽高属性设置wrap_content，
// 就需要获取 widthMode和heightMode，通过这两个模式重新获取width和height，
// 具体可以参照自定义MyTextView
int width = MeasureSpec.getSize(widthMeasureSpec) ;
int height = MeasureSpec.getSize(heightMeasureSpec) ;
// 测量宽高：宽高不一致时，取最小值，确保是一个正方形
setMeasuredDimension(width>height?height:width , width>height?height:width);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 6.1 画外圆
RectF rectF = new RectF(mBorderWidth/2,mBorderWidth/2,getWidth()-mBorderWidth/2,getHeight()-mBorderWidth/2) ;
// param1:区域 param2:开始的角度 param3:扫过的角度
// param4:圆弧里边是否都是充满颜色 false表示画圆弧时不需要把圆弧区域颜色全部填充 param5: 画笔
canvas.drawArc(rectF,135,270,false,mOutPaint);
if (mStepMax == 0) return;
// 6.2 画内圆：不能写死，因为需要扫角度，使用百分比，让调用者可以从外边传递
float sweepAngle = (float) mCurrentStep/mStepMax ;
canvas.drawArc(rectF,135,sweepAngle*270,false,mInnerPaint);
// 6.3 画文字
String stepText = mCurrentStep+"" ;
// 文字区域
Rect rect = new Rect();
// 获取文字大小和宽度
mTextPaint.getTextBounds(stepText,0,stepText.length(),rect);
// 控件的一半 - 文字区域的一半
int dx = getWidth()/2-rect.width()/2;
// 基线baseLine 计算方式
Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
int dy = (fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;
int baseLine = getHeight()/2+dy;
canvas.drawText(stepText,dx,baseLine,mTextPaint);
}
/**
* 下边这两个方法目的：让调用者可以在外边调用
* synchronized：防止多个线程操作
*/
public synchronized void setMaxStep(int stepMax){
this.mStepMax = stepMax ;
}
/**
* synchronized：防止多个线程操作
*/
public synchronized void setCurrentStep(int currentStep){
this.mCurrentStep = currentStep ;
// 不断的重新绘制
invalidate();
}
}
3>：activity_myqqstepview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<com.novate.test.customview.QQStepView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:outerColor="@color/colorPrimary"
app:innerColor="@color/colorAccent"
app:borderWidth="20dp"
app:stepTextSize="30sp"
app:stepTextColor="@color/colorAccent"
android:id="@+id/step_view"
/>
</LinearLayout>
4>：MyQQStepViewActivity
/**
* ================================================
* Email: 2185134304@qq.com
* Created by Novate 2018/12/29 8:25
* Version 1.0
* Params:
* Description: 让qq运动步数动起来
* ================================================
*/
public class MyQQStepViewActivity extends AppCompatActivity {
private QQStepView mStepView;
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_myqqstepview);
mStepView = (QQStepView) findViewById(R.id.step_view);
// 设置最大步数
mStepView.setMaxStep(4000);
// 属性动画 从0到3000 让运动步数动起来
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0,3000);
// 动画执行的时间
valueAnimator.setDuration(1000);
// 设置差值器
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 只要属性动画发生变化，不断的获取当前value值，然后设置给当前步数
float animatedValue = (float) animation.getAnimatedValue();
mStepView.setCurrentStep((int)animatedValue);
}
});
// 开启属性动画
valueAnimator.start();
}
}
网友评论