iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
0
Mobile Development

菜雞 Android APP 從安裝 Android Studio 到上架 Google Play系列 第 6

Day6 - RelativeLayout + ConstraintLayout 佈局使用

RelativeLayout 用程式碼對齊~~

還記得我們說過 RelativeLayout 是依照彼此的相對位子來對齊

我們先講一下元件對齊的屬性要怎麼打

android:layout_alignParentLeft="true" // 貼齊 parent 的左邊
android:layout_alignParentRight="true" // 貼齊 parent 的右邊
android:layout_alignParentTop="true" // 貼齊 parent 的上面
android:layout_alignParentBottom="true" // 貼齊 parent 的下面
android:layout_centerInParent="true" // 放在 parent 正中心

android:layout_toLeftOf="B" // 自己 去 B 的左邊
android:layout_toRightOf="B" // 自己 去 B 的右邊
android:layout_above="B" // 自己 去 B 的上面
android:layout_below="B" // 自己 去 B 的下面

android:layout_alignLeft="B" // 自己的左邊 貼齊 B 的左邊
android:layout_alignRight="B" // 自己的右邊 貼齊 B 的右邊
android:layout_alignTop="B" // 自己的上面 貼齊 B 的上面
android:layout_alignBottom="B" // 自己的下面 貼齊 B 的下面


第一步:清空程式碼,留下 RelativeLayout

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


</RelativeLayout>

加上五個 Button

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/Button_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one" />

    <Button
        android:id="@+id/Button_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="two" />

    <Button
        android:id="@+id/Button_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="three" />

    <Button
        android:id="@+id/Button_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="four" />
        
    <Button
        android:id="@+id/Button_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="five" />

</RelativeLayout>

利用上面教的語法對齊看看

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/Button_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" // 對齊 parent 左邊
        android:layout_alignParentTop="true"  // 對齊 parent 上面
        android:text="one" />

    <Button
        android:id="@+id/Button_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"  // 對齊 parent 上面
        android:layout_toRightOf="@id/Button_one" // 放在 one 的右邊
        android:text="two" />

    <Button
        android:id="@+id/Button_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"    // 對齊 parent 左邊
        android:layout_alignParentBottom="true"  // 對齊 parent 下面
        android:text="three" />

    <Button
        android:id="@+id/Button_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"   // 對齊 parent 右邊
        android:layout_alignParentBottom="true"  // 對齊 parent 下面
        android:text="four" />

    <Button
        android:id="@+id/Button_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"  // 放在 parent 正中心
        android:text="five" />

</RelativeLayout>

效果

出個畫面讓大家練習看看

若有任何問題,都歡迎留言詢問哦!!


ConstraintLayout 用程式碼對齊~~

第一步:一樣清空程式碼,只留下 ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


</androidx.constraintlayout.widget.ConstraintLayout>

第二步:讓我們加上隱形的線 ( Guideline )

  • 方法一 : 從這裡選擇 水平 或 垂直的 線( Guildline )

  • 方法二 : 從程式碼

<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"
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_50" // id 設為 guildline_50 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"  // 設定水平 或 垂直 的線
        app:layout_constraintGuide_percent="0.5"/> // 螢幕比例  


</androidx.constraintlayout.widget.ConstraintLayout>

設定一條【水平線】比例為【50%】

效果

接著我們創一個 Button 並讓他對齊這條線的上方

<?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"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_50"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <Button
        android:id="@+id/button_one"  // id 設為 button_one
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one"
        
        // 元件左側對齊 parent 左側
        app:layout_constraintLeft_toLeftOf="parent"  
        
        // 元件右側對齊 parent 右側
        app:layout_constraintRight_toRightOf="parent" 
        
        // 元件底部對齊線的上方
        app:layout_constraintBottom_toTopOf="@id/guideline_50"/> 
    

</androidx.constraintlayout.widget.ConstraintLayout>

  • 這裡有一個很重要的重點

    • 我們發現上面的 Button 同時對齊 parent 的左邊和右邊,結果是對齊在正中間。
    • 可以理解成,編譯器不確定你到底是希望左邊還是右邊,乾脆各給你一半的感覺!

將上述 Left Right Top Bottom 調換成你要的相關位置就可以了!

出個畫面讓大家做做看

嘗試製作看看,若有任何問題歡迎在下面留言。


今天我們介紹了 RelativeLayout 和 ConstraintLayout 的對齊方式,三個佈局到這裡應該都有初步的了解。

接下來我們要了解常用的元件


上一篇
Day5 - Android LinearLayout 佈局使用
下一篇
Day7 - Android App 元件屬性介紹
系列文
菜雞 Android APP 從安裝 Android Studio 到上架 Google Play30

尚未有邦友留言

立即登入留言