搞懂不同Layout之間的差異
主要有分為
Linear Layout(線性佈局)、
constraintlayout(約束布局)、
Relative Layout(相對佈局)、
TableLayout(表格佈局)、
AbsoluteLayout(絕對佈局)、
FrameLayout(框架佈局)，
每個Layout都有他們的優點，也有他們個別擅長的設計方式。
常用程式碼
- 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>AbsoluteLayout–絕對佈局
AbsoluteLayout 顧名思義是一種以 X 及 Y 座標來設定元件位置的一種布局方法，是以頁面的左上角作為(0,0)的座標，但目前已被 Android Studio 棄用。
常用程式碼
- 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: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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50dp"
android:layout_y="50dp"
android:text="距離X,Y 50dp"
android:textSize="50dp"
/>
</AbsoluteLayout>FrameLayout-框架佈局(~Flutter的Stack)
FrameLayout 算是佈局中最簡單的一種，與其他元件不一樣的地方在於，允許佈局中的元件可以疊在一起，最先的元件會被放在最底層而最後的元件會被放在最上面，這樣使版面在設計時可以有更多的變化
常用程式碼
- android:foreground：設置改幀佈局容器的前景圖像
- android:foregroundGravity ：設置前景圖像顯示的位置
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:gravity="bottom"
android:background="#FF7575 "
android:text="第一層"
android:textSize="100dp"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />
<TextView
android:gravity="bottom"
android:textSize="80dp"
android:text="第二層"
android:background="#FFA042"
android:layout_width="362dp"
android:layout_height="606dp" />
<TextView
android:layout_width="309dp"
android:layout_height="491dp"
android:background="#FFDC35"
android:gravity="bottom"
android:text="第三層"
android:textSize="60dp" />
<TextView
android:layout_width="244dp"
android:layout_height="408dp"
android:background=" #79FF79"
android:gravity="bottom"
android:text="第四層"
android:textSize="40dp" />
<TextView
android:layout_width="210dp"
android:layout_height="347dp"
android:background="#00FFFF"
android:gravity="bottom"
android:text="第五層"
android:textSize="20dp" />
</FrameLayout>
留言
發佈留言