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

最新推荐文章于 2021-05-25 16:00:58 发布

三精-大精wing

最新推荐文章于 2021-05-25 16:00:58 发布

阅读量7k

点赞数 13

分类专栏：自定义view Android自定义view 文章标签： Android 自定义view

本文链接：https://blog.csdn.net/wingichoy/article/details/50554058

版权

本文详细介绍了如何在Android中自定义一个绘制蜂窝形状的View，通过计算和循环实现六边形的排列，并添加颜色变化与文字标识。虽然纯视觉效果可能可用图片替代，但此过程旨在锻炼思维能力和自定义View的实践技巧。

摘要由CSDN通过智能技术生成

上一篇做了一个水波纹view 不知道大家有没有动手试试呢点击打开链接

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

转载请注明出处：http://blog.csdn.net/wingichoy/article/details/50554058

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

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

老规矩效果图如下：

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

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

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

 float height = (float) (Math.sqrt(3)*mLength);
        mPath.moveTo(mLength/2,0);
        mPath.lineTo(0,height/2);
        mPath.lineTo(mLength/2,height);
        mPath.lineTo((float) (mLength*1.5),height);
        mPath.lineTo(2*mLength,height/2);
        mPath.lineTo((float) (mLength*1.5),0);
        mPath.lineTo(mLength/2,0);
        mPath.close();

绘制效果：

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

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

 for(int i = 0 ; i < 3;i++) {
            int offset = mLength * 2 * i;
            mPath.moveTo(mLength / 2 + offset, 0);
            mPath.lineTo(0 + offset, height / 2);
            mPath.lineTo(mLength / 2 + offset, height);
            mPath.lineTo((float) (mLength * 1.5) + offset, height);
            mPath.lineTo(2 * mLength + offset, height / 2);
            mPath.lineTo((float) (mLength * 1.5)+offset, 0);
            mPath.lineTo(mLength / 2+offset, 0);
            mPath.close();
        }

发现效果如下