AndroidConstraintLayout布局

AndroidStudio 3.0 默认ConstraintLayout，可以减少布局层级并提高布局性能；能够灵活的定位和调整子View的大小，子View依靠约束关系来确定位置。

一、基本属性

这些属性为控件添加了某个方向的约束力，根据某个方向约束力的“有无”和“强弱”，空间会位于不同的位置


xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
tools:cOntext=".MainActivity">
android:id="@+id/tv1"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv1"
android:gravity="center"
android:textSize="20pt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
android:id="@+id/tv2"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv2"
android:gravity="center"
android:textSize="20pt"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv1"
app:layout_constraintTop_toBottomOf="@+id/tv1"/>
android:id="@+id/tv3"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv3"
android:gravity="center"
android:textSize="20pt"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv2"/>



tv1设置了上、左的约束

tv2设置了左、上、下的约束，有上下居中的效果

tv3设置了上、下、左、右的约束，有居中的效果

二、偏移量


xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
tools:cOntext=".MainActivity">
android:id="@+id/tv1"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv1"
android:gravity="center"
android:textSize="20pt"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>



tv1设置了居中


xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
tools:cOntext=".MainActivity">
android:id="@+id/tv1"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv1"
android:gravity="center"
android:textSize="20pt"
app:layout_constraintVertical_bias="1"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>



设置它的垂直偏移量为1，水平偏移量为0.8

三、Visibility 属性

如果View的属性Visibility设置为gone，那么原本依赖它来参照定位的属性就会失效，ConstraintLayout布局会有所不同

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom


xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
tools:cOntext=".MainActivity">
android:id="@+id/tv1"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv1"
android:gravity="center"
android:textSize="20pt"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
android:id="@+id/tv2"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv2"
android:gravity="center"
android:textSize="20pt"
app:layout_gOneMarginTop="100dp"
app:layout_constraintLeft_toRightOf="@+id/tv1"
app:layout_constraintTop_toBottomOf="@+id/tv1"/>



当tv1的Visibility 属性设置为gone时，tv1缩小为一个不可见的点，位于原先位置的左上角，属性app:layout_gOneMarginTop="100dp"就会生效，tv2移到新的位置

四、宽高比

其他布局中要实现View的宽高比会比较麻烦，ConstraintLayout中可以直接实现：

• 将View的宽高设置为0dp


• 设置 app:layout_constraintDimensionRatio属性


xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
tools:cOntext=".MainActivity">
android:id="@+id/iv1"
android:background="@color/colorPrimary"
android:layout_
android:layout_
app:layout_cOnstraintDimensionRatio="16:9"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>



还支持这样的写法
app:layout_cOnstraintDimensionRatio="H,16:9"
app:layout_cOnstraintDimensionRatio="W,9:16"

五、控件权重

ConstraintLayout 可以像LinearLayout 一样为之控件设置layout_weight属性，从而控制子控件之间的占比


xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
tools:cOntext=".MainActivity">
android:id="@+id/tv1"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:gravity="center"
android:text="text1"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintRight_toLeftOf="@id/tv2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
android:id="@+id/tv2"
android:background="@color/colorAccent"
android:layout_
android:layout_
android:gravity="center"
android:text="text2"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/tv1"
app:layout_constraintRight_toLeftOf="@id/tv3"
app:layout_constraintTop_toTopOf="parent"/>
android:id="@+id/tv3"
android:background="@color/colorPrimaryDark"
android:layout_
android:layout_
android:gravity="center"
android:text="text3"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/tv2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>



横向相当于一个链(Chains)，在链的最左边的元素成为链头，还可以给它设置一些属性(layout_constraintHorizontal_chainStyle)，来展示更多的效果

• 当wight不等于零
  app:layout_constraintHorizontal_chain(默认)

  app:layout_constraintHorizontal_chain

  app:layout_constraintHorizontal_chain
  

六、锚向指示线

其实指示线(Guideline)是来帮助定位的，不会出现在实际界面中，它有几个特性：

• 宽度和高度都是0


• 可见性为View.GONE


• 通过orientation设置方向


xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
tools:cOntext=".MainActivity">
android:id="@+id/gl1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
android:layout_
android:layout_/>
android:id="@+id/gl2"
app:layout_constraintGuide_begin="100dp"
android:orientation="horizontal"
android:layout_
android:layout_/>
android:id="@+id/tv1"
android:background="@color/colorPrimary"
android:layout_
android:layout_
android:text="tv1"
android:gravity="center"
android:textSize="20pt"
app:layout_constraintLeft_toLeftOf="@id/gl1"
app:layout_constraintTop_toTopOf="@id/gl2"/>



设置横向指示线距离顶部 100dp

竖向指示线设置其距离百分比为 0.5