可以使用的各種約束:
- 1.Relative positioning
- 2.Margins
- 3.Centering positioning
- 4.Circular positionning
- 5.Visibility behavior
- 6.Dimension constraints
- 7.Chains
- 9.Virtual Helpers objects
- 9.Optimizer
注意:約束中不能循環(huán)依賴
1.Relative positioning
相對位置是在ConstraintLayout創(chuàng)建Layout基本模塊之一枪狂。這些約束允許你放置一個相對于另一個的控件笨觅。你可以約束一個控件在水平和垂直方向质和。
基本概念是約束控件的一邊對于另外一個控件的另一邊擅耽。
舉例:
把Button B放到位于 Button A的右邊:
布局可以這么寫:
<Button android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:minHeight="50dp"
/>
<Button
android:id="@+id/buttonB"
app:layout_constraintLeft_toRightOf="@id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:minHeight="50dp"
/>
這告訴系統(tǒng)我們想要把Button B的左邊約束到Button A的右邊毫深。這樣的位置約束意味著系統(tǒng)將有兩邊使用相同的位置蹄溉。這個不是很明白究恤?崩侠??那先?
下面是可用約束的清單:
- 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
They all take a reference id to another widget, or the parent(這將指向父控件农猬,比如ConstraintLayout)
示例:
<Button
android:id="@+id/buttonB"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:minHeight="50dp"
/>
2.Margins
如果設(shè)置了margins,它們會應用到對應的約束,將margin強轉(zhuǎn)成target和source side之前的space售淡∈⑾眨可用于這種效果的的layout maigin 屬性有:
- android:layout_marginStart
- android:layout_marginEnd
- android:layout_marginLeft
- android:layout_marginTop
- android:layout_marginRight
- android:layout_marginBottom
注意:margin只能為正或者0.
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:minHeight="50dp"
/>
<Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintLeft_toRightOf="@id/buttonA"
android:layout_marginStart="50dp"
android:minHeight="50dp"
/>
</>
設(shè)置 ButtonB 距離 buttonA 50dp
和GONE 控件相關(guān)聯(lián)的Margins
如果約束目標控件的Visibility是 View.GONE,你可以使用下面的屬性:
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:visibility="gone"
android:minHeight="50dp"
/>
<Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintLeft_toRightOf="@id/buttonA"
app:layout_goneMarginStart="50dp"
android:minHeight="50dp"
/>
</>
在buttonA 的Visibility設(shè)置為GONE的時候勋又,layout_goneMarginStart會其作用苦掘,其他時候不起作用。
3.Centering positioning
ConstraintLayout 有用的一方面是它如何處理"不可能"的約束楔壤。例如:
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:minHeight="50dp"
/>
</>
這兩個約束不能同時滿足鹤啡,除非ConstraintLayout 的尺寸和Button一樣。
這個例子的實際效果是居中處理了蹲嚣。
在這個例子中递瑰,約束行為相反使控件邊距平等的拆分,所以最后控件在父容器的中央隙畜。
Bias偏向
默認處理相反的約束是讓控件居中抖部,但可以調(diào)整控件位置偏向一邊使用bias屬性:
- layout_constraintHorizontal_bias
-
layout_constraintVertical_bias
舉例:
下面會讓左邊是30%的偏向而不是默認的50%。因此左邊會更短议惰,從而控件會偏向左邊慎颗。
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:minHeight="50dp"
/>
</>
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)
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:minHeight="50dp"
/>
<Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintCircle="@id/buttonA"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="100dp"
android:minHeight="50dp"
/>
</>
5.Visibility behavior
ConstraintLayout 可以將處理控件將它標志為View.GONE.
GONE 的控件不會被展示也不是layout的一部分≡撕迹控件的尺寸不會被修改如果被標志為GONE.
但根據(jù)layout計算夫啊,GONE控件仍然是ConstraintLayout 的一部分,有一個重要的區(qū)別:
- 對于layout辆憔,它們的尺寸將被認為是0(基本上撇眯,它們會被處理成一個點)
- 如果它們有其他控件的約束,它們會被慎重處理虱咧,但任何margin都會被處理成0.
這樣的行為允許創(chuàng)建你需要臨時將控制標志為GONE的layout熊榛,而并不會打亂布局。處理簡單的layout 動畫會有用彤钟。
注意:margin用的是控件B定義的margin即使關(guān)聯(lián)到控件A(圖7所示)来候。在某些情況這可能不是你想要的margin(例如:控件A距離容器有100dp的margin,B距離A有16dp逸雹,當A為GONE時营搅,B離容器有16dp)云挟。因此,你可以用另一個margin转质,GONE_Margin园欣。前面有講過。
6.Dimensions constraints(尺寸約束)
ConstraintLayout最小尺寸
你可以給ConstraintLayout 定義最小和最大尺寸:
- android:minWidth set the minimum width for the layout
- android:minHeight set the minimum height for the layout
- android:maxWidth set the maximum width for the layout
- android:maxHeight set the maximum height for the layout
當ConstraintLayout 的尺寸設(shè)置成WRAP_CONTENT休蟹,最小和最大尺寸將會被用到沸枯。
控件尺寸約束
控件的尺寸可以用android:layout_width 和android:layout_height不同的三種方式定義:
- 使用具體尺寸(例如123dp)
- 使用WRAP_CONTENT,這樣控件會計算自己的尺寸
- 使用0dp赂弓,這等同于 "MATCH_CONSTRAINT"
(a:wrap_content绑榴, b:0dp,c:0dp)
前兩個控件和其他布局工作原理相似盈魁。最后一個會重新給控件分配尺寸翔怎。如果設(shè)置了margin,margin會被計算進去。
重要:在ConstraintLayout中杨耙,子控件不建議設(shè)置成MATCH_PARENT赤套。類似的行為可以用MATCH_CONSTRAINT ,相應的 left/right or top/bottom 約束設(shè)置成"parent"
WRAP_CONTENT : enforcing constraints
在版本1.1之前珊膜,如果設(shè)置成WRAP_CONTENT 約束不會限制最后結(jié)果的尺寸容握。在一些情況你可能想要使用WRAP_CONTENT ,但強制約束可限制最終的尺寸车柠。這些情況剔氏,你可以使用下面的屬性
- app:layout_constrainedWidth=”true|false”
- app:layout_constrainedHeight=”true|false”
MATCH_CONSTRAINT dimensions(Added in 1.1)
當控件被設(shè)置成MATCH_CONSTRAINT ,默認會使用所有可用的空間堪遂。下面的幾種修改是有用的:
- layout_constraintWidth_min and layout_constraintHeight_min : 設(shè)置最小尺寸
- layout_constraintWidth_max and layout_constraintHeight_max :設(shè)置最大尺寸
- layout_constraintWidth_percent and layout_constraintHeight_percent:設(shè)置控件占父控件的百分比
Min and Max
The value indicated for min and max can be either a dimension in Dp, or "wrap", which will use the same value as what WRAP_CONTENT would do.
Percent dimension
為了使用Percent,你需要做如下設(shè)置:
- 尺寸設(shè)置成MATCH_CONSTRAINT (0dp)
- 默認設(shè)置成percent:app:layout_constraintWidth_default="percent" or app:layout_constraintHeight_default="percent"
- layout_constraintWidth_percent or layout_constraintHeight_percent 的值0到1
<Button android:id="@+id/buttonA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:minHeight="50dp"
/>
7.Ratio
你可以用比例來定義尺寸介蛉。
你至少需要將一個尺寸約束成0dp(MATCH_CONSTRAINT),并設(shè)置layout_constraintDimensionRatio 溶褪,舉例:
<Button
android:id="@+id/buttonB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:text="B"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintCircle="@id/buttonA"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="100dp"
/>
這個例子會將寬度設(shè)置成高度一樣。
比例也可以這樣表示:
- float 值践险,表示寬高的比例
- "width:height"這樣的比例表現(xiàn)形式
你也可以同時將寬高設(shè)置成 MATCH_CONSTRAINT (0dp)猿妈。這種情況,系統(tǒng)設(shè)置最大的尺寸滿足所有約束并保持特定的比例巍虫。為了約束某個尺寸基于另一個尺寸的大小彭则,你可以先添加W," or H,來約寬高。舉例:如果一個尺寸被兩個目標約束(如寬是0dp,并且居中)占遥,你可以通過在比例前添加 W標明哪一個尺寸被約束(約束寬)或者H(約束高)俯抖,用逗號分開。舉例:
<Button android:id="@+id/buttonA"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="A"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
會根據(jù)16:9的比例設(shè)置Button的高度瓦胎,Button的寬度會根據(jù)父控件來匹配約束芬萍。(Button的高度是是控件給的最大高度尤揣,寬度是高度的9/16)
8.Chains
Chains 在單一軸向上提供類似集團行為。其他軸向可以單獨約束柬祠。
Creating a chain創(chuàng)建鏈
一組控件如果它們通過雙方向連接關(guān)聯(lián)在一起可以作為一個鏈來處理(圖9示例最短的鏈北戏,有兩個控件)
Chain heads
Chains 被鏈中的第一個元素的屬性空中。(the "head" of the chain):
head是水平方向的最左邊的一個元素漫蛔,是垂直方向的最頂部的一個元素嗜愈。
Margins in chains
如果設(shè)置了margins,它們會被納入計算。在 spread chains這種情況莽龟,margins 會在分別的空間被減去蠕嫁。
Chain Style
當在Chain(鏈)中的第一個元素設(shè)置layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle,chain 的行為會根據(jù)具體的Style作出改變毯盈。(默認是CHAIN_SPREAD)
- CHAIN_SPREAD -元素會被分散(默認Style)
- Weighted chain -在CHAIN_SPREAD 模式中拌阴,如果一些控件被設(shè)置成MATCH_CONSTRAINT,它們會平分可用的空間奶镶。
- CHAIN_SPREAD_INSIDE-同樣迟赃,但兩端的元素不會被分散(spread out)。
- CHAIN_PACKED-chain中的元素會被集中放在一起厂镇。水平或者垂直方向的chid的bias屬性會影響放置的位置纤壁。
CHAIN_SPREAD布局示例:
<Button android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintRight_toLeftOf="@id/buttonB"
app:layout_constraintLeft_toLeftOf="parent"
/>
<Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@id/buttonA"
app:layout_constraintRight_toRightOf="parent"
android:text="B"/>
9.Virtual Helper objects
...
10.Optimizer (in 1.1)優(yōu)化器
在1.1的版本我們提供了優(yōu)化器。你可以在ConstraintLayout 元素使用app:layout_optimizationLevel來決定你使用哪個優(yōu)化器捺信。
- none:不適用任何一個優(yōu)化器
- standard :默認優(yōu)化器酌媒。只有優(yōu)化direct and barrier 約束
- direct :optimize direct constraints
- barrier :optimize barrier constraints
- chain :optimize chain constraints (experimental)
- dimensions :optimize dimensions measures (experimental), reducing the number of measures of match constraints elements
示例:app:layout_optimizationLevel="direct|barrier|chain"