iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0

Constraint Layout是一個較新的Layout,使用起來較為直觀,可以直接在UI那邊拉出物件,以拖拉形式調整物件位置,也比較不用像其他的布局,會堆疊很多層。Constraint Layout每層布局比較簡單,但有時候因為太多層可能會有效能問題。

<?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=".constraint_layout">

    <TextView
        android:id="@+id/textView"
        android:layout_width="104dp"
        android:layout_height="39dp"
        android:text="TextView"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.427"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.099" />

    <Button
        android:id="@+id/button"
        android:layout_width="124dp"
        android:layout_height="47dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.116"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.335" />

    <Button
        android:id="@+id/button2"
        android:layout_width="107dp"
        android:layout_height="80dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.741"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.335" />
</androidx.constraintlayout.widget.ConstraintLayout>

呈現結果為

可以看見每個物件的長寬都是可以自己手動調整,而調整完的數值會呈現在XML裡面。

補充說明:通常會自動建立此布局,若無法使用Constraint Layout的話可以檢查Build.gradle的程式碼有沒有這一行。

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
}

今天教學到這邊,我們明天見!


上一篇
[Day22]Android Studio Relative Layout實作
下一篇
[Day24] Android Studio 介紹TextView & Edittext元件
系列文
新手學 Swift UI 與 Android Studio 的學習路程 -- 跟著我們一起踏上 App 開發之旅吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言