文章目錄

• 一. ConstraintLayout 簡介
• • 1. 引入 約束 布局
  • • ( 1 ) 約束性布局 作用 和 簡介
  • 2. 約束 簡介
  • • ( 1 ) 約束個數(shù)要求
    • ( 2 ) 約束設(shè)置 與 顯示位置
  • 3. ConstraintLayout 引入
  • • ( 1 ) ConstraintLayout 依賴添加
    • ( 2 ) ConstraintLayout 轉(zhuǎn)換 與 添加
• 二. ConstraintLayout 約束 的 基本操作
• • 1. 約束基本操作
  • • ( 1 ) Design ( 設(shè)計 ) 和 Blueprint ( 藍(lán)圖 ) 布局編輯界面
    • ( 2 ) 添加 刪除 約束
  • 3. 相對 定位 約束
  • • ( 1 ) 相對定位 簡介
    • ( 2 ) 垂直方向 約束 圖解
    • ( 3 ) 垂直方向 約束 圖解
    • ( 4 ) 開始 結(jié)束 約束 圖解
  • 4. 角度 定位 約束
  • • ( 1 ) 角度定位 約束
  • 5. 基線約束
  • • ( 1 ) 基線約束 ( app:layout_constraintBaseline_toBaselineOf )

一. ConstraintLayout 簡介

1. 引入 約束 布局

( 1 ) 約束性布局 作用 和 簡介

約束性布局簡介 ( 基于官方文檔翻譯 ) :

• 1.作用 : ConstraintLayout 布局 可用于 構(gòu)建 大型的復(fù)雜的布局 , 并且該布局可以只有一層嵌套 , 其 解決了 開發(fā) 復(fù)雜布局 , 出現(xiàn)的布局嵌套過多問題 , 減少了界面繪制的時間 ;
• 2.意義 : 使用 ConstraintLayout , 視圖層級會變得非常精簡 , 并在 Android Studio 中 進(jìn)行可以進(jìn)行可視化操作 ;
• 3.與其它布局的比較 :
  • ① 相同點 : ConstraintLayout 與 其它布局 都是 ViewGroup 的子類 , 其 擁有基本布局的公用屬性 ;
  • ② 不同點 : ConstraintLayout 的布局 , 是 通過 約束規(guī)則 實現(xiàn)的 , 其新增了很多屬性 ;
• 4.與相對布局 ( RelativeLayout ) 比較 :
  • ① 相同點 ( 所有組件都有關(guān)聯(lián) ) : ConstraintLayout 有點類似于 RelativeLayout , 所有的 組件都與 其 兄弟組件 或 父控件 有關(guān)聯(lián)關(guān)系 ;
  • ② 不同點 ( 靈活 且 編輯可視化 ) : 但是 約束布局 更加靈活 , 并且 ConstraintLayout 能在 Android Studio 布局編輯器中進(jìn)行編輯 ;
• 5.可視化操作 : 在 布局編輯器 工具中 , 可以設(shè)置所有的屬性 , 該 布局編輯器 是專門針對 ConstraintLayout 的屬性進(jìn)行開發(fā)的 ; 因此可以完全使用拖控件的方式 進(jìn)行 布局編輯 , 代替之前的 XML 編輯方法 ; ( 官方這么說的 , 感覺純屬扯淡 , 不看代碼不放心 )

---

2. 約束 簡介

( 1 ) 約束個數(shù)要求

ConstraintLayout 布局中 單個組件 約束個數(shù)要求 :

• 1.約束要求 : 在 ConstraintLayout 中 設(shè)置 View 的位置 , 至少為 該 View 設(shè)置 一個垂直 和 一個水平 約束 ;
• 2.約束內(nèi)容 : 每種約束都 代表了 該組件 與 另外一個組件 ( 或父控件 , 基線 Guideline ) 之間的 聯(lián)系方式 或 對齊方式 ;
• 3.原理 : 每個 約束 ( Constraint ) 都定義了 該 View 沿水平 或 垂直 方向的位置 , 因此 每個 View 都必須在 水平 或 垂直 方向上 含有一個約束 , 大部分情況下 都是有多個約束 ;

---

( 2 ) 約束設(shè)置 與 顯示位置

約束設(shè)置 與 顯示位置 :

• 1.編輯器位置 : 向布局編輯器中拖入 組件 , 如果不為其設(shè)置約束 , 他就會呆在鼠標(biāo)松開的位置 ;

• 2.顯示位置 : 如果 在 ConstraintLayout 中組件沒有約束 , 在設(shè)備上運行時 , 該組件將在 ( 0 , 0 ) 坐標(biāo) ( 即 左上角 ) 處顯示 ;

