Android Studio - Constraint Layout 約束版面佈局（十三）

Android Studio - Constraint Layout 約束版面佈局（十三）：

Constraint Layout（約束版面佈局）是從 Android Studio 2.2 開始主要的新增功能之一，ConstraintLayout 可讓您使用扁平視圖層次結構（無嵌套視圖組）創建複雜的大型佈局。它與 RelativeLayout 相似，其中所有的視圖均根據同級視圖與父佈局之間的關係進行佈局，但其靈活性要高於 RelativeLayout，並且更易於與 Android Studio 的佈局編輯器配合使用。

Constraint Layout 約束版面佈局程式

ConstraintLayout 的所有功能均可直接通過佈局編輯器的視覺化工具來使用，因為佈局 API 和佈局編輯器是專為彼此構建的。 因此，您完全可以使用 ConstraintLayout 通過拖放的形式（而非修改 XML）來構建佈局。

• 操作系統：Windows 7 64-bit 版本 開發環境：Android Studio 4.0.1 版本
• Gradle 版本：6.1.1
• 手機測試版本：API 19
• 原程式：C:\Development\Development_Android\Android_Project\ Layout - ConstraintLayout
• 程式：C:\Development\Development_Android\Android_Project\ Layout - ConstraintLayout

Constraint Layout - layout/activity_main.xml：

<?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">           <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Hello World!"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent" />         <androidx.constraintlayout.widget.Guideline         android:id="@+id/guideline"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:orientation="vertical"         app:layout_constraintGuide_begin="20dp" />       <androidx.constraintlayout.widget.Guideline         android:id="@+id/guideline2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:orientation="horizontal"         app:layout_constraintGuide_begin="20dp" />         <Button         android:id="@+id/button4"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button4"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintHorizontal_bias="0.64"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toTopOf="parent"         app:layout_constraintVertical_bias="0.241" />       <Button         android:id="@+id/button1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button1"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toStartOf="@+id/button2"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toTopOf="parent"         app:layout_constraintVertical_bias="0.051" />       <Button         android:id="@+id/button2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button2"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toStartOf="@+id/button3"         app:layout_constraintStart_toEndOf="@+id/button1"         app:layout_constraintTop_toTopOf="parent"         app:layout_constraintVertical_bias="0.051" />       <Button         android:id="@+id/button3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button3"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toEndOf="@+id/button2"         app:layout_constraintTop_toTopOf="parent"         app:layout_constraintVertical_bias="0.051" />       <TextView         android:id="@+id/textView6"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="60dp"         android:text="TextView2"         android:textSize="24sp"         app:layout_constraintStart_toStartOf="@+id/guideline"         app:layout_constraintTop_toBottomOf="@+id/textView7" />       <TextView         android:id="@+id/textView7"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="100dp"         android:text="TextView"         android:textSize="24sp"         app:layout_constraintStart_toStartOf="@+id/guideline"         app:layout_constraintTop_toTopOf="@+id/guideline2" />   </androidx.constraintlayout.widget.ConstraintLayout>

Constraint Layout 約束佈局主要屬性：

XML attributes	Description
ConstraintSet.LEFT	View 的左邊界
ConstraintSet.RIGHT	View 的右邊界
ConstraintSet.TOP	View 的頂部
ConstraintSet.BOTTOM	View 的底部
ConstraintSet.BASELINE	View 中 text 的基線
ConstraintSet.PARENT_ID	父控制項的 id，通常情況下為 ConstraintLayout
android:minWidth	最小的寬度
android:minHeight	最小的高度
android:maxWidth	最大的寬度
android:maxHeight	最大的高度
android:layout_alignParentLeft	靠左對齊，屬性值為true、false
android:layout_alignParentTop	靠上對齊，屬性值為true、false
android:layout_alignParentBottom	靠下對齊，屬性值為true、false
android:layout_centerInParent	水平及垂直置中，屬性值為true、false
android:layout_centerHorizontal	水平置中，屬性值為true、false
android:layout_centerVertical	垂直置中，屬性值為true、false
android:layout_above	將此元件置於指定元件上方
android:layout_below	將此元件置於指定元件下方
android:layout_toLeftOf	將此元件置於指定元件左方
android:layout_toRightOf	將此元件置於指定元件右方

2021年 2月 4日（Thu）天氣報告

氣溫：31.0°F / -1.0°C @ 08:00

風速：每小時 19 公里

相對濕度：百分之 60%

天氣：多雲時陰