android-view篇-ConstraintLayout 约束布局

文章目录

  • 概述
  • 相对定位
  • 边距
  • 居中和偏移
  • Circular positioning
  • 尺寸约束
  • Group
  • Guideline
  • 参考

概述

ConstraintLayout 主要是为了解决布局嵌套过多的问题,以灵活的方式定位和调整小部件。Android Studio 2.3 开始,官方模板默认使用 ConstraintLayout。

添加依赖,如下:

implementation 'com.android.support.constraint:constraint-layout:1.1.3'
package android.support.constraint;

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
package androidx.constraintlayout.widget;

相对定位

  1. layout_constraintLeft_toLeftOf
  2. layout_constraintLeft_toRightOf
  3. layout_constraintRight_toLeftOf
  4. layout_constraintRight_toRightOf
  5. layout_constraintTop_toTopOf
  6. layout_constraintTop_toBottomOf
  7. layout_constraintBottom_toTopOf
  8. layout_constraintBottom_toBottomOf
  9. layout_constraintBaseline_toBaselineOf:约束文本基线
  10. layout_constraintStart_toEndOf
  11. layout_constraintStart_toStartOf
  12. layout_constraintEnd_toStartOf
  13. layout_constraintEnd_toEndOf
<Button android:id="@+id/buttonA" ... />

<Button android:id="@+id/buttonB" ...
    app:layout_constraintLeft_toRightOf="@+id/buttonA" />

They all take a reference id to another widget, or the parent (which will reference the parent container, i.e. the ConstraintLayout):

<Button android:id="@+id/buttonB" ...
    app:layout_constraintLeft_toLeftOf="parent" />

边距

  1. android:layout_marginStart
  2. android:layout_marginEnd
  3. android:layout_marginLeft
  4. android:layout_marginTop
  5. android:layout_marginRight
  6. android:layout_marginBottom

**注:**设置边距时,需要约束控件在ConstraintLayout里的位置。

如果目标View不可见(View.GONE)时,可以通过以下属性设置不同的边距:

  1. layout_goneMarginStart
  2. layout_goneMarginEnd
  3. layout_goneMarginLeft
  4. layout_goneMarginTop
  5. layout_goneMarginRight
  6. layout_goneMarginBottom

居中和偏移

居中:

<EditText
    android:id="@+id/edt"
    ...
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

偏移(赋值0-1):

  1. layout_constraintHorizontal_bias:水平偏移
  2. layout_constraintVertical_bias:垂直偏移

Circular positioning

  1. layout_constraintCircle : references another widget id
  2. layout_constraintCircleRadius : 组件间的中心距离
  3. layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)

android-view篇-ConstraintLayout 约束布局_第1张图片

尺寸约束

  1. 指定尺寸大小
  2. wrap_content
    android:minWidth :最小宽度
    android:minHeight :最小高度
    android:maxWidth :最大宽度
    android:maxHeight :最大高度
    app:layout_constrainedWidth=”true|false”
    app:layout_constrainedHeight=”true|false”
  3. 0dp
    注: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to “parent”.
  4. 百分比
    layout_constraintWidth_min and layout_constraintHeight_min : will set the minimum size for this dimension
    layout_constraintWidth_max and layout_constraintHeight_max : will set the maximum size for this dimension
    layout_constraintWidth_percent and layout_constraintHeight_percent : will set the size of this dimension as a percentage of the parent
  • app:layout_constraintWidth_default=“percent”
  • app:layout_constraintHeight_default=“percent”
  1. Ratio比例
<Button 
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1" />
    
width:height

Chain Style:链的第一个控件是这条链的链头,可以在链头中设置
layout_constraintHorizontal_chainStylelayout_constraintVertical_chainStyle

  • CHAIN_SPREAD(default style)
  • Weighted chain
  • CHAIN_SPREAD_INSIDE:展开元素,链的两端贴近parent;
  • CHAIN_PACKED:链的元素将被打包在一起。

Group

Group将多个控件归为一组,方便隐藏或显示一组控件。

Guideline

参考

  • ConstraintLayout

你可能感兴趣的:(android)