• 3.沒有添加約束示例 ( 官網(wǎng)示例 ) : 如下圖 , 沒有為 C 組件設(shè)置 垂直約束 , 在布局編輯器中 其 在 A 組件的下方顯示 , 但是 在設(shè)備上運行時 , C 組件 左右 與 A 組件對齊 , 但是其顯示在 屏幕的 最頂端 , 因為 C 組件沒有垂直方向的約束 ;
  

• 4.約束錯誤信息 : 盡管 組件 缺少一個約束 , 不會引起編譯錯誤 , 但是 布局編輯器中 會在工具欄中 顯示 “missing constraints” 錯誤 , 點擊 紅色感嘆號 圖標(biāo) , 會在下方的 Message 對話框中顯示出具體錯誤信息 ;
  

---

3. ConstraintLayout 引入

( 1 ) ConstraintLayout 依賴添加

ConstraintLayout 引入 :

• 1.聲明 google 庫 : 在 項目的 build.gradle 文件 中添加如下內(nèi)容 :

repositories {google() }

• 2.添加依賴 : 在 Module 的 build.gradle 文件中, 添加如下依賴 :

dependencies {implementation 'com.android.support.constraint:constraint-layout:1.1.2' }

• 3.同步工程 : 在工具欄中 , 點擊 “Sync Project with Gradle Files” 按鈕 ;
  

---

( 2 ) ConstraintLayout 轉(zhuǎn)換 與 添加

ConstraintLayout 轉(zhuǎn)換 與 添加 :

• 1.轉(zhuǎn)換布局 :
  • ① 進(jìn)入布局界面 : 在 Android Studio 打開布局文件 , 選擇 Design 視圖 ;
  • ② 轉(zhuǎn)換操作 : 打開 “Component Tree” 界面 , 右鍵點擊 根組件 , 選擇 Convert layout to ConstraintLayout 選項 , 即可將布局轉(zhuǎn)為 ConstraintLayout ;
    
• 2.添加新布局 :
  • ① 選擇添加布局文件 : 右鍵點擊 layout 目錄 , 選擇 New -> Layout resource file 選項 ;
    
  • ② 設(shè)置布局類型 : 設(shè)置布局文件類型為 “android.support.constraint.ConstraintLayout” ;
    

---

二. ConstraintLayout 約束 的 基本操作

1. 約束基本操作

( 1 ) Design ( 設(shè)計 ) 和 Blueprint ( 藍(lán)圖 ) 布局編輯界面

Design ( 設(shè)計 ) 和 Blueprint ( 藍(lán)圖 ) 界面 :

• 1.Design ( 設(shè)計 ) 界面 : 最終的效果展示界面 ;
• 2.Blueprint ( 藍(lán)圖 ) 界面 : 編輯 約束布局 的各種屬性 ;
• 3.界面切換 : 點擊 “Select Design Surface” 按鈕 , 可以 選擇 界面的三種顯示方式 ;
  • ① “Design” : 只顯示 Design ( 設(shè)計 ) 界面 ,
  • ② “Blueprint” : 只顯示 Blueprint ( 藍(lán)圖 ) 界面 ,
  • ③ “Design + Blueprint” : 同時顯示 Design ( 設(shè)計 ) 和 Blueprint ( 藍(lán)圖界面 ) ;

一般情況下 , 我們選擇第三種 “Design + Blueprint” 同時顯示 兩個布局編輯界面 ;

---

( 2 ) 添加 刪除 約束

添加 刪除 約束 :

• 1.拖入控件 : 從 “Palette” 中拖入 Button 控件到 Design 界面 中 ;
  
• 2.選中后查看其變化 : 寬高 中心點 的 圓點 用于設(shè)置 約束 , 左下角 下面 的 按鈕用于設(shè)置基線 ;
  
• 3.添加約束 : 鼠標(biāo)左鍵 按住寬高中心點的圓點 , 將其 拖動到 邊界 或 其它組件對應(yīng)位置 , 即可 為 該組件 添加對應(yīng)的 水平 或 垂直 約束 ; 將 Button 的四個方向的約束 拖到 ConstraintLayout 根布局邊界 ;
  
• 4.刪除約束 : 可以一次性刪除 所有約束 , 也可以 刪除 指定方向的約束 ;
  • ① 刪除所有約束 : 點擊 “Clear All Constraints” 按鈕 , 可以刪除所有約束 ;
  • ② 刪除指定約束 : 點擊 對應(yīng)的圓點 , 可以刪除指定方向的約束 ;
    
