ConstraintLayout的基礎(chǔ)用法

android官網(wǎng): https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout

1.Relative Positioning:相對(duì)布局

  • 控件A,控件B在A的底部 在B中添加 (想讓 B 的top 與 A 的bottom相連)
  app:layout_constraintTop_toBottomOf="@id/A"
  • 控件A,控件B在A的右側(cè) 在B中添加 (想讓 B 的left 與 A 的right相連)
  app:layout_constraintLeft_toRightOf="@id/A"     

2.Margins:設(shè)置邊距

  android:layout_marginStart
  android:layout_marginEnd
  android:layout_marginLeft
  android:layout_marginTop
  android:layout_marginRight
  android:layout_marginBottom

Margins when connected to a GONE widget

  app:layout_goneMarginStart
  app:layout_goneMarginEnd
  app:layout_goneMarginLeft
  app:layout_goneMarginTop
  app:layout_goneMarginRight
  app:layout_goneMarginBottom

3.Centering positioning and bias 居中定位和偏差

水平居中(parent相對(duì)于父容器)

  app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"

垂直居中

  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toBottomOf="parent"

偏差

  水平偏差  app:layout_constraintHorizontal_bias="0.2"
  垂直偏差  app:layout_constraintVertical_bias="0.3"

4.Circular positioning (Added in 1.1) 循環(huán)定位

以控件btn_list1為圓心,100dp為半經(jīng),角度為45

  app:layout_constraintCircle="@id/btn_list1"
  app:layout_constraintCircleAngle="45"
  app:layout_constraintCircleRadius="120dp"

5.Visibility behavior 可見性操作

通常情況下,設(shè)置為gone的布局不會(huì)被顯示,也不是布局的一部分,但是,在約束布局中,其仍為布局的一部分,其尺寸被看成是0(相當(dāng)于一個(gè)點(diǎn)),如果對(duì)其他控件有約束,則仍然會(huì)被注重,但是所有邊距值都將看似為0。

6.Dimensions constraints

6.1 Minimum dimensions on ConstraintLayout 這些最大最小尺寸的使用通常是在布局設(shè)置了WRAP_CONTENT
  android:maxWidth=""
  android:minWidth=""
  android:maxHeight=""
  android:minHeight=""
6.2 Widgets dimension constraints
  • 固定值,如:123dp
  • WRAP_CONTENT:
  app:layout_constrainedWidth=”true|false”
  app:layout_constrainedHeight=”true|false”

屬性為true,表示對(duì)控件的大小進(jìn)行約束,不會(huì)在隨著控件的內(nèi)容增大而變大

  • 0dp等于MATCH_CONSTRAINT:使結(jié)果大小占用所有可用空間
  layout_constraintWidth_min and layout_constraintHeight_min
  layout_constraintWidth_max and layout_constraintHeight_max
  layout_constraintWidth_percent and layout_constraintHeight_percent
  • 要使用百分比,需要設(shè)置以下內(nèi)容:

尺寸設(shè)置為0dp
默認(rèn)值設(shè)置為:layout_constraintWidth_default="percent"
layout_constraintHeight_default="percent"
layout_constraintWidth_percent 或者 layout_constraintHeight_percent屬性設(shè)置為0-1之間的值

7.Ratio 比例

7.1 寬和高的比列--width和height其中一個(gè)為0dp
  • width或者h(yuǎn)eight其中一個(gè)需要設(shè)置成0dp
  • app:layout_constraintDimensionRatio="1:1" 寬和高的比列
7.2 寬和高都設(shè)置的0dp

??????根據(jù)一個(gè)有尺寸的控件來(lái)約束一個(gè)指定約束面的控件。可以預(yù)先添加W或H來(lái)分別約束寬高。

  <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

設(shè)置高為全屏,按照高:寬 = 2:1進(jìn)行約束,效果如圖所示:
ratio.jpg

8. Chains

如果一組組件通過(guò)雙向連接鏈接在一起,則它們被視為鏈
鏈的第一個(gè)控件(水平方向:從左到右排的第一個(gè),垂直方向:從上向下排的第一個(gè))被稱作鏈頭

  • spread 將可用空間以均勻分布的方式將視圖放置在鏈中(默認(rèn)模式)
    spread.PNG
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/btn2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn2"
        app:layout_constraintStart_toEndOf="@+id/btn1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintEnd_toStartOf="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/btn3"
        app:layout_constraintStart_toEndOf="@+id/btn2"/>
  • spread_inside spread_inside:將鏈中最外面的視圖對(duì)齊到外邊緣,然后在可用空間內(nèi)均勻的放置鏈中的其他視圖:app:layout_constraintHorizontal_chainStyle="spread_inside"
    spread_inside.PNG
  • packed:將鏈中的視圖緊緊的放在一起(可以提供邊距讓其分開),然后讓其居中在可用空間內(nèi):
    packed.PNG
  • 設(shè)置權(quán)重

    app:layout_constraintHorizontal_weight="2"
    weight.PNG
  • 在鏈中的元素上使用邊距時(shí),邊距是相加的

9.Optimizer 優(yōu)化

具體介紹可以參考這位大神的文章https://blog.csdn.net/airsaid/article/details/79052011#chains

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容