ConstraintLayout的一些使用翻譯

可以使用的各種約束:

  • 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的右邊:


1.png

布局可以這么寫:

<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)將有兩邊使用相同的位置蹄溉。這個不是很明白究恤?崩侠??那先?

2.png

下面是可用約束的清單:

  • 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

3.png

如果設(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一樣。
這個例子的實際效果是居中處理了蹲嚣。

4.png

在這個例子中递瑰,約束行為相反使控件邊距平等的拆分,所以最后控件在父容器的中央隙畜。

Bias偏向
默認處理相反的約束是讓控件居中抖部,但可以調(diào)整控件位置偏向一邊使用bias屬性:

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias


    5.png

    舉例:
    下面會讓左邊是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)
6.png
<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.
7.png

這樣的行為允許創(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"
8.png

(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示例最短的鏈北戏,有兩個控件)

9.png

Chain heads
Chains 被鏈中的第一個元素的屬性空中。(the "head" of the chain):

10.png

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屬性會影響放置的位置纤壁。
11.png

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"

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市迄靠,隨后出現(xiàn)的幾起案子秒咨,更是在濱河造成了極大的恐慌,老刑警劉巖掌挚,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雨席,死亡現(xiàn)場離奇詭異,居然都是意外死亡吠式,警方通過查閱死者的電腦和手機陡厘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來特占,“玉大人糙置,你說我怎么就攤上這事∈悄浚” “怎么了谤饭?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我揉抵,道長亡容,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任功舀,我火速辦了婚禮萍倡,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘辟汰。我一直安慰自己列敲,他們只是感情好,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布帖汞。 她就那樣靜靜地躺著戴而,像睡著了一般。 火紅的嫁衣襯著肌膚如雪翩蘸。 梳的紋絲不亂的頭發(fā)上所意,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天,我揣著相機與錄音催首,去河邊找鬼扶踊。 笑死,一個胖子當著我的面吹牛郎任,可吹牛的內(nèi)容都是我干的秧耗。 我是一名探鬼主播,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼舶治,長吁一口氣:“原來是場噩夢啊……” “哼分井!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起霉猛,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤尺锚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后惜浅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瘫辩,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年赡矢,在試婚紗的時候發(fā)現(xiàn)自己被綠了杭朱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡吹散,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出八酒,到底是詐尸還是另有隱情空民,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布,位于F島的核電站界轩,受9級特大地震影響画饥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浊猾,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一抖甘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧葫慎,春花似錦衔彻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至椒涯,卻和暖如春柄沮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背废岂。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工祖搓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人湖苞。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓拯欧,卻偏偏與公主長得像,于是被迫代替她去往敵國和親袒啼。 傳聞我的和親對象是個殘疾皇子哈扮,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容