• 5.查看生成的代碼 :

<Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginBottom="8dp"android:layout_marginEnd="8dp"android:layout_marginStart="8dp"android:layout_marginTop="8dp"android:text="Button"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" />

• 6.margin 屬性 : 其中有 4 個 margin 屬性 , 明顯是多余的 , 可以在工具欄中 , 將 margin 的默認(rèn)值修改為 0 dp , 默認(rèn)是 8dp , 這樣自動生成的代碼中就不會帶有 margin 屬性了 ;

android:layout_marginBottom="8dp"android:layout_marginEnd="8dp"android:layout_marginStart="8dp"android:layout_marginTop="8dp"

• 7.約束屬性 : 介紹 4 個 約束屬性 ;
  • ① app:layout_constraintBottom_toBottomOf="parent" 屬性作用 :
    • 1> 被約束位置 : layout_constraintBottom 含義是 設(shè)置組件的 Bottom ( 底部 ) 位置的約束 ,
    • 2> 約束到目標(biāo)位置 : toBottomOf 的含義是 設(shè)置其 目標(biāo)約束位置 , 即 某個組件的 Bottom ( 底部 ) ,
    • 3> 屬性值 : 該屬性的值 就是 目標(biāo)約束組件 ;
  • ② app:layout_constraintEnd_toEndOf="parent" 屬性作用 :
    • 1> 被約束位置 : layout_constraintEnd 含義是 設(shè)置組件的 End ( 右部 ) 位置的約束 ,
    • 2> 約束到目標(biāo)位置 : toEndOf 的含義是 設(shè)置其 目標(biāo)約束位置 , 即 某個組件的 End ( 右部 ) ,
    • 3> 屬性值 : 該屬性的值 就是 目標(biāo)約束組件 ;
  • ③ app:layout_constraintStart_toStartOf="parent" 屬性作用 :
    • 1> 被約束位置 : layout_constraintStart 含義是 設(shè)置組件的 Start ( 左部 ) 位置的約束 ,
    • 2> 約束到目標(biāo)位置 : toStartOf 的含義是 設(shè)置其 目標(biāo)約束位置 , 即 某個組件的 Start ( 左部 ) ,
    • 3> 屬性值 : 該屬性的值 就是 目標(biāo)約束組件 ;
  • ④ app:layout_constraintTop_toTopOf="parent" 屬性作用 :
    • 1> 被約束位置 : layout_constraintTop 含義是 設(shè)置組件的 Top ( 頂部 ) 位置的約束 ,
    • 2> 約束到目標(biāo)位置 : toTopOf 的含義是 設(shè)置其 目標(biāo)約束位置 , 即 某個組件的 Top ( 頂部 ) ,
    • 3> 屬性值 : 該屬性的值 就是 目標(biāo)約束組件 ;

---

3. 相對 定位 約束

( 1 ) 相對定位 簡介

相對定位屬性 :

• 1.常用的相對定位屬性 : 下面是常用的 相對定位 約束 ;

//將 被約束組件 的 左側(cè) 約束到 目標(biāo)組件 的左側(cè) layout_constraintLeft_toLeftOf //將 被約束組件 的 左側(cè) 約束到 目標(biāo)組件 的右側(cè) layout_constraintLeft_toRightOf//將 被約束組件 的 右側(cè) 約束到 目標(biāo)組件 的左側(cè) layout_constraintRight_toLeftOf //將 被約束組件 的 右側(cè) 約束到 目標(biāo)組件 的右側(cè) layout_constraintRight_toRightOf//將 被約束組件 的 上方 約束到 目標(biāo)組件 的上方 layout_constraintTop_toTopOf //將 被約束組件 的 上方 約束到 目標(biāo)組件 的下方 layout_constraintTop_toBottomOf//將 被約束組件 的 下方 約束到 目標(biāo)組件 的上方 layout_constraintBottom_toTopOf //將 被約束組件 的 下方 約束到 目標(biāo)組件 的下方 layout_constraintBottom_toBottomOf//將 被約束組件 的 開始 約束到 目標(biāo)組件 的 結(jié)束 layout_constraintStart_toEndOf //將 被約束組件 的 開始 約束到 目標(biāo)組件 的 開始 layout_constraintStart_toStartOf//將 被約束組件 的 結(jié)束 約束到 目標(biāo)組件 的 開始 layout_constraintEnd_toStartOf //將 被約束組件 的 結(jié)束 約束到 目標(biāo)組件 的 結(jié)束 layout_constraintEnd_toEndOf

