开工大吉,狗年第一篇自定义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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180222B04EWN00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券