馬超老師 ·今天要學(xué)的布局和上一節(jié)的 TableLayout 很類似，是在 Android 4.0 版本引入的布局方式。GridLayout 很有意思，自從引入之后在 Android 開發(fā)圈有以下特點(diǎn)：
- 大部分的開發(fā)者可能都不知道有這個(gè)布局方式的存在；
- 有些開發(fā)者雖然知道，但是很多時(shí)候不會(huì)去使用這個(gè)布局方式；
- 很少的開發(fā)者會(huì)花時(shí)間研究這個(gè)布局方式，也不會(huì)靈活的使用；
- 之所以會(huì)花一個(gè)章節(jié)來講，是希望大家能夠引起重視。
1. GridLayout 的特性
顧名思義 GridLayout 可以幫助你完成各式各樣的網(wǎng)格形式的布局，比如一個(gè)計(jì)算器、或者一個(gè)登陸框。如果你前面學(xué)扎實(shí)也許會(huì)質(zhì)疑，這個(gè)可以用嵌套的 LinearLayout 來代替，這也是為什么很多人不愿意用 GridView 的原因。但是你是看過慕課網(wǎng)教程的人，已經(jīng)是個(gè)成熟的新手了，這里我們需要強(qiáng)調(diào)的是**“性能”**，我們?cè)陂_發(fā)中不僅要實(shí)現(xiàn)功能，同時(shí)要注重APP的性能。GridView 相比于 LinearLayout 層級(jí)更淺，所以它擁有更好的性能表現(xiàn)。這也是為什么我希望大家能夠重視 GridLayout 的原因，好了，接下來看看如何使用。
2. GridLayout 的屬性
GridLayout的目的是將多個(gè) View / ViewGroup 按照網(wǎng)格的形式排列起來，所以大多數(shù)的屬性都是為了規(guī)范一個(gè)網(wǎng)格的樣式。
2.1 網(wǎng)格的總行數(shù)和總列數(shù)
- android:rowCount： 設(shè)置網(wǎng)格的總行數(shù)
- android:columnCount： 設(shè)置網(wǎng)格的總列數(shù)
這兩個(gè)屬性直接設(shè)置一個(gè)整形數(shù)即刻，如：
android:rowCount="3"
android:columnCount="4"
2.2 當(dāng)前 View 所在的行數(shù)、列數(shù)
- android:layout_row： 設(shè)置當(dāng)前View擺放在網(wǎng)格的第幾行
- android:layout_column： 設(shè)置當(dāng)前View擺放在網(wǎng)格的第幾列
同樣直接設(shè)置數(shù)字即可，注意這里是從0開始：
android:layout_row="4"
android:layout_column="0"
2.3 當(dāng)前 View 占據(jù)的空間
- android:layout_rowSpan： 設(shè)置當(dāng)前 View 占據(jù)幾行的空間
- android:layout_columnSpan： 設(shè)置當(dāng)前 View 占據(jù)幾列的空間
android:layout_rowSpan="2"
android:layout_columnSpan="3"
3. 通過 XML 實(shí)現(xiàn)一個(gè)登錄界面
在編寫代碼之前，我們先來一起來分析分析這個(gè)頁(yè)面，一步一步的把它拆分成一個(gè)網(wǎng)格：
- 整個(gè)頁(yè)面占滿全屏，我們知道直接把 GridView 的長(zhǎng)寬設(shè)置成
match_parent即可 - 從左到右一共分為 3 列：
- 賬號(hào)/密碼
- 下劃線輸入框
- 提交
- 第一行和第二行占滿全列，“提交”在最后一行的最后一列
基本上按照以上思路就可以把整個(gè)頁(yè)面按照網(wǎng)格分割好，接下來就可以開始 xml 代碼的編寫了：
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3"
android:useDefaultMargins="true">
<TextView
android:layout_columnSpan="3"
android:layout_gravity="center_horizontal"
android:text="用戶登錄"
android:textSize="32sp" />
<TextView
android:layout_columnSpan="3"
android:layout_gravity="left"
android:text="請(qǐng)輸入您的賬號(hào)密碼："
android:textSize="20sp" />
<TextView
android:layout_gravity="right"
android:text="賬號(hào)：" />
<EditText android:ems="10" />
<TextView
android:layout_column="0"
android:layout_gravity="right"
android:text="密碼：" />
<EditText android:ems="8" />
<Button
android:layout_row="3"
android:layout_column="2"
android:layout_gravity="bottom"
android:text="提交" />
</GridLayout>
以上代碼有幾點(diǎn)需要注意：
- 我們僅僅指定了列數(shù)，系統(tǒng)可以根據(jù)列數(shù)計(jì)算出行數(shù)；
- GridLayout 內(nèi)部的 View 在沒有設(shè)置具體的行列序號(hào)的時(shí)候，默認(rèn)按照順序依次從左往右、從上往下依次排列；
- GridLayout 非常智能，為了向大家展示它的優(yōu)勢(shì)，本代碼中也省略了大量的屬性設(shè)置，全都交給系統(tǒng)自行計(jì)算。不過在實(shí)際使用中建議還是標(biāo)注出來，這樣可讀性更高。
4. 小結(jié)
GridLayout 結(jié)合了 LinearLayout、RelativeLayout、FrameLayout、TableLayout 的當(dāng)中的一些特性，它可以實(shí)現(xiàn)一些需要多層 View 嵌套才能實(shí)現(xiàn)的布局效果。我們要想與其他開發(fā)者拉開差距，就必須在編寫UI的時(shí)候不只看效果是否達(dá)到，更需要考慮底層的性能損耗。這也是 GridView 的一大優(yōu)勢(shì)。
在實(shí)際開發(fā)中，我們往往會(huì)結(jié)合各種各樣的布局完成我們的 UI，但是很重要的一點(diǎn)是選擇你的頂層（root）布局的時(shí)候一定要深思熟慮，因?yàn)樗鼤?huì)直接影響到你的 UI 繪制性能和內(nèi)存消耗。
2025 imooc.com All Rights Reserved |