1. 程式人生 > >Android佈局之網格佈局

Android佈局之網格佈局

1. 什麼是佈局
   就是把介面中的控制元件按照某種規律擺放到指定的位置

2. 佈局的二種實現
   程式碼
   xml配置檔案:res/layout目錄下
     注:也可以同時使用xml和程式碼

3. 佈局的基本屬性
   取值範圍
   { //效果是一樣的
     fill_parent//過時
     match_parent//不過時
   }

   固定值
   {
     dp 控制元件大小
     sp 文字大小
   }

   padding 內補丁
   margin 外補丁 

   android:gravity和android:layout_gravity
   用一個TextView、文字、背景檢視效果最方便
   android:gravity:控制元件內部的元素
   android:layout_gravity:控制元件所在父元素的位置
   但父元素的水平和垂直設定的優先度更高


4. 常見佈局
   線性佈局LinearLayout
   表格佈局(幾乎不用)
   幀佈局
   
   絕對佈局
   相對佈局  RelativeLayout
   網格佈局
   RTL(幾乎不用)

 今天給大家帶來一個網格佈局:

    網格佈局 常用屬性
      GridLayout佈局相關屬性:rowCount、columnCount
      GridLayout中子控制元件相關屬性:layout_gravity="fill_horizontal|fill_vertical"

 Space標籤的作用:擋住控制元件,讓其不超出網格的範圍
      <Space android:layout_width="wrap_content" android:layout_height="wrap_content"/>
 

    以下是一個簡單的計算機網格佈局的相關程式碼,僅供參考:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="5"//這個表格佈局是多少行
    android:columnCount="4"//這個表格佈局有多少列

    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="/"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="x"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal"//自動行填充
        android:layout_columnSpan="2"
        android:text="0"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="."/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_vertical"//自動列填充
        android:layout_rowSpan="2"//佔多少行
        android:text="+"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal"
        android:layout_columnSpan="3"//佔幾列
        android:text="="/>
<Space />
</GridLayout>

效果圖如下: