运行效果

内容简概

一、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。具体操作比较繁琐就不一一上图了，最终效果如下。