1. 程式人生 > >Android的五種佈局模式

Android的五種佈局模式

在Android當中共有5種佈局模式,他們分別是:

LinearLayout     (線性佈局)

FrameLayout     (框架佈局)

AbsoluteLayout (絕對佈局)

RelativeLayout  (相對佈局)

TableLayout      (表格佈局)

頁面佈局是Android應用介面開發過程中很重要的一環。下面是我對他們的學習總結:

1、LinearLayout 

線性佈局,顧名思義,他是一個“一維”的排列方式,其中的元素會按固定的方向(水平或者垂直)一個一個的出現在螢幕上。android:orientation屬性決定了線性方向。

android:orientation="

horizontal"代表水平佈局

android:orientation="vertical"代表垂直佈局

線性佈局中,android:layout_weight 在垂直佈局時為豎直方向;在水平佈局時為水平方向。

TextView佔一定的空間,這一點一定要注意。

XML屬性:

android:baselineAligned
-是否允許使用者調整它內容的基線。

android:baselineAlignedChildIndex
-當一個線性佈局與另一個佈局是按基線對齊的一部分,它可以指定其內容的基線對齊方式。

android:gravity
-指定如何在該物件中放置此物件的內容(x/y座標值)。

android:orientation
-設定它內容的對其方向(橫向/豎向)。

例:

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    tools:context="com.example.a13722.apptext_20171121.MainActivity">

    <LinearLayout
        android:background="#eebed0"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#70f3ff"/>
        <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#44cef6"/>
        <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#1685a9"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#70f3ff"/>
        <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#44cef6"/>
        <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#1685a9"/>
    </LinearLayout>



</LinearLayout>


2、FrameLayout

FrameLayout是最簡單的佈局了。所有放在佈局裡的控制元件,都按照層次堆疊在螢幕的左上角。後加進來的控制元件覆蓋前面的控制元件。在FrameLayout佈局裡,定義任何空間的位置相關的屬性都毫無意義。控制元件自動的堆放在左上角。

我們先介紹一個東西:

前景影象:永遠處於最上面,就是不會被覆蓋的圖片

FrameLayout的屬性很少就兩個:

android:foreground:

-設定改幀佈局容器的前景影象

android:foregroundGravity:

-設定前景影象顯示的位置

例:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.a13722.apptext_20171121.MainActivity">
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#000000"/>

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#faff72" />
    <TextView
        android:layout_width="300dp"
        android:layout_height="60dp"
        android:background="@mipmap/play"/>

</FrameLayout>


3、AbsoluteLayout

絕對佈局AbsoluteLayout,又可以叫做座標佈局,可以直接指定子元素的絕對位置,這種佈局簡單直接,直觀性強,但是由於手機螢幕尺寸差別比較大,使用絕對佈局的適應性會比較差。一般不推薦使用。

XML屬性:


android:Layout_width

-元件寬度 

android:Layout_height

-元件高度


android:layout_x

-元件的X座標

android:layout_y

-元件的Y座標

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.a13722.apptext_20171121.MainActivity">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="134dp"
        android:layout_height="147dp"
        android:layout_x="14dp"
        android:layout_y="31dp"
        android:background="#000000" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_x="209dp"
        android:layout_y="17dp"
        android:background="#faff72" />

</AbsoluteLayout>


但是在不同的裝置上(比如我的小米手機上),實現效果就不一樣。

(注意右邊黃色方塊與右邊界的距離)

4、RelativeLayout 

RelativeLayout是一種相對佈局,控制元件的位置是按照相對位置來計算的,後一個控制元件在什麼位置依賴於前一個控制元件的基本位置,是佈局最常用,也是最靈活的一種佈局。其相關屬性如下:

android:layout_alignParentLeft 
-子類控制元件相對當前父類容器靠左

android:layout_alignParentTop 
-子類控制元件相對當前父類容器靠上

android:layout_marginLeft 
-子類控制元件距離父類容器左邊的距離

android:layout_marginTop  
-子類控制元件距離父類容器上邊的距離

android:layout_centerInParent 
-子類控制元件相對於父類容器居中

android:layout_centerHorizontal 
-子類控制元件相對於父類容器水平居中

android:layout_centerVertical 
-子類控制元件相對於父類容器垂直居中

android:layout_above 
-該控制元件位於給定id控制元件的上側

android:layout_below 
-該控制元件位於給定id控制元件的下側

android:layout_toLeftOf 
-該控制元件位於給定id控制元件的左側

android:layout_roRightOf 
-該控制元件位於給定id控制元件的右側

android:layout_alignBaseline 
-該控制元件內容與給定id控制元件的內容在一條線上

android:layout_alignBottom 
-該控制元件的底部邊緣與給定id控制元件的底部邊緣對齊

android:layout_alignRight
-該控制元件的底部邊緣與給定id控制元件的右側邊緣對齊

android:layout_alignLeft 
-該控制元件的底部邊緣與給定id控制元件的左側邊緣對齊

android:layout_alignTop 
-該控制元件的底部邊緣與給定id控制元件的頂部邊緣對齊

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.a13722.apptext_20171121.MainActivity">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#000000"
        android:layout_alignBaseline="@+id/textView3"
        android:layout_alignBottom="@+id/textView3"
        android:layout_toStartOf="@+id/textView3" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#faff72"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
    <TextView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@mipmap/play"
        android:layout_above="@+id/textView4"
        android:layout_toEndOf="@+id/textView4"
        android:layout_marginBottom="50dp" />

</RelativeLayout>


5、TableLayout

Tablelayout以行和列的形式對控制元件進行管理,每一行為一個TableRow物件,或一個View控制元件。
當為TableRow物件時,可在TableRow下新增子控制元件,預設情況下,每個子控制元件佔據一列。
有多少個子控制元件就有多少列;當為View時,該View將獨佔一行

相關XML屬性如下:

android:layout_colum
-指定該單元格在第幾列顯示

android:layout_span
-指定該單元格佔據的列數(未指定時,為1)

android:stretchColumns
-設定可伸展的列。該列可向行方向伸展,最多可佔據一整行

android:shrinkColumns
-設定可收縮的列。當該列子控制元件的內容太多,已經擠滿所在行,那麼該子控制元件的內容將往列方向顯示

android:layout_colum
-指定該單元格在第幾列顯示

android:layout_span
-指定該單元格佔據的列數(未指定時,為1)

android:stretchColumns
-設定可伸展的列。該列可向行方向伸展,最多可佔據一整行

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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"
    tools:context="com.example.a13722.apptext_20171121.MainActivity">
    <TextView
        android:layout_height="80dp"
        android:background="#faff72" />
    <TextView
        android:layout_height="80dp"
        android:background="#000000" />
    <TextView
        android:layout_height="80dp"
        android:background="@mipmap/play" />

</TableLayout>