自定义View之运动步数

上一篇中介绍了如何实现自定义View的流程。那么，在这一篇中我们就动手打造一个简单的运动步数的自定义View。可以看一下gif图展示了本次的运动步数的效果。

运动步数

这里的效果，我想大部分人都见过。下面来看一下具体的实现过程。

开始

分析

通过gif图，我们可以对上图进行拆解。图中一共四个元素。分别是：最底层的弧线、动态显示的步数弧线、记录当前步数的文字、“步数”文字。整个拆解之后，就很容易了，我们只需要一步一步的绘制，就能得到效果了。至于动态的显示步数，则需要用到属性动画来处理。下面我们来一步一步实现。

自定义属性

在values目录下新建attrs.xml文件。在其中定义自己用得上的属性。

1
2
3
4
5
6
7
8
<declare-styleable name="StepsView">
        <attr name="radius" format="dimension"/>
        <attr name="bottomPaintColor" format="color|reference"/>
        <attr name="stepsPaintColor" format="color|reference"/>
        <attr name="startAngle" format="integer"/>
        <attr name="sweepAngle" format="integer"/>
        <attr name="paintWidth" format="integer"/>
    </declare-styleable>

得到自定义属性

这里直接继承View，自己写这么一个效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class StepsView extends View {
public StepsView(Context context) {
        this(context, null);
    }
    public StepsView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public StepsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }
    private void init(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.StepsView);
        mRadius = array.getDimension(R.styleable.StepsView_radius, defRadius);
        int bottomPaintColor = array.getColor(R.styleable.StepsView_bottomPaintColor, Color.BLUE);
        int stepsPaintColor = array.getColor(R.styleable.StepsView_stepsPaintColor, getResources().getColor(R.color.colorAccent));
        mStartAngle = array.getInteger(R.styleable.StepsView_startAngle, defStartAngle);
        mSweepAngle = array.getInteger(R.styleable.StepsView_sweepAngle, defSweepAngle);
        int paintWidth = array.getInteger(R.styleable.StepsView_paintWidth, defPaintWidth);
        array.recycle();
}

得到上面的属性后，就可以用各个属性了。

初始化画笔

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//1.外部圆圈
centerX = mWidth / 2;
centerY = mHeight / 2;
mBottomPaint = new Paint();
mBottomPaint.setColor(bottomPaintColor);
mBottomPaint.setStrokeWidth(paintWidth);
mBottomPaint.setAntiAlias(true);
// 设置为 ROUND，即圆角描边
mBottomPaint.setStrokeCap(Paint.Cap.ROUND);
mBottomPaint.setStrokeJoin(Paint.Join.ROUND);
mBottomPaint.setStyle(Paint.Style.STROKE);
ArcRectF = new RectF(centerX - mRadius, centerY - mRadius, centerX + mRadius, centerY + mRadius);
//2.第二层圆圈,当前进度
mStepsPaint = new Paint();
mStepsPaint.setColor(stepsPaintColor);
mStepsPaint.setStrokeWidth(paintWidth);
mStepsPaint.setAntiAlias(true);
// 设置为 ROUND，即圆角描边
mStepsPaint.setStrokeCap(Paint.Cap.ROUND);
mStepsPaint.setStrokeJoin(Paint.Join.ROUND);
mStepsPaint.setStyle(Paint.Style.STROKE);
//3.当前步数的画笔
mTextPaint = new Paint();
mTextPaint.setColor(getResources().getColor(R.color.colorAccent));
mTextPaint.setTextSize(dipToPx(50));
mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.STROKE);
//最下方“步数”两个字的画笔
mStepPaint = new Paint();
mStepPaint.setColor(Color.GRAY);
mStepPaint.setTextSize(dipToPx(30));
mStepPaint.setTypeface(Typeface.DEFAULT_BOLD);
mStepPaint.setAntiAlias(true);
mStepPaint.setStyle(Paint.Style.STROKE);

可以这样获取View的宽高，由于我们的View只是变化一次，所以onSizeChanged()只会调用一次。

1
2
3
4
5
6
@Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
       super.onSizeChanged(w, h, oldw, oldh);
       mWidth = w;
       mHeight = h;
   }

在onDraw()中绘制

这一步是整个View的关键，这一步你就可以自己设计了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //将画布移动了  mWidth / 2, mHeight / 2 的距离
        //这一步使得原点坐标由屏幕左上角移动到了屏幕中心
        canvas.translate(mWidth / 2, mHeight / 2);
        //首先绘制最底层的圆弧
        canvas.drawArc(ArcRectF, mStartAngle, mSweepAngle, false, mBottomPaint);
        //当前进度圆弧，需要动态显示
        canvas.drawArc(ArcRectF, mStartAngle, percent * mSweepAngle, false, mStepsPaint);
     
        // 绘制实时步数文字，需要动态显示
        canvas.drawText(string, dx, baseLine, mTextPaint);
        //绘制“步数”文字
        canvas.drawText("步数", dx / 2, baseLine + getFontHeight(50) * 3, mStepPaint);
    }

