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
- 單獨(dú)設(shè)置app:layout_columnWeight時,這一列的所有item都設(shè)置為這個屬性,才能達(dá)到預(yù)期效果,否則這一列中設(shè)置了該屬性的item,都會被隱藏,顯示不出來
- 單獨(dú)設(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",
則實(shí)際下面這個textview的寬度只是wrap_content,
實(shí)現(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(); 這個方法是一個重點(diǎn),需要好好看一下,而且由于它有幾個重載方法,使用時也要注意。比如說下面兩個方法:
public static Spec spec(int start, int size) public static Spec spec(int start, float weight)
我剛開始就忽略了這點(diǎn),本想用的是第二個帶有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獲取網(wǎng)絡(luò)圖片并顯示的方法
這篇文章主要為大家詳細(xì)介紹了Android獲取網(wǎng)絡(luò)圖片并顯示的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11
Android實(shí)現(xiàn)仿美團(tuán)、順豐快遞數(shù)據(jù)加載效果
本片文章教給大家用Android實(shí)現(xiàn)美團(tuán)和順豐快遞APP的數(shù)據(jù)加載的動畫效果,有興趣的朋友跟著學(xué)習(xí)嘗試下吧。2017-12-12
Android Studio實(shí)現(xiàn)簡單音樂播放功能的示例代碼
這篇文章主要介紹了Android Studio實(shí)現(xiàn)簡單音樂播放功能的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Android仿微信進(jìn)度彈出框的實(shí)現(xiàn)方法
最近公司項目需要實(shí)現(xiàn)類似微信進(jìn)度條彈出框效果,其實(shí)現(xiàn)方法并不難,下面給大家介紹下Android仿微信進(jìn)度彈出框的實(shí)現(xiàn)方法,需要的朋友參考下吧2017-01-01
Android 中TeaPickerView數(shù)據(jù)級聯(lián)選擇器功能的實(shí)例代碼
這篇文章主要介紹了Android TeaPickerView數(shù)據(jù)級聯(lián)選擇器 ,需要的朋友可以參考下2019-06-06
Android Studio中統(tǒng)一管理版本號引用配置問題
這篇文章主要介紹了Android Studio中統(tǒng)一管理版本號引用配置問題,需要的朋友可以參考下2018-01-01
Android應(yīng)用第一次安裝成功點(diǎn)擊“打開”后Home鍵切出應(yīng)用后再點(diǎn)擊桌面圖標(biāo)返回導(dǎo)致應(yīng)用重啟問題的解決方法
這篇文章主要介紹了Android應(yīng)用第一次安裝成功點(diǎn)擊“打開”后Home鍵切出應(yīng)用后再點(diǎn)擊桌面圖標(biāo)返回導(dǎo)致應(yīng)用重啟問題的解決方法,需要的朋友可以參考下2016-11-11
Android實(shí)現(xiàn)類似網(wǎng)易新聞選項卡動態(tài)滑動效果
這篇文章主要介紹了Android實(shí)現(xiàn)類似網(wǎng)易新聞選項卡動態(tài)滑動效果的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11

