文章目錄

• • • • Bias 屬性使用前提
      • 水平偏移 屬性 ( app:layout_constraintHorizontal_bias )
      • 垂直偏移 屬性 ( app:layout_constraintVertical_bias )
      • 代碼 + 測量圖 + 公式 ( 不清楚的可以對著測量圖和公式變量自己算 )

先上圖 , 該圖是本博客的總結 ;

Bias 屬性使用前提

Bias 屬性使用前提 :

• 1.水平方向 : 使用 app:layout_constraintHorizontal_bias 的前提 , 必須先設置水平方向的約束 , 使用 Left , Right 或者 Start , End 組合成的屬性約束 , 如 :

//將 被約束組件 的 左側 約束到 目標組件 的左側 app:layout_constraintLeft_toLeftOf //將 被約束組件 的 左側 約束到 目標組件 的右側 app:layout_constraintLeft_toRightOf//將 被約束組件 的 右側 約束到 目標組件 的左側 app:layout_constraintRight_toLeftOf //將 被約束組件 的 右側 約束到 目標組件 的右側 app:layout_constraintRight_toRightOf//將 被約束組件 的 開始 約束到 目標組件 的 結束 app:layout_constraintStart_toEndOf //將 被約束組件 的 開始 約束到 目標組件 的 開始 app:layout_constraintStart_toStartOf//將 被約束組件 的 結束 約束到 目標組件 的 開始 app:layout_constraintEnd_toStartOf //將 被約束組件 的 結束 約束到 目標組件 的 結束 app:layout_constraintEnd_toEndOf

• 2.垂直方向 : 使用 app:layout_constraintVertical_bias 的前提 , 必須先設置垂直方向的約束 , 使用 Top , Bottom 組合成的屬性約束 , 如 :

//將 被約束組件 的 上方 約束到 目標組件 的上方 layout_constraintTop_toTopOf //將 被約束組件 的 上方 約束到 目標組件 的下方 layout_constraintTop_toBottomOf//將 被約束組件 的 下方 約束到 目標組件 的上方 layout_constraintBottom_toTopOf //將 被約束組件 的 下方 約束到 目標組件 的下方 layout_constraintBottom_toBottomOf

---

水平偏移 屬性 ( app:layout_constraintHorizontal_bias )

注意前提 : 該屬性生效的前提是 , 必須設置水平方向上的兩個約束 ; Left ( 或 Start ) 約束 和 Right ( 或 End ) 約束都必須設置 ;

水平偏移 ( app:layout_constraintHorizontal_bias ) :

• 1.作用 : 設置水平約束后水平方向的偏移屬性 ;
• 2.官網解釋 : 當組件左側和右側 ( 或者 開始 和 結束 ) 兩邊被約束后, 兩個聯系之間的比例 ; ( 講的很概括 )
  
• 3.詳細說明 : 左側和右側被約束后 , 組件左側到被約束位置的距離 $(D_{left})$ 與 組件左側到左側被約束位置的距離 $(D_{left})$ 與 組件右側到右側被約束的距離$(D_{right})$ 之和 的 比例 ; 公式為 :

$$Bias=\frac{D_{left}}{D_{left}+D_{right}}$$

• 4.公式說明 :
  • ① 不涉及組件寬高數據 : Bias 的計算中 , 不涉及組件的寬度 ;
  • ② 左右縫隙控制 : 組件被約束后 , 肯定與被約束的位置有縫隙 , Bias 偏移屬性 , 是控制左右縫隙所占的比例的 ;
  • ③ 本質 : Bias 偏移屬性 , 其本質是對 被約束組件 左右縫隙的控制 , $D_{left}$ 是組件左側的縫隙 , $D_{right}$ 是組件右側的縫隙 ;
• 5.圖解 : 下圖中可以清晰的展示出 , 其組件的寬度與 Bias 屬性無關 , Bias 控制的是組件左側和右側的縫隙 ;

• 6.代碼示例 :

<?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"><!--被 約束 的組件組件寬高 占比 1/4--><Buttonandroid:id="@+id/button1"android:layout_width="0dip"android:layout_height="0dip"android:text="被約束組件"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.25"app:layout_constraintHeight_default="percent"app:layout_constraintHeight_percent="0.25"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintHorizontal_bias="0.25"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintVertical_bias="0.5" /></android.support.constraint.ConstraintLayout>

---

垂直偏移 屬性 ( app:layout_constraintVertical_bias )

注意前提 : 該屬性生效的前提是 , 必須設置垂直方向上的兩個約束 ; Top 約束 和 Bottom 約束都必須設置 ;

垂直偏移 ( app:layout_constraintVertical_bias ) :

