一逾条、簡介
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模擬器
image
五蠢古、動態(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中直接布局一樣：
image
注意：
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);
個人總結(jié)履澳，水平有限嘶窄，如果有錯誤，希望大家能給留言指正距贷！如果對您有所幫助柄冲，可以幫忙點(diǎn)個贊！如果轉(zhuǎn)載忠蝗，希望可以留言告知并在顯著位置保留草帽團(tuán)長的署名和標(biāo)明文章出處伴网！最后覆糟，非常感謝您的閱讀！
