Android的佈局種類

• Android的佈局方式有下列幾種，其中的線性佈局已在前節介紹，本節則繼續介紹其它的版面佈局。
• LinearLayout(線性佈局)
• TableLayout(表格佈局)
• GridLayout(格子佈局)
• FrameLayout(框架佈局)
• RelativeLayout(相對佈局)
• ConstraintLayout(約束佈局)

TableLayout(表格佈局)

表格佈局:將元件/佈局擺放成表格樣式

在一個TableLayout中，可以擺放多個的TableRow。

TableLayout內的屬性

android:stretchColumns：延伸指定行號以填滿剩餘的佈局空間。

例如：android:stretchColumns="0,2"

android:shrinkColumns ：縮小指定行號的元件，以符合佈局大小。

例如：android:shrinkColumns= "0,2"

android:collapseColumns ：隱藏指定行號的元件。

例如：android:collapseColumns= "0,2" 

TableRow內的元件屬性

android:layout_column：標記此欄位在表格中的第幾格(從0開始)

android:layout_span :設定此元件要橫跨的格數 (包含本身格子計數)

下面左圖使用TableLayout如何做?

GridLayout(格子佈局)

類似TableLayout + LinearLayout

GridLayout內的屬性：

android:columnCount：設定行數

android:rowCount：設定列數

android:orientation：自動排列方式(vertical, horizontal)

• 預設佈局內之元件自動排列方式為水平，達到android:columnCount設定個數時，再往下一列排列

範例

android:layout_column：設定元件在第幾行(從0開始)

android:layout_row ：設定元件在第幾列(從0開始)

android:layout_gravity：設定元件在格子內的對齊方式

範例：

android:layout_rowSpan：設定垂直擴展格子數

android:layout_columnSpan：設定水平擴展格子數

範例

android:layout_rowWeight：設定元件在垂直方向的權重

android:layout_columnWeight：設定元件在水平方向的權重

要使用這兩個屬性，須將minSdkVersion設在API 21以後（含）的版本。

範例：

FrameLayout(框架佈局)

• 框架佈局，單一元件的佈局方式，可容納多個元件，元件會一個個疊在佈局上

• 通常用於處理畫面元件層疊時，如:照相機軟體開啟時，畫面上有多個按鈕層疊在影像上

範例

RelativeLayout(相對佈局)

• 相對佈局內的元件的呈現方式是依據元件/佈局設定相對的目標元件的相對位置做排列。

• RelativeLayout內的屬性

此類屬性值的設定為對齊佈局（父物件）。

android:layout_alignParentRight：設定此元件右邊線與佈局右邊線是否對齊  

android:layout_alignParentTop：設定此元件頂部邊線與佈局頂部邊線是否對齊

android:layout_alignParentBottom：設定此元件底部邊線與佈局底部邊線是否對齊

android:layout_alignParentLeft：設定此元件左邊線與佈局左邊線是否對齊 

android:layout_centerHorizontal：設定此元件是否放置於佈局的水平置中

android:layout_centerInParent：設定此元件是否放置於佈局的正中間

android:layout_centerVertical：設定此元件是否放置於佈局的垂直置中

此類屬性的值需設定為某個元件的ID

android:layout_above：設定此元件擺放於此屬性值設定的元件上方

android:layout_below：設定此元件擺放於此屬性值設定的元件下方

android:layout_toLeftOf：設定此元件擺放於此屬性值設定的元件左方 

android:layout_toRightOf：設定此元件擺放於此屬性值設定的元件右方

android:layout_alignBaseline：設定此元件基準線與此屬性值設定的元件基準線對齊

android:layout_alignLeft：設定此元件的左邊線與此屬性值設定的元件左邊線對齊

android:layout_alignRight：設定此元件的右邊線與此屬性值設定的元件右邊線對齊

android:layout_alignBottom:設定此元件底部邊線與此屬性值設定的元件底部邊線對齊

android:layout_alignTop:設定此元件頂部邊線與此屬性值設定的元件頂部邊線對齊

下面左圖使用RelativeLayout如何做??

ConstraintLayout（約束佈局）

Constraints概述

在ConstraintLayout中，要定義View的位置，您必須為View添加至少一個水平和一個垂直約束。

每個View必須對每個軸至少有一個約束，但通常需要更多的約束。

當您將View拖放到佈局編輯器中時，即使沒有約束，它仍然保留在您離開的位置。但是，這只是使編輯更容易; 如果View在設備上運行佈局時沒有約束，則會繪製在位置[0,0]（左上角）。

添加及刪除constraint

當您添加一個View到ConstraintLayout時，它會顯示一個邊框，每個角落上都有方形調整點，每邊都有圓形約束把手。

點選View，然後點按住其中一個約束把手到可用的錨點（可能是另一個View的邊緣，佈局的邊緣或導引線）。當您釋放時，即完成約束。（會有預設的邊距，分隔兩個View）。

要刪除約束，請選擇該View，然後單擊約束把手。或者通過選擇View，然後單擊刪除限制，來刪除所有約束。

不同種類的constraint方式

Parent位置：將View的一邊約束到佈局相對應的邊緣。

順序位置：定義兩個View的垂直或水平的順序，在下圖(B)，B被限制為總是在A的右邊，C被約束在A以下。然而，這些約束並不意味著對齊，所以B仍然可以上下移動。。

對準：將View的邊緣（垂直或水平）對齊到另一個View的同一邊緣。在下圖(C)中，B的左側與A的左側對齊。如果要對齊View A的中心，請在兩邊創建約束。

基線對齊：將視圖的文本基線對準另一個視圖的文本基線

約束到導引線：添加一個看不到但可以約束View的垂直或水平導引線，您可以根據相對於佈局邊緣的dp單位或百分比，將佈局中的導引線放在佈局中。

調整約束的偏移

當您向View的兩側添加約束（如果View的大小為“fixed”或“wrap content”）時，View將在兩個約束之間居中，預設情況為50％。您可以通過拖動偏移滑軸或拖動View來調整偏移。

如果您想要使View自動擴展其大小以滿足約束，請將其大小切換為“match constraints”。

您可以通過點按上圖中的符號來更改高度和寬度的計算方式。這些符號表示如下的大小模式：

fixed：您可以在下面的輸入框中，指定一個特定的尺寸，或者直接在編輯器中調整View的大小。

wrap content：View擴展到適應其內容的大小。

match contraints：View盡可能擴展以滿足每個約束,但可以使用以下屬性和值修改該行為（只有將View寬度設置為匹配約束時，這些屬性才會生效）：

layout_constraintWidth_min

layout_constraintWidth_max

注意：您不能在ConstraintLayout中使用的任何View使用match_parent ，而是使用“match constraints”（0dp）。

調整View邊距

通過單擊工具欄中的邊距，選擇要添加到佈局每個View的默認邊距。您對默認邊距所做的任何更改僅適用於您從此添加的View。

您可以通過單擊表示每個約束的行上的數字來控制“ 屬性”窗口中每個View的邊距。

註：本教學網頁的部分內容取自Google Android官方網站。

[ 回頂端 ]