Android GridLayout使用案例詳解
一、簡介
GridLayout是Android4.0引入的網(wǎng)格布局,使用它可以減少布局嵌套。也算是常用,但一直沒仔細(xì)看過,今天研究一下
二、常用屬性介紹
GridLayout 使用屬性
屬性 | 作用 |
---|---|
android:columnCount | 最大列數(shù) |
android:rowCount | 最大行數(shù) |
android:orientation | GridLayout中子元素的布局方向 |
android:alignmentMode | alignBounds:對齊子視圖邊界 alignMargins :對齊子視距內(nèi)容,默認(rèn)值 |
android:columnOrderPreserved | 使列邊界顯示的順序和列索引的順序相同,默認(rèn)是true |
android:rowOrderPreserved | 使行邊界顯示的順序和行索引的順序相同,默認(rèn)是true |
android:useDefaultMargins | 沒有指定視圖的布局參數(shù)時使用默認(rèn)的邊距,默認(rèn)值是false |
item屬性
屬性 | 作用 |
---|---|
android:layout_column | 指定該單元格在第幾列顯示 |
android:layout_row | 指定該單元格在第幾行顯示 |
android:layout_columnSpan | 指定該單元格占據(jù)的列數(shù) |
android:layout_rowSpan | 指定該單元格占據(jù)的行數(shù) |
android:layout_gravity | 指定該單元格在容器中的位置 |
android:layout_columnWeight | (API21加入)列權(quán)重 |
android:layout_rowWeight | (API21加入) 行權(quán)重 |
android:layout_gravity | 作用 |
---|---|
center | 不改變元素的大小,僅居中 |
center_horizontal | 不改變大小,水平居中 |
center_vertical | 不改變大小,垂直居中 |
top | 不改變大小,置于頂部 |
left | 不改變大小,置于左邊 |
bottom | 不改變大小,置于底部 |
right | 不改變大小,置于右邊 |
start | 不改變大小,根據(jù)系統(tǒng)語言,置于開始位置 |
end | 不改變大小,置于結(jié)尾 |
fill | 拉伸元素控件,填滿其應(yīng)該所占的格子 |
fill_vertical | 僅垂直方向上拉伸填充 |
fill_horizontal | 僅水平方向上拉伸填充 |
clip_vertical | 垂直方向上裁剪元素,僅當(dāng)元素大小超過格子的空間時 |
clip_horizontal | 水平方向上裁剪元素,僅當(dāng)元素大小超過格子的空間時 |
注意
使用layout_columnSpan 、layout_rowSpan時要加上layout_gravity屬性,否則沒有效果;另外item在邊緣時寬高計算會出現(xiàn)錯誤,需要我們手動設(shè)置寬高,否則達(dá)不到想要的效果
三、平分問題
GridLayout在API21時引入了android:layout_columnWeight和android:layout_rowWeight來解決平分問題
那么在API21以前的,想要平分的話:引用兼容包
compile 'com.android.support:gridlayout-v7:25.+'
注意:
- 使用該控件,命名空間使用app
- 單獨設(shè)置app:layout_columnWeight時,這一列的所有item都設(shè)置為這個屬性,才能達(dá)到預(yù)期效果,否則這一列中設(shè)置了該屬性的item,都會被隱藏,顯示不出來
- 單獨設(shè)置app:layout_rowWeight時,沒有問題
四、小米計算器效果
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/grid_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ece7e7" app:alignmentMode="alignBounds" app:columnCount="4" app:orientation="horizontal" app:rowCount="5" app:useDefaultMargins="false" tools:context="com.strivestay.gridlayoutdemo.MainActivity"> <!-- 如果不使用 app:layout_gravity="fill", 則實際下面這個textview的寬度只是wrap_content, 實現(xiàn)不了想要的right|bottom效果; 或者, 用app:layout_columnWeight="1", 效果等同,填充滿 --> <TextView android:gravity="right|bottom" android:text="0" app:layout_columnSpan="4" app:layout_rowWeight="3" app:layout_columnWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="AC" android:textColor="#f68904" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="退格" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="/" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="*" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="7" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="8" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="9" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="—" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="4" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="5" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="6" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="+" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="1" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="2" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="3" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#f68904" android:gravity="center" android:text="=" android:textColor="#ffffff" app:layout_columnWeight="1" app:layout_rowSpan="2" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="%" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="0" app:layout_columnWeight="1" app:layout_rowWeight="1"/> <TextView android:layout_margin="1dp" android:background="#ffffff" android:gravity="center" android:text="." app:layout_columnWeight="1" app:layout_rowWeight="1"/> </android.support.v7.widget.GridLayout>
效果: 4.4.4模擬器
五、動態(tài)加載
1.xml引用GridLayout
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/grid_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ece7e7" app:orientation="horizontal" app:useDefaultMargins="false" app:alignmentMode="alignBounds" tools:context="com.strivestay.gridlayoutdemo.MainActivity"> </android.support.v7.widget.GridLayout>
2.動態(tài)添加
package com.strivestay.gridlayoutdemo; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.GridLayout; import android.view.Gravity; import android.widget.TextView; /** * GridLayout示例 * @author StriveStay * @date 2018/3/27 */ public class MainActivity extends AppCompatActivity { private String[] mStrings = {"0","AC","退格","/","*","7","8","9","—","4","5","6","+","1","2","3","=","%","0","."}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // xml布局 // setContentView(R.layout.activity_main); // 動態(tài)添加 setContentView(R.layout.activity_main2); GridLayout gridLayout = (GridLayout) findViewById(R.id.grid_layout); // 6行 4列 gridLayout.setColumnCount(4); gridLayout.setRowCount(6); for (int i = 0; i < mStrings.length; i++) { TextView textView = new TextView(this); GridLayout.LayoutParams params = new GridLayout.LayoutParams(); params.width =0; params.height =0; if(i == 0){ // 設(shè)置行列下標(biāo), 所占行列 ,比重 // 對應(yīng): layout_row , layout_rowSpan , layout_rowWeight // 如下代表: item坐標(biāo)(0,0), 占 1 行,比重為 3 ; 占 4 列,比重為 1 params.rowSpec = GridLayout.spec(0,1,3f); params.columnSpec = GridLayout.spec(0,4,1f); textView.setGravity(Gravity.BOTTOM|Gravity.RIGHT); }else{ // 設(shè)置行列下標(biāo),和比重 params.rowSpec = GridLayout.spec((i+3)/4,1f); params.columnSpec = GridLayout.spec((i+3)%4,1f); // 背景 textView.setBackgroundColor(Color.WHITE); // 字體顏色 if("AC".equals(mStrings[i])){ textView.setTextColor(Color.parseColor("#f68904")); } if("=".equals(mStrings[i])){ textView.setBackgroundColor(Color.parseColor("#f68904")); textView.setTextColor(Color.WHITE); params.rowSpec = GridLayout.spec((i+3)/4,2,1f); } // 居中顯示 textView.setGravity(Gravity.CENTER); // 設(shè)置邊距 params.setMargins(2,2,2,2); } // 設(shè)置文字 textView.setText(mStrings[i]); // 添加item gridLayout.addView(textView,params); } } }
效果和用xml中直接布局一樣:
注意:
GridLayout.spec(); 這個方法是一個重點,需要好好看一下,而且由于它有幾個重載方法,使用時也要注意。比如說下面兩個方法:
public static Spec spec(int start, int size) public static Spec spec(int start, float weight)
我剛開始就忽略了這點,本想用的是第二個帶有weight的方法,但是傳入?yún)?shù)時,沒有加上f,就調(diào)用了第一個方法,搞了半天才發(fā)現(xiàn)
所以,如果調(diào)用的是第二個方法,一定要注意float參數(shù)的表示方法,加個f,如:GridLayout.spec(0,1f);
到此這篇關(guān)于Android GridLayout使用案例詳解的文章就介紹到這了,更多相關(guān)Android GridLayout使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android sharedPreferences實現(xiàn)記住密碼功能
這篇文章主要為大家詳細(xì)介紹了Android sharedPreferences實現(xiàn)記住密碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04Webview實現(xiàn)android簡單的瀏覽器實例代碼
這篇文章主要介紹了Webview實現(xiàn)android簡單的瀏覽器實例代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02Android編程實現(xiàn)狀態(tài)保存的方法分析
這篇文章主要介紹了Android編程實現(xiàn)狀態(tài)保存的方法,結(jié)合實例形式分析了Android狀態(tài)保存的原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2017-08-08Android嵌套RecyclerView左右滑動替代自定義view
這篇文章主要介紹了Android嵌套RecyclerView左右滑動替代自定義view,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06Android編程圖片加載類ImageLoader定義與用法實例分析
這篇文章主要介紹了Android編程圖片加載類ImageLoader定義與用法,結(jié)合實例形式分析了Android圖片加載類ImageLoader的功能、定義、使用方法及相關(guān)操作注意事項,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2017-12-12Android Compose Column列表不自動刷新問題
這篇文章主要介紹了Android Compose Column列表數(shù)據(jù)更新列表不刷新的問題,總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01