Android學習筆記——五大基本佈局+AbsoluteLayout

安卓中一共有6種基本佈局，分別是LinearLayout（線性佈局）、RelativeLayout（相對佈局）、AbsoluteLayout（絕對佈局）、FrameLayout（幀佈局）、TableLayout（表格佈局）和GridLayout（網格佈局）。其中，TableLayout（表格佈局）是LinearLayout（線性佈局）的子類，而AbsoluteLayout（絕對佈局）在安卓2.3之後被廢除（過期），GridLayout（網格佈局）則是安卓4.0之後新增的；

 一、LinearLayout（線性佈局）：將佈局內的控件按照水平或者垂直方向依次排列
常用屬性：
1. android:orientation：定義佈局內控件或組件的排列方向
  可選項：vertical（垂直排列） 、 horizontal（水平排列）
  當設置android:orientation="vertical"時，佈局內的控件將垂直排列成一列，每一行只顯示一個控件；
  同理，當設置android:orientation="horizontal"時，佈局內的控件將水平排列成一行，每一列只顯示一個控件；

  系統默認爲水平方向；

水平排列截圖如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".SecondActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

垂直方向截圖如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
         />

</LinearLayout>

2. android:layout_width：設置控件的寬度
  可選項：①match_parent（匹配父控件）/②fill_parent/③wrap_content（包裹內容）/④絕對數值（如：40dp）
  設置高度爲android:layout_width="match_parent"與android:layout_width="fill_parent"效果一樣，都會使佈局填充整個父控件，但從安卓2.2開始，谷歌官方推薦使用match_parent，原因是match_parent較fill_parent在語義上更準確，更易於理解；
  android:layout_width="wrap_content"，即包裹內容，也就是控件剛好包裹內容物；
  android:layout_width="40dp"，將控件所佔的寬度固定爲40dp；
3.android:layout_height：設置控件的高度
  與設置佈局的寬度類似，可選項：①match_parent（匹配父控件）/②fill_parent/③wrap_content（包裹內容）/④絕對數值（如：40dp）
4.android:layout_gravity：設置控件相對於容器的位置
  如：android:layout_gravity="bottom"表示將該控件放到容器的底部
5.android:gravity：設置組件內容物相對於自己的位置
  如：android:gravity="center"表示放置到中央
  如果該屬性是定義在佈局節點中，則該佈局中所有控件的位置都受到這個屬性的控制。
  如果該屬性出現在Button、TextView、EditText等控件中，則用來控制這些控件上的文字的位置。
  可選項有：top、bottom、left、right、center_vertical、fill_vertical 、 center、fill等等。
6.android:background：設置佈局的背景顏色或背景圖片
  如：android:background="#ff0000"表示設置背景顏色爲紅色
      android:background="@drawable/圖片id"表示設置佈局的背景圖片
【備註：】
顏色有RGB顏色格式和ARGB格式。RGB是紅綠藍三原色，而ARGB是帶alpha的三原色，即有透明度的三原色。
#FFFFFF 代表白色
#000000 代表黑色
#FFFFFFFF   完全不透明
#00FFFFFF   完全透明
#88FFFFFF   半透明

7.android:layout_weight：設置佈局的權重，即佈局在父佈局的剩餘空間中所佔的比例

如：在垂直排列的線性佈局中，加入三個文本框，分別設置高度的權重爲1,2,3，則三個文本框的高度比爲1:2:3

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ff0000"/>
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#00ff00"/>
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:background="#0000ff"/>

</LinearLayout>

效果圖：

  
二、RelativeLayout（相對佈局）：根據各個控件的相對位置來佈局
1.設置組件相對於父組件的位置
  android:layout_centerHorizontal="true"：相對於父組件水平居中顯示
  android:layout_centerVertical="true"：相對於父組件垂直居中顯示
  android:layout_centerInParent="true"：相對於父組件居中顯示


  android:layout_alignParentRight="true"：相對於父組件與父組件右對齊
  android:layout_alignParentLeft="true"：相對於父組件與父組件左對齊
  android:layout_alignParentBottom="true"：相對於父組件與父組件底部對齊
  android:layout_alignParentTop="true"：相對於父組件與父組件頂部對齊
  以上其中屬性設置中，可選項均有true和false兩種
2.設置組件相對兄弟組件的位置
  android:layout_toRightOf="@id/button"：該組件位於id爲button的組件的右邊
  android:layout_toLeftOf="@id/button"：該組件位於id爲button的組件的左邊
  android:layout_below="@id/button"：該組件位於id爲button的組件的下方
  android:layout_above="@id/button"：該組件位於id爲button的組件的上方


  android:layout_alignRight="@id/button"：該組件與id爲button的組件右對齊
  android:layout_alignLeft="@id/button"：該組件與id爲button的組件左對齊
  android:layout_alignTop="@id/button"：該組件與id爲button的組件頂部對齊
  android:layout_alignBottom="@id/button"：該組件與id爲button的組件底部對齊
