天天看點

IDEA Android 網格布局(GridLayout)示例(電腦界面布局)

網格布局(GridLayout)

示例程式效果(實作類似vivo手機自帶電腦UI)

IDEA Android 網格布局(GridLayout)示例(電腦界面布局)

真機和模拟器運作效果:

IDEA Android 網格布局(GridLayout)示例(電腦界面布局)

簡述:

GridLayout(網格布局)和TableLayout(表格布局)有類似的地方,通俗來講可以了解為網格布局是表格布局的更新版,這樣容易了解。相對來說網格布局的優點有一下幾點:

  1. 可以設定布局中元件的排列方式。
  2. 任意自定義網格布局的行列。
  3. 可以直接設定元件位于某行某列。
  4. 可以設定元件橫跨幾行或者幾列。

主要屬性: 

設定排列對齊

android:orientation :設定排列方式,預設垂直(vertical豎直)、水準(horizontal)。

android:layout_gravity : 設定對齊方式,left ,right,center,buttom,也可以同時使用倆個,比如:top | left。

設定幾行幾列

android:rowCount=”5”//設定網格布局有5行。

android:columnCount=”5”//設定網格布局有5列。

設定元件所在的行列(注意:是從0開始計的!)

android:layout_row =”2”//設定元件位于第3行。

android:layout_column = “3” //設定該元件位于第4列。

設定元件橫跨幾行幾列

android:layout_rowSpan=”3”//縱向橫跨3行合并

android:layout_columnSpan=”3”//橫向橫跨3列合并

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/GridLayout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:columnCount="4"
            android:orientation="horizontal"
            android:layout_margin="5dp"
            android:rowCount="7">


    <TextView
            android:layout_columnSpan="4"
            android:layout_gravity="fill"
            android:layout_width="0dp"
            android:layout_margin="2dp"

            android:background="#FFFFF0"
            android:text="0"
            android:textSize="50sp" />

    <Button
            android:layout_columnSpan="1"
            android:layout_gravity="fill"
            android:layout_margin="2dp"
            android:text="mc" />

    <Button
            android:layout_columnSpan="1"
            android:layout_gravity="fill"
            android:layout_margin="2dp"
            android:text="m+" />

    <Button
            android:layout_columnSpan="1"
            android:layout_gravity="fill"
            android:layout_margin="2dp"
            android:text="m-" />

    <Button
            android:layout_columnSpan="1"
            android:layout_gravity="fill"
            android:layout_margin="2dp"
            android:text="mr" />

    <Button
            android:text="AC"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="倒退"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button

            android:text="+/-"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button

            android:text="/"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button

            android:text="7"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="8"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="9"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="*"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="4"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="5"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="6"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="-"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="1"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button

            android:text="2"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="3"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="+"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="%"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button

            android:text="0"
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="."
            android:layout_margin="2dp"
            android:layout_gravity="fill" />

    <Button
            android:text="="
            android:layout_margin="2dp"
            android:layout_gravity="fill" />


</GridLayout>