前言

現在Android Studio在設計版面時是用 Layout 來決定app的外觀，主要有分為Linear Layout(線性佈局)、constraintlayout(約束布局)、Relative Layout(相對佈局)、TableLayout(表格佈局)、AbsoluteLayout(絕對佈局)、FrameLayout(框架佈局)，每個Layout都有他們的優點，也有他們個別擅長的設計方式。

原件基礎樣是設定

Android Studio 已經有內建程式碼以供我們在設計版面時可以更方便且快速。

常用程式碼

• layout_height：依需要使用的範圍給大小(wrap_content)、與版面高度一樣大小(match_parent)
• layout_width：依需要使用的範圍給大小(wrap_content)、與版面寬度一樣大小(match_parent)
• text：原件內部顯示的文字
• textSize：控制文字大小
• textStyle：控制文字樣式

<TextView
            android:id="@+id/center"              //給這個原件一個名子
            android:layout_width="0dp"
            android:layout_height="match_parent" //依照原件需要使用多少的高度自動給予
            android:layout_weight="2"
            android:gravity="center"             //使文字置中
            android:text="置中"
            android:textSize="20dp"              //文字20dp
            android:textStyle="bold"/>           //文字粗體

Linear Layout–線性佈局

其線性可分為水平（horizontal）及垂直（vertical），預設是水平佈局，且不管是一行都只能存在一個元件。

常用程式碼

• orientation：設定LinearLayout是垂直(vertical)或者水平(horizontal)
• gravity：此View對於子元件的對齊位置，靠左（left）、靠右(right)、置中(center)、置頂(top)、置底(bottom)
• layout_gravity：此View對於父元件的對齊位置，靠左（left）、靠右(right)、置中(center)、置頂(top)、置底(bottom)
• layout_height：依需要使用的範圍給大小(wrap_content)、與版面高度一樣大小(match_parent)
• layout_width：依需要使用的範圍給大小(wrap_content)、與版面寬度一樣大小(match_parent)
• weight： 權重

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="置中"
        android:textSize="20sp"
        android:textStyle="bold" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:textSize="30dp"
        android:text="靠右"/>

</LinearLayout>

範例試圖↓

Relative Layout-相對佈局

是透過相對位置來設定布局內各個元件的位置，元件設定的位置可以是相對於整個RelativeLayout布局或者是相對於其他元件的位置，但是有一點要特別注意的是，每個元件至少要給予 3 個方位的相對位置，否則會報錯。

常用程式碼

• layout_alignParentBottom：將此元件對齊於佈局畫面底線，屬性值為true、false
  ######可將Bottom更改為 Right、Top、Left、元件id
• layout_marginBottom：將該元件離布局畫面底邊多少距離，屬性質為具體的像數值
  ######可將Bottom更改為 Right、Top、Left、元件id

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="165dp"
        android:layout_height="99dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="123dp"
        android:layout_marginLeft="123dp"
        android:layout_marginTop="295dp"
        android:layout_marginEnd="123dp"
        android:layout_marginRight="123dp"
        android:layout_marginBottom="337dp" />

</RelativeLayout>

範例試圖↓

constraintlayout–約束佈局

constraintlayout是基於上述 Relative Layout 更加方便使用的一種Layout，這兩種Latout十分的相像，他解決了 Relative Layout 在版面上遇到的一些問題，使排版更加的方便

所有的佈局可以在界面上通過拖動和調整來完成，這點相對 於 RelativeLayout 要方便很多。
不需要嵌套 linearLayout，直接添加控件，將控件之間的約束調整好使用。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:orientation="vertical"
   >


    <TextView
        android:id="@+id/textView"
        android:layout_width="166dp"
        android:layout_height="43dp"
        android:layout_marginTop="268dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="示範"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

TableLayout–表格佈局

整個Layout是一格最大表格，使用著可依需求將元件放在表格中的各位置，並設定在該格內的一些屬性，而TableLayout裡面是以TableRow來區別每一列，但是有一點要特別注意的是，在同一個TableLayout會以最多欄位的那個列來統一所有列都有相同的欄數，如果不想被限制住，可以透過『android:layout_span』方法來跨越欄數，藉此修改使每一列不會被固定格數。

• android:collapseColumns：将TableLayout里面指定的列隱藏，隱藏多行需用","隔开，起始值為0
• android:stretchColumns：設置指定的列為可延伸，填满剩下的多餘空白空間,填滿多行需用","隔开，起始值為0
• android:shrinkColumns：設置指定的列為可收缩的列，多行時需用","隔開，起始值為0

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:stretchColumns="1"
    android:collapseColumns="0">
    <TableRow>
    <TextView
        android:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="被隱藏了"
        android:textSize="20sp"
        android:textStyle="bold" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="30dp"
        android:text="把剩下的空位補滿"
        android:background="@color/colorAccent"/>

        </TableRow>
    
</TableLayout>