3.外間距：組件與組件之間或者與佈局之間的間距——所有組件都通用的屬性
  android:layout_margin：四個方向的間距都設置
  android:layout_marginTop="20dp"：該組件與頂部的間距爲20dp
  android:layout_marginLeft="20dp"：該組件與左邊的間距爲20dp
  android:layout_marginRight="20dp"：該組件與右邊的間距爲20dp
  android:layout_marginBottom="20dp"：該組件與底部的間距爲20dp
4.內邊距：組件內的元素距離組件邊緣的位置
  android:padding="20dp"：四個方向的邊距都設置
  android:paddingLeft="20dp"：組件內的元素距離組件左邊的距離
  android:paddingRight="20dp"：組件內的元素距離組件右邊的距離
  android:paddingTop="20dp"：組件內的元素距離組件頂部的距離

  android:paddingBottom="20dp"：組件內的元素距離組件底部的距離

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/hor_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="水平居中" />

    <Button
        android:id="@+id/cen_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="居中" />

    <Button
        android:id="@+id/right_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右邊"
        android:layout_toRightOf="@id/cen_btn"
        android:layout_alignBottom="@id/cen_btn" />

</RelativeLayout>

<span style="white-space:pre">	</span><img src="https://img-blog.csdn.net/20151202154715617" style="font-family: Arial, Helvetica, sans-serif;" alt="" />

   三、AbsoluteLayout（絕對佈局）：以座標的形式來設置佈局中各個組件的位置——【已過期】
重要屬性：android:layout_x和android:layout_y
如：android:layout_x="40dp"
   android:layout_y="40dp"

默認屏幕左上角爲座標原點（0,0），第一個0代表橫座標，向右移動此值增大，第二個0代表縱座標，向下移動，此值增大。在此佈局中的子元素可以相互重疊。

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="20dp"
        android:layout_y="20dp"
        android:text="用戶名" />
    <EditText 
        android:layout_width="200dp"
		android:layout_height="wrap_content"
		android:layout_x="60dp"
		android:layout_y="20dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="20dp"
        android:layout_y="60dp"
        android:text="密碼" />
    <EditText 
        android:layout_width="200dp"
		android:layout_height="wrap_content"
		android:layout_x="60dp"
		android:layout_y="60dp"/>
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登錄"
        android:layout_x="100dp"
        android:layout_y="100dp"/>

</AbsoluteLayout>

<img src="https://img-blog.csdn.net/20151202160255376" alt="" />

   四、FrameLayout（幀佈局）：每一個組件稱爲一幀，並且後邊的組件會覆蓋前邊的組件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#ff0000"
        android:layout_gravity="center" />
    <TextView
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:background="#00ff00"
        android:layout_gravity="center" />
    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="#0000ff"
        android:layout_gravity="center" />
    <TextView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#8ee5ee"
        android:layout_gravity="center" />
    <TextView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="#ffaaaa"
        android:layout_gravity="center" />

</FrameLayout>

   五、TableLayout（表格佈局）：以表格的方式來排列控件
一個TableRow代表了一行，所有行中包含控件最多的行擁有的控件數即爲列數。直接在TableLayout加控件，控件會佔據一行。
常用的屬性如下：
  android:collapseColumns：隱藏指定的列
  android:shrinkColumns：收縮指定的列以適合屏幕，不會擠出屏幕
  android:stretchColumns：儘量把指定的列填充空白部分
  android:layout_column:控件放在指定的列

  android:layout_span:該控件所跨越的列數

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="0,1,2" >

    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"/>
    </TableRow>
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="佔據一行"/>
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"/>
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"/>
    </TableRow>
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
            />
    </TableRow>
</TableLayout>

<span style="white-space:pre">	<img src="https://img-blog.csdn.net/20151202162347888" alt="" /></span>

   六、GridLayout（網格佈局）：將容器中的控件以M行xN列的方式排列

網格佈局是從4.0開始引進的，因此使用時最小SDK版本應設爲14。

相關屬性：

     android:rowCount="5"：設置行數爲5

android:columnCount="4"：設置列數爲4

android:layout_rowSpan="2"：橫跨2列

android:layout_columnSpan="3"：豎跨3行

使用網頁佈局最經典的例子是計算器界面佈局

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="5"
    android:columnCount="4"
    android:orientation="horizontal" >
    
    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="/"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="x"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button android:text="-"/>
    <Button android:text="0"/>
    <Button android:text="."/>
    <Button android:text="+"/>
    <Button android:text="="/>

</GridLayout>