ConstraintLayout的使用介绍
ConstraintLayout的介绍和依赖
在2016年的Google的I/O大会上,出来一个新的布局ConstraintLayout(约束性布局)。在Android Studio2.2版本后自动依赖使用ConstraintLayout布局。
ConstraintLayout的依赖
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.0'
}
ConstraintLayout约束布局的含义
根据布局中的其他元素或视图,确定View在屏幕中的位置, 受到三类约束,即其他视图,父容器(parent), 基准线(Guideline)。
ConstraintLayout的优势
ConstraintLayout的相比RelativeLayout和LineatLayout具有更强的特性,可以减少布局之间的嵌套。
ConstraintLayout的相对位置的设置
相对位置属性
相对位置属性:
layout_constraint[自身控件位置]_[目标控件位置]="[目标控件ID]"
,如果id是父布局的id,可以使用parent。如:- layout_constraintLeft_toLeftOf=”@id/…”:控件自身的左边和目标控件的左边对齐。
- layout_constraintLeft_toRightOf=”@id/…”:控件自身的左边和目标控件的右边对齐。
- layout_constraintRight_toRightOf=”@id/…”:控件自身的右边和目标控件的右边对齐。
- layout_constraintRight_toLeftOf=”@id/…”:控件自身的右边和目标控件的左边对齐。
- app:layout_constraintStart_toStartOf=”@id/…”:和上面意思差不多,就不解释了
- app:layout_constraintStart_toEndOf=”@id/…”:
- app:layout_constraintEnd_toEndOf=”@id/…”:
- app:layout_constraintEnd_toStartOf=”@id/…”:
- layout_constraintTop_toTopOf=”@id/…”:控件自身的上边和目标控件的上边对齐。
- layout_constraintTop_toBottomOf=”@id/…”:控件自身的上边和目标控件的下边对齐。
- layout_constraintBottom_toBottomOf=”@id/…”:控件自身的下边和目标控件的下边对齐。
- layout_constraintBottom_toTopOf=”@id/…”:控件自身的下边和目标控件的上边对齐。
eg:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/btn_1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" app:layout_constraintBottom_toTopOf="@id/btn" /> </android.support.constraint.ConstraintLayout>
效果图:
- app:layout_constraintBaseline_toBaselineOf=”@id/btn”:文字的底部线对齐
eg:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/btn_1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" app:layout_constraintBaseline_toBaselineOf="@id/btn" /> </android.support.constraint.ConstraintLayout>
效果图:
goneMargin属性
goneMargin属性是指目标控件GONE掉之后,自身控件可以设置个margin值。不过margin的方向需要和控件的相对位置的方向保持一致(下面的实例会说)。
- layout_goneMarginLeft=”xxdp”:当目标控件GONE时,自身控件距离左边的边距xxdp(当约束的方向左右方向时有效)。
- layout_goneMarginStart=”xxdp”:
- layout_goneMarginRight=”xxdp”:
- layout_goneMarginEnd=”xxdp”:
- layout_goneMarginTop=”xxdp”:
- layout_goneMarginBottom=”xxdp”:
eg:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" android:visibility="visible" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/btn_1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" app:layout_constraintBottom_toTopOf="@id/btn" app:layout_goneMarginBottom="200dp" /> </android.support.constraint.ConstraintLayout>
效果图:
bias属性
bias属性是指在对齐父容器后,设置水平与竖直的比例。
- app:layout_constraintHorizontal_bias=”0.2”:设置相对父控件距离的长度的为父控件的宽度0.2倍的位置
- layout_constraintVertical_bias=”0.2”:设置相对父控件距离的长度的为父控件的长度0.2倍的位置
eg:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.2" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.2" /> </android.support.constraint.ConstraintLayout>
效果图:
ConstraintLayout设置高宽比例
- layout_constraintDimensionRatio=”2:1”:通过该属性可以设置View的高宽比。这样可以很好的做手机屏幕的适配了。
eg:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--指定高度,宽度随着宽高比自适应 -->
<!--app:layout_constraintDimensionRatio="16:9" W: 默认,表示宽高比-->
<ImageView
android:id="@+id/image"
android:layout_width="0dp"
android:layout_height="100dp"
android:src="@color/colorPrimary"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent" />
<!--指定高度,宽度随着宽高比自适应 -->
<!--app:layout_constraintDimensionRatio="H,16:9" H: 表示高宽比-->
<ImageView
android:layout_width="0dp"
android:layout_height="100dp"
android:src="@color/colorAccent"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintRight_toRightOf="parent" />
<!--指定宽度,按照宽度来计算高宽比 默认是宽高比 -->
<ImageView
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:src="@color/colorPrimary"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintTop_toBottomOf="@id/image" />
<!--指定宽度,按照宽度来计算高宽比 W, 表示高宽比 -->
<ImageView
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:src="@color/colorPrimary"
app:layout_constraintDimensionRatio="W,16:9"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/image" />
<!--android:layout_width="0dp" 0dp表示充满父控件或说是充满其余空间-->
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:src="@color/colorAccent"
app:layout_constraintBottom_toBottomOf="@id/parent"
app:layout_constraintDimensionRatio="2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
效果图:
ConstraintLayout设置基准线(Guideline)
Guideline是一条隐形的线,这条线可作为准线,根据此准线设置其他控件的位置。
Guideline是一个View(android.support.constraint.Guideline),基准线的通过android:orientation设置方向。通过基准线来约束其他的view。
- layout_constraintGuide_begin=”xxdp”:基准线开始方向xxdp
- layout_constraintGuide_end=”xxdp”:基准线结束方向xxdp
- layout_constraintGuide_percent=”0.3”:基准线开始方向距离的父控件大小的百分比。
eg:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@id/guideline2" />
</android.support.constraint.ConstraintLayout>
效果图:
ConstraintLayout设置链状结构(Chain Style)
Chain Style是使多个控件像链条一样显示,这个更能可以类似LinearLayout的weight属性。
要想chain style生效,控件要相互引用,比如A的右边依赖B的左边,B的左边依赖A的右边,都是设置。 如:水平方向的Chain Style.
Chain Style的分为水平和竖直方向,每种都有3中模式:
- layout_constraintHorizontal_chainStyle=”spread”:均匀分布(包括边上控件左右的边距)
- layout_constraintHorizontal_chainStyle=”spread_inside”:均匀分布,但是边上的控件不均匀分布(边上控件没有边距)
- layout_constraintHorizontal_chainStyle=”packed”:控件紧挨在一起。还可以通过bias属性设置偏移量。
- layout_constraintHorizontal_weight=”“:跟线性布局的weight差不多,width需要设置0dp,控件的大小根据设置的weight比例进行设置。
- layout_constraintVertical_chainStyle=”“:和上面一样,有三种模式spread,spread_inside,packed。
- layout_constraintVertical_weight=”“:
如图:
eg:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/btn2" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintLeft_toRightOf="@id/btn1"
app:layout_constraintRight_toLeftOf="@id/btn3" />
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
app:layout_constraintLeft_toRightOf="@id/btn2"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
效果图:
ConstraintLayout控件的其他属性
- layout_constraintWidth_min=”“:最小宽度
- layout_constraintWidth_max=”“:最大宽度
- layout_constraintHeight_min=”“:最小高度
- layout_constraintHeight_max=”“:最大高度
下面几个属性是 UI 编辑器所使用的,用了辅助拖拽布局的,在实际使用过程中,可以不用关心这些属性。
- layout_optimizationLevel
- layout_editor_absoluteX
- layout_editor_absoluteY
- layout_constraintBaseline_creator:
- layout_constraintTop_creator:
- layout_constraintRight_creator:
- layout_constraintLeft_creator:
- layout_constraintBottom_creator:
文章参考: