目錄
- 介紹
- ConstraintLayout的優點
- ConstraintLayout使用方法
- Relative positioning(相對定位)
- Margins(邊距)
- Centering positioning(居中偏移)
- Circular positioning(圓心偏移)
- Visibility behavior(隱藏行爲)
- Dimension constraints(尺寸約束)
- Chains(鏈)
- Virtual Helpers objects(輔助工具)
4.1 Optimizer(計算優化)
4.2 Barrier(屏障)
4.3 Group(分組)
4.4 PlaceHolder(佔位符)
4.5 GuideLine(基準線)
1.介紹
Contrstraint Layout Library包是Android support library的一部分,現在不再維護了。Contrstraint Layout Library已經被AndroidX約束佈局庫所取代,後者是Jetpack的一部分。
ConstraintLayout類已經被androidx.constraintlayout.widget.ConstraintLayout所取代。我們建議在所有新項目中使用AndroidX庫。
您還應該考慮將現有項目遷移到AndroidX。
2 .ConstrainLayou優點
- 減少佈局的層次,減少過度繪製。
複雜的佈局一般會用RelativeLayout嵌套多層RelativeLayout,這樣會導致佈局層次
過深,性能會很低
- 適配上更靈活
ConstrainLayout可以按照比例約束控制尺寸和位置能夠更好的適配不通的機型
3. ConstraintLayout使用方法
3.1相對定位
相對定位是在ConstraintLayout中創建佈局的基本構件之一。這些約束允許控件
將給定的控件相對於另一個控件進行定位。您可以約束一控件在水平方向和者
垂直方向:
Horizontal 方向: left, right, start and end sides
Vertical 方向: top, bottom sides and text baseline
文字描述比較抽象見圖3-1
代碼如下:
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
經常用到約束屬性列表:
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
它們都採用另一個控件的引用id,或者父組件(父組件將引用父容器,
即ConstraintLayout):<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toLeftOf="parent" />
3.2Margins(邊距)
如果設置了margin,它們將應用於相應的約束(如上圖),將邊距強制設置爲目標和源端之間的空間。通常的佈局邊距屬性可以這樣 使用:
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
注意:邊界只能是正的或等於0,具體值dp。
Margins visiable=gone的控件
當位置約束目標的可見性爲gone,可以使用以下屬性指定一個margin值:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
3.3 Centering positioning(居中偏移)
ConstraintLayout水平居中顯示寫法
控件中居中的寫法爲:
<Button
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
意思是把控件的上下左右約束在佈局的上下左右,這樣就能把控件放在
佈局的中間了。相當於RelativeLayout centerInParent=true
控件居中也可以添加偏差屬性進行調整定位例如:
layout_marginLeft=”100dp“
居中後使用marginLeft=100dp,button水平居中後向右偏移100dp除了這種,還可以使用Bias(比例)
layout_constraintHorizontal_bias和layout_constraintVertical_bias
layout_constraintHorizontal_bias取值範圍爲0-1,如果是0,則Button在佈局的最左側,如果賦值1則Button在佈局的最右 側,如果爲0.5則是水平居中,如果是0.3,則傾向於左側。垂直偏移同理
3.4 Circular positioning(圓心偏移)
約束一個控件中心相對於另一個控件中心的角度和距離。
將控件定位在圓上(如下圖)。
layout_constraintCircle : references another widget id
layout_constraintCircleRadius : the distance to the other widget center
layout_constraintCircleAngle : which angle the widget should be at(in degrees, from 0 to 360)
3.5 Visibility behavior(隱藏行爲)
ConstraintLayout會對標記爲View.GONE的控件進行的特定處理。設置Gone的控件不會顯示也不是佈局本身的一部分.
如果標記爲gone他們的尺寸不會改變,但在佈局計算方面,gone的控件仍然是它的一部分,有一個重要的區別:
對於佈局傳遞,它們的維度將被認爲是零(基本上,它們將被解析爲一個點)
如果它們對其他控件有約束,它們仍然會有用,但任何邊界都將等於零
3.6 Dimension constraints(尺寸約束)
控件的尺寸可以通過四種不同方式指定:
1.使用指定的尺寸
2.使用wrap_content,讓控件自己計算大小
當控件的高度或寬度爲wrap_content時,可以使用下列屬性來控制最大、最小的高度或寬度:
android:minWidth 最小的寬度
android:minHeight 最小的高度
android:maxWidth 最大的寬度
android:maxHeight 最大的高度
注意!當ConstraintLayout爲1.1版本以下時,使用這些屬性需要加上強制約束,如下所示:
app:constrainedWidth=”true”
app:constrainedHeight=”true”
3. 使用 0dp (MATCH_CONSTRAINT)
官方不推薦在ConstraintLayout中使用match_parent,可以設置 0dp (MATCH_CONSTRAINT) 配合約束代替match_parent,舉 個例子:
4. 寬高比
當寬或高至少有一個尺寸被設置爲0dp時,可以通過屬性
layout_constraintDimensionRatio設置寬高比,
除此之外,在設置寬高比的值的時候,還可以在前面加W或H,分別指定寬度或高度限制。 例如:
app:layout_constraintDimensionRatio="H,2:3"指的是 高:寬=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 寬:高=2:3
5. Percent dimension
要使用Percent,您需要設置以下內容:
1.寬高設置爲MATCH_CONSTRAINT (0dp)
2.默認值應該設置爲% app:layout_constraintWidth_default="percent"或app:layout_constraintHeight_default="percent"
3.layout_constraintWidth_percent或layout_constraintHeight_percent屬性設置爲0到1之間的值
3.7 Chains(鏈)
Chains在單個軸(水平或垂直)中提供類似於組的行爲。另一個軸可以獨立約束。
1.create chains
如果一組控件通過雙向連接鏈接在一起,那麼它們就被認爲是一個鏈(如圖)
2.chains heads
鏈是由設置在鏈的第一個元素(鏈的“頭”)上的屬性控制的:如下圖
head是水平鏈最左邊的控件,垂直鏈最上面的控件
3.margins in chains
如果在chains上指定了margins ,則會考慮到margins。在spread chains的情況下,margins 將從分配的空間中扣除。
4.Chain Style
在第一個控件上設置屬性layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle默認是值是 CHAIN_SPREAD
CHAIN_SPREAD:默認模式
Weighted chain:如果一些控件被設置爲MATCH_CONSTRAINT,它們將分割可用空間
CHAIN_SPREAD_INSIDE:chain的兩端不會被展開
CHAIN_PACKED:該鏈的控件將被打包在一起。子元素的水平或垂直偏差屬性將影響打包元素的位置
4.Virtual Helpers objects(輔助工具)
4.1 Optimizer(計算優化)
可以通過將設置: ConstraintLayout 屬性layout_optimizationLevel來進行計算優化
取值:none : 無優化
standard : 只優化直接約束和障礙約束
direct : 優化直接約束
barrier : 優化屏障約束
chain : 優化鏈約束
dimensions : 優化尺寸測量
4.2 Barrier(屏障)
barrierDirection取值:BOTTOM END LEFT RIGHT START
4.3 Group
該類控制一組引用控件的可見性。控件通過添加到逗號分隔的id列表來引用
<androidx.constraintlayout.widget.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="TextView1,TextView2"
/>
4.4 GuideLine
Guildline像輔助線一樣,在預覽的時候幫助你完成佈局(不會顯示在界面上)。
Guildline的主要屬性:
android:orientation 垂直vertical,水平horizontal
layout_constraintGuide_begin 開始位置
layout_constraintGuide_end 結束位置
layout_constraintGuide_percent 距離頂部的百分比(orientation= horizontal時則爲距離左邊)
<android.support.constraint.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="50dp" />
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
4.5 Placeholder
Placeholder指的是佔位符。在Placeholder中可使用setContent()設置另一個控件的id,使這個控件移動到佔位符的位置。 <android.support.constraint.Placeholder
android:id="@+id/placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:content="@+id/textview"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cccccc"
android:padding="16dp"
android:text="TextView"
android:textColor="#000000"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />