最近在閱讀一份開源代碼時,發現有一個頁面中并不是明顯的網格樣式,但layout裡的根控件用的是GridLayout,才發現原來它是可以這樣用的,原來不一定拘泥于頁面布局是明顯的網格形式,而是需要我們來把明顯不是網格樣式的布局來當成網格看待。–這裡大家可能不一定立馬了解,不急,先繼續看看後面的内容。
因為RelativeLayout和加了weight的Linearlayout都存的onMeasure兩次的坑,如果子布局很複雜的情況下,,對界面的繪制性能會産生很大的影響,,直接的影響就是inflate方法耗時明顯。這個問題困擾了很久,一直沒有一個完美的解決辦法,直到發現GridLayout可以一定程度上替代它們。
GridLayout有三個優點:
1)不存在measure多次的問題
2)能像RelativeLayout一樣解決嵌套過深的問題
3)能夠較簡單的保證控件之間的對齊
我碰到有些四五層深度的布局,改用GridLayout後,子控件一層即解決,跟RelativeLayout一樣,這就是為什麼給它加上‘華麗麗’的原因。
下面以一個執行個體來驗證,并提供使用參考:
先看這樣一張圖,我将會用GridLayout做為根控件嵌套一層來實作這種布局:
實作代碼:
<?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:background="#ffffff"
android:columnCount="5"
android:orientation="horizontal">
<include
layout="@layout/titlebar"
android:layout_width="match_parent"
android:layout_height="@dimen/d_k2_title_h_96px"
android:layout_columnSpan="5"/>
<View
android:layout_height="10dp"
android:layout_columnSpan="5"
android:background="#f3f3f3"/>
<ImageView
android:id="@+id/logo_image"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_centerVertical="true"
android:contentDescription="@string/app_name"
android:padding="10dp"/>
<TextView
android:id="@+id/name_text"
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:maxLength="20"
android:gravity="center_vertical"
android:text="Email:"
android:textColor="@color/textcolor_default"
android:textSize="@dimen/textsize_30px"/>
<TextView
android:layout_gravity="center_vertical|fill"
android:clickable="true"
android:layout_columnSpan="2"
android:drawablePadding="5dp"
android:drawableRight="@drawable/icon_arrow_right"
android:gravity="center_vertical|right"
android:onClick="bindClk"
android:padding="10dp"
android:text="change"
android:textColor="@color/textcolor_focus"
android:textSize="@dimen/textsize_28px"/>
<View
android:layout_height="10dp"
android:layout_columnSpan="5"
android:background="#f3f3f3"/>
<TextView
android:layout_width="65dp"
android:layout_height="45dp"
android:gravity="center"
android:text="Email:"
android:textColor="#333333"
android:textSize="@dimen/textsize_24px"/>
<Button
android:layout_width="50dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:background="@drawable/shape_stoke_ff6c00"
android:text="Email:"
android:textColor="@color/textcolor_focus"
android:textSize="@dimen/textsize_28px"/>
<EditText
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:background="@null"
android:digits="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLIMNOPQRSTUVWXYZ"
android:gravity="center_vertical"
android:hint="Email:"
android:maxLength="5"
android:textColor="@color/textcolor_main"
android:textSize="@dimen/textsize_28px"/>
<View
android:layout_height="10dp"
android:layout_columnSpan="5"
android:background="#f3f3f3"/>
<TextView
android:layout_width="65dp"
android:layout_height="45dp"
android:gravity="center"
android:text="Email:"
android:textColor="#333333"
android:textSize="@dimen/textsize_24px"/>
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center_vertical"
android:onClick="onWenHaoClk"
android:src="@drawable/car_ques"/>
<EditText
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:background="@null"
android:digits="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLIMNOPQRSTUVWXYZ"
android:gravity="center_vertical"
android:hint="Email:"
android:maxLength="6"
android:textColor="@color/textcolor_main"
android:textSize="@dimen/textsize_28px"/>
<View
android:layout_height="10dp"
android:layout_columnSpan="5"
android:background="#f3f3f3"/>
<TextView
android:layout_width="62.5dp"
android:layout_height="45dp"
android:gravity="center"
android:text="Email:"
android:textColor="#333333"
android:textSize="@dimen/textsize_24px"/>
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center_vertical"
android:src="@drawable/car_ques"/>
<EditText
android:layout_gravity="fill"
android:layout_columnSpan="3"
android:layout_marginRight="@dimen/margin_edge"
android:background="@null"
android:digits="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLIMNOPQRSTUVWXYZ"
android:gravity="center_vertical"
android:hint="Email:"
android:maxLength="6"
android:textColor="@color/textcolor_main"
android:textSize="@dimen/textsize_28px"/>
<View
android:layout_height="10dp"
android:layout_columnSpan="5"
android:background="#f3f3f3"/>
<TextView
android:layout_width="62.5dp"
android:layout_height="45dp"
android:gravity="center"
android:text="Email:"
android:textColor="#333333"
android:textSize="@dimen/textsize_24px"/>
<TextView
android:layout_columnSpan="2"
android:layout_marginLeft="@dimen/margin_edge"
android:layout_gravity="fill"
android:paddingRight="10dp"
android:background="@null"
android:clickable="true"
android:drawableRight="@drawable/carset_corner"
android:gravity="center_vertical"
android:hint="Email:"
android:textColor="@color/textcolor_main"
android:textSize="@dimen/textsize_28px"/>
<TextView
android:layout_columnSpan="2"
android:layout_marginRight="@dimen/margin_edge"
android:background="@null"
android:clickable="true"
android:gravity="center_vertical"
android:hint="Email:"
android:textColor="@color/textcolor_main"
android:textSize="@dimen/textsize_28px"
android:visibility="visible"/>
<TextView
android:layout_width="62.5dp"
android:layout_height="45dp"
android:gravity="center"
android:text="Email:"
android:textColor="#333333"
android:textSize="@dimen/textsize_24px"/>
<TextView
android:layout_columnSpan="4"
android:layout_gravity="fill"
android:layout_marginLeft="@dimen/margin_edge"
android:layout_marginRight="@dimen/margin_edge"
android:layout_weight="1"
android:background="@null"
android:clickable="true"
android:gravity="center_vertical"
android:hint="Email:"
android:textColor="@color/textcolor_main"
android:textSize="@dimen/textsize_28px"/>
<TextView
android:layout_width="62.5dp"
android:layout_height="45dp"
android:gravity="center"
android:text="Email:"
android:textColor="#333333"
android:textSize="@dimen/textsize_24px"/>
<TextView
android:layout_columnSpan="4"
android:layout_gravity="fill"
android:layout_marginLeft="10dp"
android:background="@null"
android:clickable="true"
android:gravity="center_vertical"
android:hint="Email:"
android:layout_marginRight="30dp"
android:drawableRight="@drawable/carset_corner"
android:textColor="@color/textcolor_main"
android:textSize="@dimen/textsize_28px"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="5"
android:layout_marginLeft="@dimen/margin_edge"
android:layout_marginTop="@dimen/margin_edge"
android:drawableLeft="@drawable/bulb"
android:gravity="center_vertical"
android:text="Email:"
android:textColor="#666666"
android:textSize="@dimen/textsize_24px"/>
<Button
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_columnSpan="5"
android:layout_gravity="bottom"
android:background="@color/color_main"
android:gravity="center"
android:onClick="saveClk"
android:text="save"
android:textColor="#ffffff"
android:textSize="@dimen/textsize_30px"/>
</GridLayout>
再上一張顯示布局邊界的圖讓大家了解我的布局思路:
這裡有個技巧,如果你開發中碰到類似問題可以留意下:
雖然這裡橫向上可以明顯看成是三個控件,也就是可能會分成三列,但是為了對齊和布局友善,拆分更多列可以更好的控制布局顯示達到需要的效果。
比如下面這個:
GridLayout本身很簡單,但還是要學會靈活使用它。