ConstraintLayout的基础用法

2018-08-24 本文已影响0人 _成长ing_

android官网： https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout

1.Relative Positioning:相对布局

控件A，控件B在A的底部在B中添加 (想让 B 的top 与 A 的bottom相连)

  app:layout_constraintTop_toBottomOf="@id/A"

控件A，控件B在A的右侧在B中添加 (想让 B 的left 与 A 的right相连)

  app:layout_constraintLeft_toRightOf="@id/A"

2.Margins:设置边距

  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相对于父容器)

  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) 循环定位

以控件btn_list1为圆心，100dp为半经，角度为45

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

5.Visibility behavior 可见性操作

通常情况下，设置为gone的布局不会被显示，也不是布局的一部分，但是，在约束布局中，其仍为布局的一部分，其尺寸被看成是0（相当于一个点），如果对其他控件有约束，则仍然会被注重，但是所有边距值都将看似为0。

6.Dimensions constraints

6.1 Minimum dimensions on ConstraintLayout 这些最大最小尺寸的使用通常是在布局设置了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，表示对控件的大小进行约束，不会在随着控件的内容增大而变大

0dp等于MATCH_CONSTRAINT:使结果大小占用所有可用空间

  layout_constraintWidth_min and layout_constraintHeight_min
  layout_constraintWidth_max and layout_constraintHeight_max
  layout_constraintWidth_percent and layout_constraintHeight_percent

要使用百分比，需要设置以下内容：

尺寸设置为0dp
默认值设置为：layout_constraintWidth_default="percent"
layout_constraintHeight_default="percent"
layout_constraintWidth_percent 或者 layout_constraintHeight_percent属性设置为0-1之间的值

7.Ratio 比例

7.1 宽和高的比列--width和height其中一个为0dp

width或者height其中一个需要设置成0dp
app:layout_constraintDimensionRatio="1:1" 宽和高的比列

7.2 宽和高都设置的0dp

根据一个有尺寸的控件来约束一个指定约束面的控件。可以预先添加W或H来分别约束宽高。

  <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" />

设置高为全屏，按照高：宽 = 2:1进行约束，效果如图所示：

ratio.jpg

8. Chains

如果一组组件通过双向连接链接在一起，则它们被视为链
链的第一个控件（水平方向：从左到右排的第一个，垂直方向：从上向下排的第一个）被称作链头

spread 将可用空间以均匀分布的方式将视图放置在链中（默认模式） 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：将链中最外面的视图对齐到外边缘，然后在可用空间内均匀的放置链中的其他视图：app:layout_constraintHorizontal_chainStyle="spread_inside" spread_inside.PNG
packed：将链中的视图紧紧的放在一起（可以提供边距让其分开），然后让其居中在可用空间内： packed.PNG
设置权重

app:layout_constraintHorizontal_weight="2" weight.PNG
在链中的元素上使用边距时，边距是相加的