• 1.作用 : 設置垂直約束后垂直方向的偏移屬性 ;
• 2.官網解釋 : 當組件頂部和底部 被約束后, 兩個聯系之間的比例 ; ( 講的很概括 )

• 3.詳細說明 : 頂部和底部被約束后 , 組件頂部到頂部被約束位置的距離 $(D_{top})$ 與 組件頂部到頂部被約束位置的距離 $(D_{top})$ 與 組件底部到底部被約束的距離$(D_{bottom})$ 之和 的 比例 ; 公式為 :

$$Bias=\frac{D_{top}}{D_{top}+D_{bottom}}$$

• 4.公式說明 :
  • ① 不涉及組件寬高數據 : Bias 的計算中 , 不涉及組件的高度 ;
  • ② 左右縫隙控制 : 組件被約束后 , 與被約束的位置肯定存在縫隙 , Bias 偏移屬性 , 是控制頂部縫隙所占的比例的 ;
  • ③ 本質 : Bias 偏移屬性 , 其本質是對 被約束組件 上下縫隙的控制 , $D_{top}$ 是組件頂部的縫隙 , $D_{bottom}$ 是組件底部的縫隙 ;
• 5.圖解 : 下圖中可以清晰的展示出 , 其組件的高度與 Bias 屬性無關 , Bias 控制的是組件頂部和底部的縫隙 ;

• 6.代碼示例 :

<?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"><!--被 約束 的組件組件寬高 占比 1/4--><Buttonandroid:id="@+id/button1"android:layout_width="0dip"android:layout_height="0dip"android:text="被約束組件"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.25"app:layout_constraintHeight_default="percent"app:layout_constraintHeight_percent="0.25"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintHorizontal_bias="0.25"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintVertical_bias="0.25" /></android.support.constraint.ConstraintLayout>

---

代碼 + 測量圖 + 公式 ( 不清楚的可以對著測量圖和公式變量自己算 )

測量圖 + 公式 :

• 1.代碼 :
  • ① 組件寬高 : 組件的寬高各占屏幕的 $\frac{1}{4}$ ;
  • ② Bias 偏移 : 其 水平 和 垂直 方向的 Bias 偏移 各是 $0.25$ ;

<?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"android:background="#FFFFFF"><!--被 約束 的組件組件寬高 占比 1/4--><TextViewandroid:id="@+id/button1"android:layout_width="0dip"android:layout_height="0dip"android:text="被約束組件"android:textColor="#000000"android:gravity="center"android:background="#00FF00"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.25"app:layout_constraintHeight_default="percent"app:layout_constraintHeight_percent="0.25"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintHorizontal_bias="0.25"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintVertical_bias="0.25" /></android.support.constraint.ConstraintLayout>

• 2.代碼 布局 對應 的 原始 截圖 :
  
• 3.對應標注圖 + 公式變量 :

• 4.圖中的標尺說明 : 圖中的尺寸 是 制圖工具自動生成的 , 不是隨便亂標的數值 , 一切數值都是準確真實的 ;
• 5.對應變量說明 :
  • ① 屏幕寬度 : $D_{screenwidth}=5130$
  • ② 屏幕高度 : $D_{screenheight}=7890$
  • ③ 組件寬度 : $D_{width}=1282$
  • ④ 組件高度 : $D_{height}=1972$
  • ⑤ 組件左側縫隙 : $D_{left}=962$
  • ⑥ 組件右側縫隙 : $D_{right}=2886$
  • ⑦ 組件上方縫隙 : $D_{top}=1479$
  • ⑧ 組件下方縫隙 : $D_{bottom}=4440$
• 6.相關公式 :
  • ① 組件寬度占屏幕 $25\%$ : $D_{screenwidth}=4D_{width}$
  • ② 組件高度占屏幕 $25\%$ : $D_{screenheight}=4D_{height}$
  • ③ app:layout_constraintHorizontal_bias = 0.25 : $$\frac{D_{left}}{D_{left}+D_{right}}=0.25$$
  • ④ app:layout_constraintVertical_bias= 0.25 : $$\frac{D_{top}}{D_{top}+D_{bottom}}=0.25$$

---

博客寫完了 , 畫圖畫的眼有點花 來張圖看看風景 ;

相關代碼地址 :

• 1.GitHub 項目展示地址 : UI_Demos_4_CSDN_Blog
• 2.本博客相關代碼地址 :
  • ① Bias 偏移布局示例 : activity_bias.xml

總結

以上是生活随笔為你收集整理的【约束布局】ConstraintLayout 偏移 ( Bias ) 计算方式详解 ( 缝隙比例 | 计算公式 | 图解 | 测量图 + 公式 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。