New UI-布局之GridLayout(網格布局)詳解,ui-gridlayout

來源:互聯網
上載者:User

New UI-布局之GridLayout(網格布局)詳解,ui-gridlayout

New UI-布局之GridLayout(網格布局)詳解

 ——轉載請註明出處:coder-pig,歡迎轉載,請勿用於商業用途!


小豬Android開發交流群已建立,歡迎大家加入,無論是新手,菜鳥,大神都可以,小豬一個人的

力量畢竟是有限的,寫出來的東西肯定會有很多紕漏不足,歡迎大家指出,集思廣益,讓小豬的博文

更加的詳盡,幫到更多的人,O(∩_∩)O謝謝!

小豬Android開發交流群:小豬Android開發交流群群號:421858269

新Android UI執行個體大全目錄:http://blog.csdn.net/coder_pig/article/details/42145907


本節引言:

今天要介紹的布局是Android 4.0以後引入的一個新的布局,和前面所學的TableLayout(表格布局)

有點類似,不過他有很多前者沒有的東西,也更加好用,

1)可以自己設定布局中組件的相片順序

2)可以自訂網格布局有多少行,多少列

3)可以直接設定組件位於某行某列

4)可以設定組件橫跨幾行或者幾列

另外,除了上述內容外,本節還會給大家使用gridLayout時會遇到的問題,以及如何解決低版本

sdk如何使用GridLayout的方法!接下來就開始本節的課程吧!



1)相關屬性圖:




2)使用執行個體:計算機布局的實現:

:


實現代碼:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/GridLayout1"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:rowCount="6"      android:columnCount="4"      android:orientation="horizontal">        <TextView        android:background="#FFCCCC"           android:layout_gravity = "fill"        android:layout_columnSpan="4"          android:text="0"          android:textSize="50sp"          android:layout_marginLeft="5dp"          android:layout_marginRight="5dp"      />        <Button           android:text="回退"           android:layout_columnSpan="2"          android:layout_gravity="fill"         />           <Button           android:text="清空"          android:layout_columnSpan="2"          android:layout_gravity="fill"          />            <Button           android:text="+"          />           <Button           android:text="1"          />      <Button           android:text="2"          />      <Button           android:text="3"          />      <Button           android:text="-"          />      <Button           android:text="4"          />      <Button           android:text="5"          />      <Button           android:text="6"          />      <Button           android:text="*"          />      <Button           android:text="7"          />      <Button           android:text="8"          />      <Button           android:text="9"          />      <Button           android:text="/"          />      <Button           android:layout_width="wrap_content"          android:text="."          />      <Button           android:text="0"          />       <Button           android:text="="          />  </GridLayout>  


代碼解析:

代碼很簡單,只是回退與清楚按鈕橫跨兩列,而其他的都是直接添加的,預設每個組件都是

佔一行一列,另外還有一點要注意的:

我們通過:android:layout_rowSpan與android:layout_columnSpan設定了組件橫跨

多行或者多列的話,如果你要讓組件填滿橫越過的行或列的話,需要添加下面這個屬性:

android:layout_gravity = "fill"!!!就像這個電腦顯示數位部分!



3)用法歸納:

①GridLayout使用虛細線將布局劃分為行,列和單元格,同時也支援在行,列上進行交錯排列

②使用流程:

step 1:先定義組件的對其方式 android:orientation  水平或者豎直,設定多少行與多少列

step 2:設定組件所在的行或者列,記得是從0開始算的,不設定預設每個組件佔一行一列

step 3:設定組件橫跨幾行或者幾列;設定完畢後,需要在設定一個填充:android:layout_gravity = "fill"



4)使用GridLayout要注意的地方:

因為GirdLayout是4.0後才推出的,所以minSDK版本要改為14或者以上的版本,

不然寫布局代碼的時候,這玩意就會莫名其妙地出錯,說找不到這個GridLayout,

當然,如果你要低版本相容的話,就要看下面的內容了!



5)低版本sdk如何使用GridLayout:

解決方案很簡單:只需要匯入v7包的gridlayout包即可!

v7包一般在sdk下的:sdk\extras\android\support\v7\gridlayout目錄下

如果你沒有的話,也可以到這裡下載:

gridlayout_v7_jay包下載:  http://pan.baidu.com/s/1kTC2s3l 


接著按照下面的流程完成導包:


找到sdk\extras\android\support\v7\gridlayout,點擊ok後:


導包就完成了,接著要將這個東西添加到我們的工程裡面了:



選擇點擊ok後:


看到這裡,就說明我們添加成功了!低版本也可以用GridLayout了!



但是用的時候,標籤卻是這樣寫的:!!!

<android.support.v7.widget.GridLayout>  




最後說兩句:

嗯,關於GridLayout的介紹講解就到這裡了~



聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.