开工大吉，狗年第一篇自定义View之StepView

今日科技快讯

颜值经济正随着一波又一波的美颜相机不断引爆市场，而最近，今日头条3亿美金收购Faceu的消息，更是让这一市场再次成为热点，虽然美颜相机直至今天也没有形成一家独大的垄断局面，但是百花齐放的时代不会持续太久，随着新一轮市场整合，或许将进一步调整市场的组成。

作者简介

大家早上好，休息了这么多天，今天终于又回归到正常的上班节奏了。上班第一天，收拾下长假的心情，新的一年我们一起继续加油！

本篇文章来自投稿老司机TangBuzhi的投稿。主要介绍了StepView的相关步骤和流程，希望对大家有所帮助！

TangBuzhi的博客地址：

https://www.jianshu.com/u/9df45b87cfdf

前言

其实写这个自定义view是有一点故事的，是因为他，我决定写这个view的，由于他的帮助和鼓励，我最终完成了这个view，在此，向他致敬！

ps:故事总是有剧情和结局的，这里不便多讲，送自己句话：且行且珍惜吧！

正文

效果图

好了，扯了上面的这些闲话，直接来看效果图吧。

stepview.gif

实现思路

首先是画各步骤点之间的线条

接着是画未选中步骤点的图标

第三步是画选中步骤点的图标

最后画出各步骤点对应的说明文字

实现细节

概述

StepView继承自View，通过构造方法初始化一些必要参数，然后在onSizeChanged方法中获取View的宽高以及其他额外计算的数据信息，最后通过onDraw方法绘制出View。

首先通过res/values/attrs定义一些细节参数

通过构造方法初始化

由这段代码可知，通过init方法，不但初始化了上面的细节参数，还额外初始化了bitmap、paint、bounds等参数。由于调用了dp/sp2px方法，所以先贴一下该方法。

在onSizeChanged方法中，完成宽高等数据计算。

此处说明一下，计算bitma宽高的方法，然后把宽高信息存于二维数组中

通过onDraw方法绘制View

画步骤点之间连线

画普通步骤点

画目标步骤点

画步骤点说明文字

通过上面这几个步骤就完成StepView的绘制了。

根据用户设置的是否可点击，给StepView添加点击监听

这里先说明一下思路：当用户点击时，View通过touch事件监听用户点击的x/y值，然后转换为point，再通过判断point是否在几个步骤点区域范围内，返回对应的步骤点值，然后重新绘制View。

下面看onTouchEvent方法：

获取用户点击点在某个步骤点值：

获取各步骤点矩阵所在区域：

至此，StepView的点击事件也完成了。

设置外部调用接口

通过设置这几个接口，可以很方便的动态设置StepView。

部分细节详解

详解1

画线条时，由于目标步骤点比普通的大，因此在计算线条长度时应计算目标步骤点两端线条长度，避免线条长度画错，影响美观。

详解2

线条长度是否可变（见git view1/view2/view3/view4/view5），当设置线条长度固定时，线条的长度由view_width/(max_dot-1)决定；当设置线条长度不固定时（view6），由图可知，view6的长度与view5完整的长度一致。

详解3

文字是否在线条下面，默认是。当文字在线条上面的时候，这里采取数据倒置设置，即把设置给view之前的线条距顶部、文字距底部的距离分别设置给了线条距底部、文字距顶部的距离。见如下代码：

详解4

获取各步骤点的矩形区域，首先是分别对各步骤点区域的左上右下进行计算，然后设置给各步骤点矩形。

调用

xml调用

java代码调用

总结

关于StepView的内容就讲到这里了。代码地址如下：

https://gitee.com/tangbuzhi/stepview

或者扫一扫关注我的公众号