运行效果
内容简概
一、demo分析
二、添加第三方库支持圆角
三、添加一个Item
四、添加所有Item
五、猜你喜欢
六、底部模块布局
七、添加一个直播
具体内容
一、demo分析
虽然页面图标排列整齐，好像都可以用线性布局实现，但如果都用线性布局，会导致嵌套过深，导致性能不高，所以我们换一种布局方法。
最外层采用约束布局，中间嵌套线性布局，虽然代码写起来麻烦一点，但是不会嵌套过深。
二、添加第三方库支持圆角
我们先分割界面，添加引导线，点击引导线左头切换成百分比。分别设置25%，50%，60%三条引导线。
在github上搜索圆角，找到合适的第三方库。
根据文档提示在模块的gradle里添加代码，最后点击右上角的更新。
添加完毕后，点击右上角sync now
接着添加一张图片，在xml中根据使用方法和自己的需求设置样式。
对图片设置约束后，可根据约束调整图片大小。这里我使其填充引导线分割的模块，然后设置一点边距，效果如下。
三、添加一个Item
再添加一根37%的引导线，然后添加一个ImageView和TextView，修改文字内容为软连接，调整图片大小。
Item
然后选中线性布局，对其添加约束，即上下两条引导线，也给这个Item（线性布局）加上id。
然后细调一下各个控件，加间距，效果如下。
四、添加所有Item
由于这一个分区里都是一样的Item，就直接拷贝一个Item的代码，然后修改各控件id，最后检查一下有没有出错。
由于这5个Item是平铺的，所以把后面4个Item的左侧约束删除
接着设置最后一个Item的右侧约束
然后选中五个Item，添加一个水平链条chain
但是现在两侧又没有对齐了，所以再分别删掉左右两个Item的左右侧约束，重新设置（删一个设置一个，不要同时删掉）。
然后随便选一个item，设置中间平分
对齐完成
然后只要一个个更改图片资源，文本即可。下一行就复制上面5个Item，做一些相应的更改，设置对应的约束等......不再多说。
五、猜你喜欢
拖一个ImageView和TextView到页面，设置字体颜色和格式，再调整一下控件的约束，添加一条引导线。
六、底部模块布局
显然这里适合用约束布局，我们新增1个约束布局。（先设置1个然后复制粘贴），简单设置一下背景颜色方便查看，同时加上id，设置约束。然后我又加了一条引导线，大概调了一下。
七、添加一个直播
现在开始完善底部模块，先添加一张图片，设置上左右约束，宽为0dp。
接着添加一个TextView，设置字体颜色大小和，设置左下约束与父布局对齐，加一点间距。
将图片改成圆角样式，重新设置一下图片资源。
再添加一个TextView，右下角的文字也是同样的设置。删除背景颜色。
再添加一个TextView，设置文字、字体颜色大小等，宽度设置为0dp。
添加一个ImageView，设置对应的约束等。
接下来就是复制这一个约束布局，更改id。具体操作比较繁琐就不一一上图了，最终效果如下。