• 2.注意 : 垂直方向的約束 , 其 目標(biāo)組件的約束 也必須是垂直方向的 ; 同理 水平方向的約束 , 其目標(biāo)組件的約束 也 必須是水平方向的 ;

---

( 2 ) 垂直方向 約束 圖解

相對定位 垂直方向 約束 圖解 :

• 1.layout_constraintLeft_toLeftOf :
  
• 2.layout_constraintLeft_toRightOf :

• 3.layout_constraintRight_toLeftOf :

• 4.layout_constraintRight_toRightOf :
  

---

( 3 ) 垂直方向 約束 圖解

相對定位 垂直方向 約束 圖解 :

• 1.layout_constraintTop_toTopOf :
  
• 2.layout_constraintTop_toBottomOf :
  
• 3.layout_constraintBottom_toTopOf :
  
• 4.layout_constraintBottom_toBottomOf :
  

---

( 4 ) 開始 結(jié)束 約束 圖解

開始 結(jié)束 約束 圖解 : 該種情況下 , 與 水平方向的 方位 基本一致 ;

• 1.layout_constraintStart_toEndOf :
  
• 2.layout_constraintStart_toStartOf :
  
• 3.layout_constraintEnd_toStartOf :
  
• 4.layout_constraintEnd_toEndOf :

---

4. 角度 定位 約束

( 1 ) 角度定位 約束

角度定位 :

• 1.簡介 : 約束布局 中 的 角度定位 , 同過 設(shè)置 一個 角度 和 一個 距離 , 來確定 兩個控件的相對位置 ;
• 2.需要設(shè)置的屬性 : 角度 定位 需要設(shè)置 三個 屬性 , 分別是 ① 被約束組件 , ② 與被約束組件形成的角度 , ③ 兩個組件中心點的距離 ;

app:layout_constraintCircle="@id/button"app:layout_constraintCircleAngle="45"app:layout_constraintCircleRadius="200dp"

• 3.完整代碼示例 :

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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"tools:layout_editor_absoluteY="25dp"><!-- 被 約束 的組件 --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="被約束組件"app:layout_constraintCircle="@id/button"app:layout_constraintCircleAngle="45"app:layout_constraintCircleRadius="200dp" /><!-- 約束 目標(biāo)組件 --><Buttonandroid:id="@+id/button"android:layout_width="188dp"android:layout_height="188dp"android:text="目標(biāo)組件"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>

• 4.效果展示 :
  

• 5.角度 備注 : 目標(biāo)組件 垂直 向上 方向 是 0 度 ; 角度是 兩個 組件 中心點 連線 與 垂直向上方向的角度 ;

  • ① 正上方配置 : 如果 配置 0 度 , 被約束組件 在 目標(biāo)組件 正上方 ;
  • ② 正右方配置 : 配置 90 度 , 被約束組件 在 目標(biāo)組件 正右側(cè) ;
  • ③ 正下方配置 : 配置 180 度 , 被約束組件 在 目標(biāo)組件 正下方 ;
  • ④ 正左方配置 : 配置 270 度 , 被約束組件 在 目標(biāo)組件 正左方 ;

• 6.距離 備注 : app:layout_constraintCircleRadius 屬性配置的距離 , 是兩個組件 中心點的距離 ;

---

5. 基線約束

( 1 ) 基線約束 ( app:layout_constraintBaseline_toBaselineOf )

基線約束 :

• 1.作用 : 用于 文本對齊 , 如果 兩個視圖中有 文字 , 可以使用 基線約束 將兩個 視圖中的 文本 進(jìn)行對齊操作 ;
• 2.設(shè)置方法 : 點擊 基線約束 按鈕 , 鼠標(biāo)左鍵按住 并拖動 到另一個組件的基線 , 將該組件的基線約束到 另外 一個組件的基線上 , 該組件的 Top 和 Bottom 約束會消失 ;
  
• 3.生成代碼配置 : 基線約束 會 產(chǎn)生 app:layout_constraintBaseline_toBaselineOf="@+id/button" 代碼 ;

<Button...app:layout_constraintBaseline_toBaselineOf="@+id/button"... />

• 4.后續(xù)影響 : 被 基線約束 的組件 , 其垂直方向的約束會消失 ;
  
• 5.生成的完整代碼 ( 參考 ) :

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayoutxmlns: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"><!-- 被 基線約束 的組件 --><!-- 垂直方向約束 自動取消 --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintBaseline_toBaselineOf="@+id/button"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.2"app:layout_constraintStart_toStartOf="parent" /><!-- 基線約束 目標(biāo)組件 --><Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/button1"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>

---

總結(jié)

以上是生活随笔為你收集整理的【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。