以上就是四个元素的绘制，其中都是对坐标的计算，然后调用canvas来进行图形的绘制。

  • 最底下的弧形不用过多介绍，其中ArcRectF = new RectF(centerX - mRadius, centerY - mRadius, centerX + mRadius, centerY + mRadius);
    是这个样子的。

  • 由于最上面的圆弧需要动态显示，所以这里可以对外提供两个方法。来对当前的最大步数，以及当前的步数进行设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public void setStpes(int stpes) {
       this.stpes = stpes;
   }
   public void setMaxStpes(int maxStpes) {
       this.maxStpes = maxStpes;
   }
   public int getStpes() {
       return stpes;
   }
   public int getMaxStpes() {
       return maxStpes;
   }

之后，需要用到属性动画，我们仍然是暴露到外面。因为，只有调用者才知道该设置多少参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
public void setAnimation(float last, float current, int length) {
       ValueAnimator progressAnimator = ValueAnimator.ofFloat(last, current);
       progressAnimator.setDuration(length);
       progressAnimator.setTarget(currentAngleLength);
       progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator animation) {
               currentAngleLength = (float) animation.getAnimatedValue();
               invalidate();
           }
       });
       progressAnimator.start();
   }

这里的invalidate()方法会不断的调用ondraw()方法，不断地重绘，达到整个动态效果。

所以，percent = currentAngleLength / maxStpes;就是当前的步数百分比。

  • 绘制当前的步数文字，这里也是动态显示的。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    String string = (int) currentAngleLength + "";
     // 测量文字的宽高
     Rect textBounds = new Rect();
     mTextPaint.getTextBounds(string, 0, string.length(), textBounds);
     int dx = -textBounds.width() / 2;
     // 获取画笔的FontMetrics
     Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
     // 计算文字的基线
     int baseLine = (int) ((fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);

currentAngleLength 是在属性动画中不断返回的进度值。转化成String类型后，就成字符串了，就可以用canvas绘制到屏幕上了。通过mTextPaint.getTextBounds()就可以完成对字符串的测量，然后得到width，由于坐标系原点在屏幕中心。所以这里这样处理int dx = -textBounds.width() / 2;。从dx开始绘制，绘制长度为string字符串的长度。然后借助 Paint.FontMetrics得到字符串的高度，这里之所以使用 Paint.FontMetrics是因为 Paint.FontMetrics中bottom是测量给定文本大小下字体中最低字形的最大距离，而top是在给定文本大小的字体中最高字形的基线上方的最大距离。而getTextBounds()返回的bottom以及top是不会这样的。所以使用了Paint.FontMetrics。这里baseLine的计算，其实大部分绘制文字时都需要这样计算，baseLine就是整个文本的基线，也就是整个文本的最底端。这里坐标系原点在屏幕中心，通过(fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom，就可以得到（文本高度/2）这么一个的正值。你可以自己计算一下。毕竟我的数学也不好╮(╯﹏╰）╭。。。之后canvas.drawText(string, dx, baseLine, mTextPaint);就可以了。为了让文本在正中心，由于坐标系在屏幕中心，我们必须让dx为负值，即文本的最左端，baseLine为正值。

  • 绘制“步数”

这个相比于上一个就很简单了，上一步都已经计算出了所需绘制文字的左边位置以及底部基线。

1
2
3
4
5
6
7
8
9
10
11
 //绘制“步数”文字
    canvas.drawText("步数", dx / 2, baseLine + getFontHeight(50) * 3, mStepPaint);
    public int getFontHeight() {
//      Rect bounds_Number = new Rect();
//      String string = "步数";
//      mStepPaint.getTextBounds(string, 0, string.length(), bounds_Number);
//      return (bounds_Number.bottom - bounds_Number.top) / 2 - bounds_Number.bottom;
        Paint.FontMetrics fontMetrics = mStepPaint.getFontMetrics();
        return (int) (fontMetrics.bottom - fontMetrics.top);
    }

这里应该可以看懂吧？dx/2，是由于“步数”只有两个字，大部分情况下是上面步数的1/2。而baseLine，你也只要计算出上个文字的baseLine+下面的文字高度就是“步数”的baseLine了。

使用

在布局中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:kevin="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="com.example.qqview.MainActivity">
   <com.example.qqview.StepsView
       android:id="@+id/step"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       kevin:radius="400px"
       kevin:bottomPaintColor="@color/colorPrimary"
       kevin:stepsPaintColor="@color/colorAccent"
       kevin:startAngle="120"
       kevin:sweepAngle="300"
       />
</LinearLayout>

注意需要使用自定义名空间：xmlns:kevin="http://schemas.android.com/apk/res-auto"

Activity中，只需要调用暴露出来的方法，即可完成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class MainActivity extends AppCompatActivity {
    private int steps = 6000;
    private int maxSteps = 10000;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        StepsView stepsView= (StepsView) findViewById(step);
        stepsView.setMaxStpes(maxSteps);
        stepsView.setStpes(steps);
        stepsView.setAnimation(0,steps,1500);
    }
}

好了，这样就完成了步数运动这个自定义View了。

赏

谢谢你请我喝咖啡~~~

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

I'm Kevin Jern，<br>一名在校大学生，<br>自由主义、理想主义以及完美主义者<br><br>热爱科技，热爱技术<br/>目前是一名小白Android Developer<br/><br/>竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。<br>回首向来萧瑟处，归去，也无风雨也无晴。