運行效果
內(nèi)容簡概
一累驮、demo分析
二、添加第三方庫支持圓角
三舵揭、添加一個Item
四谤专、添加所有Item
五、猜你喜歡
六午绳、底部模塊布局
七置侍、添加一個直播
具體內(nèi)容
一、demo分析
雖然頁面圖標(biāo)排列整齊拦焚，好像都可以用線性布局實現(xiàn)蜡坊，但如果都用線性布局，會導(dǎo)致嵌套過深赎败，導(dǎo)致性能不高秕衙，所以我們換一種布局方法。
最外層采用約束布局僵刮，中間嵌套線性布局据忘，雖然代碼寫起來麻煩一點，但是不會嵌套過深搞糕。
二勇吊、添加第三方庫支持圓角
我們先分割界面，添加引導(dǎo)線窍仰，點擊引導(dǎo)線左頭切換成百分比汉规。分別設(shè)置25%，50%驹吮，60%三條引導(dǎo)線鲫忍。
在github上搜索圓角，找到合適的第三方庫钥屈。
根據(jù)文檔提示在模塊的gradle里添加代碼，最后點擊右上角的更新坝辫。
添加完畢后篷就，點擊右上角sync now
接著添加一張圖片，在xml中根據(jù)使用方法和自己的需求設(shè)置樣式近忙。
對圖片設(shè)置約束后竭业，可根據(jù)約束調(diào)整圖片大小智润。這里我使其填充引導(dǎo)線分割的模塊，然后設(shè)置一點邊距未辆，效果如下窟绷。
三、添加一個Item
再添加一根37%的引導(dǎo)線咐柜，然后添加一個ImageView和TextView兼蜈，修改文字內(nèi)容為軟連接，調(diào)整圖片大小拙友。
Item
然后選中線性布局为狸，對其添加約束，即上下兩條引導(dǎo)線遗契，也給這個Item（線性布局）加上id辐棒。
然后細(xì)調(diào)一下各個控件，加間距牍蜂，效果如下漾根。
四、添加所有Item
由于這一個分區(qū)里都是一樣的Item鲫竞，就直接拷貝一個Item的代碼辐怕，然后修改各控件id，最后檢查一下有沒有出錯贡茅。
由于這5個Item是平鋪的秘蛇，所以把后面4個Item的左側(cè)約束刪除
接著設(shè)置最后一個Item的右側(cè)約束
然后選中五個Item，添加一個水平鏈條chain
但是現(xiàn)在兩側(cè)又沒有對齊了顶考，所以再分別刪掉左右兩個Item的左右側(cè)約束赁还，重新設(shè)置（刪一個設(shè)置一個，不要同時刪掉）驹沿。
然后隨便選一個item艘策，設(shè)置中間平分
對齊完成
然后只要一個個更改圖片資源，文本即可渊季。下一行就復(fù)制上面5個Item朋蔫，做一些相應(yīng)的更改，設(shè)置對應(yīng)的約束等......不再多說却汉。
五驯妄、猜你喜歡
拖一個ImageView和TextView到頁面，設(shè)置字體顏色和格式合砂，再調(diào)整一下控件的約束青扔，添加一條引導(dǎo)線。
六、底部模塊布局
顯然這里適合用約束布局微猖，我們新增1個約束布局谈息。（先設(shè)置1個然后復(fù)制粘貼），簡單設(shè)置一下背景顏色方便查看凛剥，同時加上id侠仇，設(shè)置約束。然后我又加了一條引導(dǎo)線犁珠，大概調(diào)了一下逻炊。
七、添加一個直播
現(xiàn)在開始完善底部模塊盲憎，先添加一張圖片嗅骄，設(shè)置上左右約束，寬為0dp饼疙。
接著添加一個TextView溺森，設(shè)置字體顏色大小和，設(shè)置左下約束與父布局對齊窑眯，加一點間距屏积。
將圖片改成圓角樣式，重新設(shè)置一下圖片資源磅甩。
再添加一個TextView炊林，右下角的文字也是同樣的設(shè)置。刪除背景顏色卷要。
再添加一個TextView渣聚，設(shè)置文字、字體顏色大小等僧叉，寬度設(shè)置為0dp奕枝。
添加一個ImageView，設(shè)置對應(yīng)的約束等瓶堕。
接下來就是復(fù)制這一個約束布局隘道，更改id。具體操作比較繁瑣就不一一上圖了郎笆，最終效果如下谭梗。
