Android UI控件应用分享：如何实现“带分割线并且Item为正方形”的GridView

    首先说个题外话：其实到目前为止，在下写的博客并不多~但是每次写博客，基本都是因为在这之前做了某些东西，并且为之折磨了很久，看了很多杂乱不一的技术博客，最终精选出最有效、简单的方法来达到预期的效果。奠定在这样的基础之上，才决定写些东西做出分享，不想让后来者也像我这样走很多弯路，耽误太多的时间和精力不说，就算按照某些文章实现了自己的效果，但未必也是最优秀的，包括我接下来总结的这些方法也同样未必是最好的，但是至少我自己认为都比我看过的一些博客简单个七八分。

    OK！言归正传~进入正题吧——

    今天想要分享的东西就在标题上，总结起来就四个关键词：GridView + 带分割线 + 正方形 + Item . 做过主页UI的开发者都知道，包括现在的一些主流APP的主页，很多地方都应用了类似九宫格（3×3的GridView）的方式展示本APP所包含的功能入口。前段时间我开发主页的UI时，也同样有了这个需求。其实现在很多流行开发方式都采用了RecyclerView控件来实现类似ListView和GridView的功能，不得不说，这个艺术化、高度灵活的控件确实蛮厉害。可是在一些简单的需求下，使用这个控件感觉有点儿大材小用了，而且用过的开发者朋友都知道，这个控件要遵循一系列的步骤逐个实现必要的方法才行。所以，从简而言，使用GridView来显示主页的功能集合还是很有必要的。

    先来看看我最终实现的效果：

    这是一个Demo程序，所以请忽略掉重复的功能项，这里只是为了演示效果就把第一行的四个功能复制了三次。仔细观察就会发现：其实这就是一些博客里面陈述的所谓“仿支付宝主页的带分割线九宫格GridView” . 然而这里不同的是，我没有采用那些繁杂的自定义组件的方式去实现带分割线和正方形形状的Item .我还是之前强调的那句话：有些东西不要平白无故把它复杂化~ All right~下面我将分步骤阐述这两点需求如何实现：

    ① 实现GridView带分割线：

    大家都知道，在ListView里面可以通过在xml文件中设置divideHeight来轻松指定每一项的分割线，然而可悲的是，在GridView里面并没有这个属性来满足分割线要求。可是不要忘了，我们有horizontalSpacing和verticalSpacing这两个属性来指定每一项之间的间隔，好了，现在思路来了……这个间隔平时是因为Item的背景色和GirdView的背景色相同，才会看不到，然而，我们给这两者不同的背景色是不是就显示出来了呢？Bingo——就这么干！ XML如下：

    还是因为代码不多，所以就直接放图了。这里指定水平和垂直的间隔都为1dp，然而……我并没有在GridView中指定BackGround，而是直接在整个主页的根元素中指定了背景显示为灰色。其实我建议这么做……并不推崇其他博客上面说的那种将GridView单独设置背景颜色，因为假如你的Item并不是偶数个，就会和整体背景色形成反差，很难看的说！所以，建议将你的整体背景设置个颜色，一般取值为“#EBEBEB”  . 那么接下来，再来设置我们的Item属性，相关xml如下：

    如上图黄色边框圈住的部分，我这里写了个背景选择器，用来设置Item的点击效果，下面是这个背景选择器的设置代码：

    当Item没有被点击，也就是在常态时，Item的背景色为白色，而整体背景色为浅灰色，这样一来，我们设置的垂直水平间隔就发挥作用了，就能立马看到很明显的网格线。

    ② 保证Item在不同手机分辨率下显示正方形：

    其实是这样的，我最开始并没有想把Item设置成正方形，我先是在我的很Low的OPPO手机上使用Margin属性，让Item显示成了一个长方形，而且看起来效果不错，可是我却遗忘了一个重要的事情~我这里由于采用了4列的列数，是固定的列数~那么换一个不同分辨率的手机，在还是相同列数的情况下，Item肯定会被拉伸~至少肯定和我的OPPO显示不一样的效果了。我换了公司的MEIZU测试机再次运行时，发现果然是完全不同的~那画面惨不忍睹！！！于是，我赶紧想纠正一下，当时的思路是做一个动态设置，让这个GridView在不同分辨率下都给我显示一个正方形~ 我本以为很简单，就在OnCreate()方法里面获取了一下屏幕的宽度，然后用这个数据除以列数，就是Item的高度。可是我写完这几句代码之后，一运行就立马FC了~我查看了打印的信息，好像是OnMeasure的时候，出现了未知的错误。我到网上查了一下，发现确实有很多讲解如何实现正方形Item的GridView的文章，可是令我阵亡的是：绝大多数文章又是开始了长篇大论！为了实现正方形，各种自定义控件、自定义布局、重写OnMeasure……等等等等！看得我脑子一片乱！按照这种自定义方法，我只是想简单实现我的Item是正方形，就必须写这么一大堆代码吗？ 感觉实在没必要~  总之……后面想了很久，也尝试了很久。最终我放弃在OnCreate()方法里面是动态设置Item布局的高度了，我开始从GridView的适配器中的getView()方法入手~首先获取屏幕宽度，然后在返回Item之前，使用这个宽度值除以4，来指定View的高度~  事实证明这个方法是可行的。 只需要三行代码：

    这是GridView适配器里面的getView方法~只需要在return View之前，写上黄色边框圈住的部门的三句代码，就能保证Item正方形显示~首先获取屏幕宽度width，然后除以列数，最终指定gridItem的宽高即可。 细心的朋友会发现，我这里的宽度是：width/4 - 2 ,这里为什么要减去2呢？  因为你应该会想的到，如果不减去2的话，我们会看不到之前设置好的分割线，之前我们给了1dp的分割线，而这里是px的像素单位，所以要减去2来显示分割线。所以，严格来说~这个Item因为有了那1dp的分割线的存在而不是严谨的正方形了~但是由于网格线极其窄，所以可以忽略不计。 那么举一反三~你想要任何宽高比的Item，都可以在这里加以指定。从而满足不同的UI需求。

    OK！到此为止~按照上面两个步骤来~如果将列数指定为3，就可以很轻松、简单的实现仿支付宝主页的那种九宫格GridView了。而避开了为解决一个小问题，动辄自定义组件的繁琐的解决方式。

    那么就先到这里吧~关于本文如果有任何质疑或不解的地方，都可以直接留言或E-Mail我：1633580224@qq.com  

    祝愿大家：学习进步  工作顺心 生活越来越美好~~~