---
# System prepended metadata

title: Layout
tags: [Android Studio]

---

# Layout

## Layout比較


1. LinearLayout:調整水平、垂直布局
```xml=
<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:text="Hello World"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="I'm Amy!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>
```

2. RelativeLayout:將View設定為另一View的上/下/左/右(用id)
```xml=
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left"
        android:id="@+id/left"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right"
        android:id="@+id/right"
        android:layout_toLeftOf="@+id/left"/>
```       
---

## ConstraintLayout

類似RelativeLayout以某物件為基準，並設定相對位置，但較靈活、彈性
**-->預計使用!**

**ConstraintLayout沒有match_parent的概念
若要達成match_parent的效果，需將width/height設為0dp**


* **GuideLine->基準線**

如其名用來對齊的，不會顯示在實際畫面中。

```xml
<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="100dp" />

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@id/guideline"
    app:layout_constraintTop_toTopOf="parent" />
```
![](https://i.imgur.com/OyEILXi.png)

> 補充：View.setVisibility()中，INVISIBLE與GONE的差異
> * INVISIBLE：看不見，但佔有位置
> * GONE：看不見，也不佔有位置
> 
> -->GuildLine不會顯示也可被其他View覆蓋，就是因為其visibility設為GONE


* **bias->用百分比設定margin**

margin須設定固定數值(如20dp)，但bias可設為百分比，隨畫面大小變動

```xml=
layout_constraintHorizontal_bias="0.15"
layout_constraintHorizontal_bias="0.35"
layout_constraintHorizontal_bias="0.55"
```
![](https://i.imgur.com/YIuzFcJ.png)

* Ratio 動態調整比例

```xml=
<Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="300dp"
    app:layout_constraintDimensionRatio="w,1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
```
> app:layout_constraintDimensionRatio="w,1:1"
> -->width會隨height改變，寬:高=1:1
> app:layout_constraintDimensionRatio="h,1:4"
> -->height會隨width改變，高:寬=1:4

這個情況下，button會從距離左側300dp開始計算，且寬=高
**先決定起始點-->決定高度-->令寬=高-->畫面不夠顯示，剩下的寬被推至右方畫面外**

![](https://i.imgur.com/pTzdCto.png)


* Chain 頭尾相連形成鏈結

一般是 app:layout_constraintStart_toStartOf="parent"
鏈結時會指定自己的end/start是哪一個View的start/end
此時，可設定最左/上方的Viewlayout_constraintHorizontal_chainStyle(or Vertical)
預設為平均分配

```xml=
<Button
     android:id="@+id/button1"
     ...
     app:layout_constraintEnd_toStartOf="@+id/button2" />

 <Button
     android:id="@+id/button2"
     ...
     app:layout_constraintEnd_toStartOf="@+id/button3"
     app:layout_constraintStart_toEndOf="@+id/button1"/>

 <Button
     android:id="@+id/button3"
     ...
     app:layout_constraintStart_toEndOf="@+id/button2"/>

```
![](https://i.imgur.com/Zy1Fzrm.png)
> Source: https://julianchu.net/2017/09/16-constraintlayout.html

---
###### tags: `Android Studio`