盒子
盒子
文章目录
  1. 常用属性
    1. 类似于RelativeLayout的属性
    2. 类似于LinearLayout的属性
    3. 增加浮动效果
    4. 辅助布局

ConstraintLayout初探

ConstraintLayout性能解析

常用属性

类似于RelativeLayout的属性

  • layout_constraintStart_toStartOf
  • app:layout_constraintStart_toStartOf=”@id/text1”

    该控件与text1左对齐

    app:layout_constraintStart_toStartOf=”parent”

    该控件约束在布局最左端

  • layout_constraintStart_toEndOf
  • app:layout_constraintStart_toEndOf=”@id/text1”

    该控件在text1的右端

    其它以此类推

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <TextView
    android:id="@+id/text1"
    android:layout_width="100dp"
    android:layout_height="80dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:background="@color/red"/>
    <TextView
    android:id="@+id/text2"
    android:layout_width="0dp"
    android:layout_height="50dp"
    app:layout_constraintStart_toEndOf="@id/text1"
    app:layout_constraintTop_toTopOf="@id/text1"
    app:layout_constraintEnd_toEndOf="parent"
    android:background="@color/colorPrimary"/>
    <TextView
    android:id="@+id/text3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintStart_toEndOf="@id/text1"
    app:layout_constraintBottom_toBottomOf="@id/text1"
    app:layout_constraintEnd_toStartOf="@id/text4"
    app:layout_constraintTop_toBottomOf="@id/text2"
    android:background="@color/colorAccent"
    app:layout_constraintHorizontal_weight="1"/>
    <TextView
    android:id="@+id/text4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/black"
    app:layout_constraintStart_toEndOf="@id/text3"
    app:layout_constraintTop_toBottomOf="@id/text2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_weight="2"/>

    toStartof等属性

    类似于LinearLayout的属性

  • app:layout_constraintHorizontal_weight
  • 该属性与LinearLayout的layout_weight使用类似

  • layout_constraintHorizontal_chainStyle
  • 1
    app:layout_constraintHorizontal_chainStyle="spread"

    spread,默认属性,当宽度为0时按照weight分配宽度,宽度非零时:

    spread属性

    spread-inside,宽度非零时:

    spread-inside属性

    packed,宽度非零时:

    packed属性

    增加浮动效果

    1
    2
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintVertical_bias="1"

    辅助布局

    可通过定义辅助布局,对控件以辅助线为基准进行位置改变

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <android.support.constraint.Guideline
    android:id="@+id/guide_h"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5" />
    <android.support.constraint.Guideline
    android:id="@+id/guide_v"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />
    <TextView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@color/red"
    app:layout_constraintStart_toEndOf="@id/guide_v"
    app:layout_constraintTop_toBottomOf="@id/guide_h" />

    packed属性

    支持一下
    扫一扫,支持Grooter
    • 微信扫一扫
    • 支付宝扫一扫