内线收买人,格拉斯哥流浪者,变形金刚3 1080p
前言
本篇文章会说下如何使用并且要用麻烦的自定义 view 去实现时间轴效果，以及如何分析、实现自定义 view。 需要具备的知识：paint、canvas、自定义 view 的绘制流程。
欢迎留言交流。
一、已经有很多 recycleview 实现时间轴的例子，为何还要费劲的使用自定义 view 去实现时间轴？
首先看下最终想要的效果：
根据上图可以总结出以下几点：
二、如何开始？
相信也有人跟我一样，对自定义的绘制过程 view、canvas、path、paint 的使用有了解，但是真的要去写自定义 view 确不知道从何开始，不知道第一步如何下手。我个人的总结就是：想要的太多，迟迟不动手，所以有想法一定要去动手试验！ 不要想着写完第一次运行就是最终想展示的完美效果，而是要抱着整体拆分成不重复的小块，然后去绘制重复块，然后去一点点实现一步步完美的心态才能做出来。
所以首先要把想实现的 view 拆分成一个个小的可绘制的并且没有重复的块，以目前想实现的时间轴效果来说，最小可绘制无重复块也就是只包括一个时间结点的块如图：
它包括：
三、开始画
有了上面的分析，接下来就要开始画了。
1. 画中间的线
首先画虚线，如果虚线不知道怎么画，可以先画一条实线，然后再去找画虚线的方法。
使用 canvas 中画线的方法 drawline(float startx, float starty, float stopx, float stopy, @nonnull paint paint) 根据参数得知需知道线的起点与终点坐标以及一个 paint 对象，因为是垂直居中且横穿整个控件的直线所以可以确定两个点的 y 坐标是一样的，也就是控件高的一半，起点的 x 坐标为0，终点的 x 坐标为控件的宽。也就是知道控件的宽和高之后就可以绘制出这条线。获取控件的宽高，可以在 onmeasure 方法中获取：
我要评论
@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
super.onmeasure(widthmeasurespec, heightmeasurespec);
mviewwidth = measurespec.getsize(widthmeasurespec) - dip2px(mcontext, msafedistance * 2);
mviewheight = measurespec.getsize(heightmeasurespec);
}
画线的代码（在 ondraw 方法中添加，下面其它的绘制方法同样是在 ondraw 方法中添加）：
// 定义画笔，并设置相关属性
paint mlinepaint = new paint();
mlinepaint.setcolor(color.parsecolor("#999999"));
mlinepaint.setstrokewidth(1);
mlinepaint.setstyle(paint.style.stroke);
// 画虚线
canvas.drawline(0, mviewheight / 2, mviewwidth, mviewheight / 2, mlinepaint);
2. 画图标
canvas 画图标的方法：drawbitmap(@nonnull bitmap bitmap, float left, float top, @nullable paint paint)，根据方法的参数去分析如何准备值，这里需要一个 bitmap 对象，起点坐标以及 paint。bitmap 对象可以将资源文件 drawable 转为 bitmap 格式；坐标就是控件的中心点。画图标的代码：
// 图标 x，y 坐标 bitmap statusbitmap = bitmapfactory.decoderesource(mcontext.getresources(), r.mipmap.ic_no_pass); float bx = mviewwidth / 2; // 垂直的中心点在图标的顶部，所以要减去 bitmap 高的一半 float by = mviewheight / 2 - statusbitmap.getheight() / 2f; paint mbitmappaint = new paint(); mbitmappaint.setfilterbitmap(true); canvas.drawbitmap(statusbitmap, bx, by, mbitmappaint);
3. 画文本
canvas 画文本的方法：drawtext(@nonnull string text, float x, float y, @nonnull paint paint)，依然是根据方法得知需要知道绘制的内容，开始的坐标点以及 paint。当文本在图标上方时，文本的 y 坐标需要使用图标的 y 坐标减去文本到图标的距离，x 坐标同图片的 x 坐标一样；当文本在图标下方时，文本的 y 坐标需要使用图标的 y 坐标加上文本到图标的距离。画文本的代码：
// 定义画笔
paint mdatepaint = new paint();
mdatepaint.setcolor(color.parsecolor("#666666"));
mdatepaint.settextsize(dip2px(mcontext, 12));
mdatepaint.setstyle(paint.style.fill);
mdatepaint.settextalign(paint.align.center);
mdatepaint.setantialias(true);
paint mnamepain = new paint();
mnamepain.setcolor(color.parsecolor("#666666"));
mnamepain.settextsize(dip2px(mcontext, 13));
mnamepain.setstyle(paint.style.fill);
mnamepain.settextalign(paint.align.center);
mnamepain.setantialias(true);
// 定义坐标变量
float datex = bx + statusbitmap.getwidth() / 2f;
float datey;
datey = mviewheight / 2 - dip2px(mcontext, 19);
// 画文字，在图标上
canvas.drawtext("有效时间", datex, datey, mnamepain);
canvas.drawtext("09.27-09.29", datex, datey - datetextheight mdatepaint);
// 画文字，在图标下
datey = mviewheight / 2 + dip2px(mcontext, 19);
canvas.drawtext("09.27-09.29", datex, datey, mdatepaint);
canvas.drawtext("有效时间", datex, datey + datetextheigh, mnamepain);
4. 由局部到整体
上面已经完成了只有一个时间点的绘制，接下来思考如果有多个时间点时如何绘制。只有一个时间点时计算坐标是以控件的宽高进行计算，那么当有两个时间点的时候需要首先把控件均分成两部分，然后在均分的部分中计算对应的坐标，完成绘制。当有三个时间点的时候需要均分为三部分，然后在各自的部分计算对应的坐标，完成绘制。所以得到不论时间点的个数有多少绘制的方法不会改变，需要改变的是绘制时候用到的点的坐标。其实已经可以看出，当多个点的时候需要循环一下，代码如下：
// 得到多个点时，其中每个部分的宽，itevw 也就等同与上面只有一个时间点时控件的宽
float itemw = mviewwidth / mdatalist.size();
for (int i = 0; i < mdatalist.size(); i++) {
// 完成相关计算、绘制
}
5. 完善
到这里，整个分析及绘制就差不多要结束了。
绘制虚线的方法：mlinepaint.setpatheffect(new dashpatheffect(new float[]{10, 10}, 0));
绘制虚线时遇到一个问题，在手机上不显示虚线效果，后来查到需要关闭 view 层的硬件加速：setlayertype(view.layer_type_software, null);
绘制文本时的中心点计算需要注意下
paint、bitmap 等变量的初始化建议放到初始化方法中去做，不建议在 ondraw 方法中做。
四、总结
关于自定义 view 一定要多看，多尝试。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对移动技术网的支持。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论