天天看點

華麗麗的GridLayout-使用案例

最近在閱讀一份開源代碼時,發現有一個頁面中并不是明顯的網格樣式,但layout裡的根控件用的是GridLayout,才發現原來它是可以這樣用的,原來不一定拘泥于頁面布局是明顯的網格形式,而是需要我們來把明顯不是網格樣式的布局來當成網格看待。–這裡大家可能不一定立馬了解,不急,先繼續看看後面的内容。

因為RelativeLayout和加了weight的Linearlayout都存的onMeasure兩次的坑,如果子布局很複雜的情況下,,對界面的繪制性能會産生很大的影響,,直接的影響就是inflate方法耗時明顯。這個問題困擾了很久,一直沒有一個完美的解決辦法,直到發現GridLayout可以一定程度上替代它們。

GridLayout有三個優點:

1)不存在measure多次的問題

2)能像RelativeLayout一樣解決嵌套過深的問題

3)能夠較簡單的保證控件之間的對齊

我碰到有些四五層深度的布局,改用GridLayout後,子控件一層即解決,跟RelativeLayout一樣,這就是為什麼給它加上‘華麗麗’的原因。

下面以一個執行個體來驗證,并提供使用參考:

先看這樣一張圖,我将會用GridLayout做為根控件嵌套一層來實作這種布局:

華麗麗的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-使用案例

這裡有個技巧,如果你開發中碰到類似問題可以留意下:

雖然這裡橫向上可以明顯看成是三個控件,也就是可能會分成三列,但是為了對齊和布局友善,拆分更多列可以更好的控制布局顯示達到需要的效果。

比如下面這個:

華麗麗的GridLayout-使用案例

GridLayout本身很簡單,但還是要學會靈活使用它。