自定义view详解，手把手带你画一个漂亮蜂窝view Android自定义view

这个效果做起来好像没什么意义，如果不加监听回调 图片就能直接替代。写这篇博客的目的是锻炼一下思维能力，以更好的面多各种自定义view需求。

本文是和代码同步写的。也就是说在写文章的时候才敲的代码。这样会显得文章有些许混乱。但是我想这样记录下来，一个自定义view的真正的制作过程，是一点一点，一步步跟着思路的改变，完善的。不可能一下子就做出一个完整的view。。技术也是这样，不可能一步登天。都是一步一步的积累。

另外，每一篇博客都是建立在之前博客的基础知识上的，如果你刚接触自定义view。可以来说说自定义view简单学习的方式这里看我以前的文章。记录了我学习自定义view的过程，而且前几篇博客或多或少犯了一些错误。这里我并不想改正博文中的错误，因为些错误是大家经常会犯的，后来的博客都有指出这些错误，以及不再犯，这是一个学习的过程。所以我想把错误的经历记录下来。等成为高手 回头看看当年的自己是多么菜。。也会有成就感。。

老规矩效果图如下：



首先画一个六边形，画之前来计算一下六边形的相关知识：



假设一个正六边形的边长为a ，因为每个角都是120° 所以可得高为根号三a ，如图所示。

有了这些信息我们就可以绘制一个六边形出来，如下：

?
绘制效果：



然后将其根据一个偏移量进行平移，就可以用循环绘制出多个六边形

这里offset是偏移量，紧挨着的话应该是偏移一个六边形的宽，宽由上图可知为 a/2+a+a/2 即 2a;

?
发现效果如下



这不对啊，很奇怪啊。。 底下空出来的一个三角形放不下我们的第二行啊。。

那么怎么办呢。。 加大offset！ 加大多少呢。。 应该多增加一个边长。。这样就正好留空了。 来试试



现在来准备画第二行....

发现我们之前path的坐标都是相对写死的。。 所以要回过头改一下，改成给定一个起点，就可以绘制出一个六边形，经过计算，得出下图



这里a代表边长。

改完之后的代码是:

?
绘制出来的效果是一样的。但是方法以及变了。

然后来画第二行，第二行起点的path应该在这里



坐标是： 2a , height/2 这里的偏移量不变。

首先将画path的方法提取出来(as快捷键ctrl + alt + m)

?
然后再给个循环，来绘制第二行的六边形

?
得到如下的效果。



现在ondraw的全部代码如下：

?
接下来对每行的个数进行一下控制。

?
对应的循环也改变，最外面套一个大循环，来控制多行绘制

?
现在整个ondraw如下。

?


好像颜色一样就不好看了。。那我们来动态改变一下颜色..

添加一个属性list来存放color

?
?
在循环中，取出颜色值

?
效果如下：



嗯。。看起来像一点样子了。。。 给中间加点文字吧。。

先给每个蜂窝编号



按上面的循环 j为行数 i为列数

研究规律发现 编号等于 j*3 + i

我们有六边形左上角的坐标xy 可以轻易的计算出中心坐标



这些都有了。开一个list存放中间的文字：

?
在初始化的时候给添加点数据

?
转自：http://www.2cto.com/kf/201601/487139.html