# Layout

## Layout比較

1. LinearLayout:調整水平、垂直布局

<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)

<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->基準線**

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

<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" />


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

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

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

layout_constraintHorizontal_bias="0.15"
layout_constraintHorizontal_bias="0.35"
layout_constraintHorizontal_bias="0.55"


* Ratio 動態調整比例

<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開始計算，且寬=高
**先決定起始點-->決定高度-->令寬=高-->畫面不夠顯示，剩下的寬被推至右方畫面外**


* Chain 頭尾相連形成鏈結

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

<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"/>

> Source: https://julianchu.net/2017/09/16-constraintlayout.html

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