Android布局之ConstraintLayout

1.简介

ConstraintLayout是一个ViewGroup,翻译为约束布局,约束布局的出现主要是为了解决布局嵌套过深的情况,自android studio2.3开始,新建布局文件默认根ViewGroup就是它

2.基本属性

2.1 相对定位

例如TextView2需要放在TextView1后方,可以使用app:layout_constraintStart_toEndOf


Start_toEndOf
<TextView
    android:id="@+id/txt1"
    android:text="Text1"/>
<TextView
    android:id="@+id/txt2"
    android:text="Text2"
    app:layout_constraintStart_toEndOf="@id/txt1"/>

相似的属性有:

  • 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:对TextView有效,基线对齐
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

如果是依赖父布局的话可以使用parent

app:layout_constraintStart_toEndOf="parent"

2.2间距margins

margin和其它布局方式一样,支持的属性有:

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

但是ConstraintLayout多了一种间距goneMargin,用来指定当依赖的控件visibility为gone时的间距,此属性当且仅当依赖控件为gone时生效,支持属性:

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

2.3居中定位和偏移bias

如果想相对于一个依赖的控件垂直居中,例如想要相对于根布局水平居中,使用

水平居中
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

如果是别的控件,填对应控件id即可
如果想要距离左边偏移30%,则可以使用


向左偏移30%
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.3"

2.4圆形定位

一般APP都有这样的功能:在人物头像右下角显示一个等级标识
用圆形定位就很容易实现这种效果,圆形定位相关属性有三个:

  • layout_constraintCircle : 制定依赖控件的id

  • layout_constraintCircleRadius : 距离依赖控件中心点的距离

  • layout_constraintCircleAngle : 指定位于依赖控件的方向(0-360)


    圆形定位
    <ImageView
        android:id="@+id/img1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher_round"/>
    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/shape_circle"
        app:layout_constraintCircle="@id/img1"
        app:layout_constraintCircleRadius="30dp"
        app:layout_constraintCircleAngle="135"/>
    

2.5百分比尺寸

前提条件:

  • 宽或高需要设置为MATCH_PARENT(即设置为0dp)

  • 设置属性layout_constraintWidth_percent 或者 layout_constraintHeight_percent(值为[0,1))


    百分比尺寸
    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.8"
        app:layout_constraintHeight_percent="0.2"/>
    

2.6比例尺寸

顾名思义就是按比例设置尺寸,相关属性:

  • app:layout_constraintDimensionRatio
    一般情况下宽和高一个设置0dp一个设置WRAP_CONTENT即可


    宽:高=1:2
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="1:2"/>
    

如果两个都设置为0dp的话

2.7chains

chains提供水平或垂直方向上的一组控件的排列方式

默认方式:spread
spread(默认方式)
<Button
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn1"
    app:layout_constraintEnd_toStartOf="@id/btn2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread"/>
<Button
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn2"
    app:layout_constraintEnd_toStartOf="@id/btn3"
    app:layout_constraintStart_toEndOf="@id/btn1"/>

<Button
    android:id="@+id/btn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/btn2"/>
方式:spread-inside
spread-inside
app:layout_constraintHorizontal_chainStyle="spread_inside"
方式:packed
packed
app:layout_constraintHorizontal_chainStyle="packed"
方式:weighted chain

该形式只在spread mode下体现出来,比如可以设置btn1和btn2的宽度为MATCH_PARENT(0dp)来平分剩余的空间


Weighted chain
<Button
    android:id="@+id/btn1"
    android:layout_width="0dp"
    android:text="btn1"
    app:layout_constraintEnd_toStartOf="@id/btn2"
    app:layout_constraintStart_toStartOf="parent"/>
<Button
    android:id="@+id/btn2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="btn2"
    app:layout_constraintEnd_toStartOf="@id/btn3"
    app:layout_constraintStart_toEndOf="@id/btn1"/>

3辅助控件

3.1Barrier

有下面一个场景:有两行长度不一的文本现在要在两行文本后面添加一个文本,需要后添加的文本保证位于两行文本较长的后方


text内容比text2长

text2内容比text1长
<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="txt1,txt2"/>

用到的属性有两个:

  • app:barrierDirection="end" :指定界限方向 left|start|right|end|top|bottom
  • app:constraint_referenced_ids="txt1,txt2":指定id集合,用‘,’隔开

3.2Group

group制定一组控件,可以设置该组控件的可见性

  • app:constraint_referenced_ids="txt1,txt2" :指定id集合,用‘,’隔开
  • android:visibility="gone"

3.3Guideline

guideline是一条看不见的线,可以设置其位置,然后让其余控件依赖此guideline从而进行布局
相关属性有三个

  • android:orientation:指定guideline方向 horizontal|vertical
  • app:layout_constraintGuide_begin:指定guideline距离布局左边位置(dp) 优先级>layout_constraintGuide_end
  • app:layout_constraintGuide_end:指定guideline距离布局右边位置(dp) 优先级最低
  • app:layout_constraintGuide_percent:以小数形式(0-1)指定位置 优先级最高
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容