Android Layout 五大佈局（LinearLayout–線性佈局） @ 嵌入式的復健筆記

Android的Layout可分為五大佈局，分別是『LinearLayout–線性佈局』，『FrameLayout–框架佈局』，『RelativeLayout–相對佈局』，『AbsoluteLayout–絕對佈局』及『TableLayout–表格佈局』，這五種佈局就像是汽車的車身骨架，而我們在Android App中常看到的那些圖片，按鈕等等元件就像是車內的配備，如同汽車需要這些骨架及配備才能完成，Android App也是一樣需要擁有這些佈局及元件才可以設計出一個符合使用者的使用界面。Android的這五大佈局不僅僅可以單獨使用，也可混搭使用，完全看設計者的需求而定。

LinearLayout

LinearLayout–線性佈局，其線性可分為水平（horizontal）及垂直（vertical），預設是水平佈局，若想要修改為垂直則可以在Layout的xml檔內透過『android:orientation=" "』來進行設定，但不管是一行（列）只能存在一個元件。

LinearLayout vertical：

當我們要設定為垂直線性（由上而下）時就在LinearLayout的屬性質裡面設定『android:orientation="vertical"』。

註：在此例中LinearLayout各項屬性內的『android:paddingLeft』是用來設定內邊距離，也就是view中content與view邊緣的距離。

<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="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin">

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

</LinearLayout>

LinearLayout_vertical

LinearLayout horizontal

當我們要設定為水平線性（由左而右）時就在LinearLayout的屬性質裡面設定『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="wrap_content"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/activity_horizontal_margin">

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

</LinearLayout>

LinearLayout_horizontal

LinearLayout vertical＆horizontal

也可以在LinearLayout中再塞一個LinearLayout，其顯示方式則會因為塞在水平或垂直中有所不同，本例子是在垂直線性中在塞一個水平線性。

<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="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin">

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

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

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

</LinearLayout>

LinearLayout vertical＆horizontal