原文鏈接:Android Grid Layout
原文作者:Dmytro Danylyk
譯者:蘑菇君
今天在Medium上看到這篇文章,感覺寫的不錯(cuò)。由于訪問Medium需要科學(xué)上網(wǎng),并且是英文書寫,給大家?guī)碇T多不便,故在此將其譯成中文。由于本人水平有限,其中如有紕漏或錯(cuò)誤之處,歡迎指正和交流。
GridLayout這種網(wǎng)格布局容器在某些情形下的確是能幫我們輕松實(shí)現(xiàn)想要的布局,并能減少布局的嵌套,提高性能,而我們大部分人卻經(jīng)常忽略這種布局。相信這篇文章能給大家?guī)硪恍﹩l(fā)。
Android Grid Layout
Android開發(fā)者每天都會(huì)問自己的一個(gè)問題——該用哪個(gè)布局呢?
GridLayout發(fā)布已經(jīng)有一段時(shí)間了——New Layout Widgets: Space and GridLayout.。
而在Android開發(fā)的世界里,GridLayout的地位卻略顯尷尬:
- 大部分開發(fā)者甚至都不知道這種布局的存在。
- 一些開發(fā)者了解GridLayout,但由于一些原因不使用這種布局。
- 只有少數(shù)開發(fā)者會(huì)花時(shí)間去研究GridLayout,并且經(jīng)常使用它。
我寫這篇文章的目的是因?yàn)槲艺J(rèn)為這個(gè)布局被大家遺忘了。這對(duì)它是不公平的。
為什么我們需要GridLayout?
GridLayout讓我們只用單個(gè)的根布局就能輕松地創(chuàng)建網(wǎng)格布局。
我能用嵌套的LinearLayout去實(shí)現(xiàn)網(wǎng)格布局!
是的,但是你會(huì)面臨布局層級(jí)過深而導(dǎo)致的性能問題。
我能用RelativeLayout去實(shí)現(xiàn)網(wǎng)格布局!
是的,但是RelativeLayout有一些限制,比如:
- 無法控制控件沿兩個(gè)軸同時(shí)對(duì)齊。
- 由于在RelativeLayout里不支持weight等類似的屬性,所以當(dāng)控件占用的空間比你 預(yù)計(jì)的要大時(shí),控件會(huì)溢出屏幕或重疊在一起。
換句話說,RelativeLayout不夠靈活,適應(yīng)性不夠好。
示例
讓我們來實(shí)現(xiàn)一個(gè)簡單的布局,這個(gè)布局包含了一張大圖,兩個(gè)小圖標(biāo)和圖標(biāo)旁邊的文本。
RelativeLayout
通過RelativeLayout很容易實(shí)現(xiàn)這個(gè)布局,關(guān)鍵的屬性就是layout_below
,layout_toRightOf
和layout_alignTop
。
第一眼看上去好像一切都很完美。然而,當(dāng)你用不同的文字大小去測試你的布局時(shí),問題就出現(xiàn)了。
問題 1: 無法控制控件沿兩個(gè)軸同時(shí)對(duì)齊。
單行文本應(yīng)該垂直居中于左側(cè)圖標(biāo),然而RelativeLayout無法滿足這種要求。
問題 2: 控件重疊。
多行文本會(huì)造成重疊,因?yàn)槲谋臼峭ㄟ^layout_alignTop
屬性與左側(cè)圖標(biāo)對(duì)齊的。
GridLayout
在下面的圖中,你可以看得出GridLayout能得到更好的展示結(jié)果:
- 文本垂直居中于左側(cè)圖標(biāo)。
- 多行文本會(huì)把下方的控件擠下去。
那么,這種效果是如何去實(shí)現(xiàn)的呢?首先使用GridLayout作為根布局,其次計(jì)算我們需要多少列并設(shè)置android:columnCount
屬性,在我們這個(gè)例子里,我們需要兩列。
當(dāng)你在GridLayout里定義控件時(shí),它們是一個(gè)接一個(gè)被放置的,所以無需顯式地再去定義控件的行和列。
如果你想要拉伸你的控件,讓它占據(jù)多行或者多列,你可以使用layout_columnSpan
和layout_rowSpan
屬性。
一定要記得,如果你想要你的控件占據(jù)所有可用的空間,不要設(shè)置你的控件寬度為match_parent
,而是設(shè)置成0dp,并且設(shè)置屬性layout_gravity="fill"
。
結(jié)論
如果我們使用得當(dāng),GridLayout會(huì)給我們帶來很大幫助。它能提供很好的靈活性和性能。另一方面,它也需要一些時(shí)間去學(xué)習(xí)和掌握,你通常需要花更多的時(shí)間去開發(fā)或維護(hù)這個(gè)布局。
優(yōu)點(diǎn):
- 靈活
- 單個(gè)根布局
缺點(diǎn):
- 花費(fèi)時(shí)間去學(xué)習(xí)
- 更多時(shí)間去維護(hù)