ConstraintLayout(约束布局)的使用

今天跟大家分享一下ConstraintLayout布局的使用，也算是为自己做的笔记吧。

ConstraintLayout是2016年Google的I/O大会上重点宣传的一个新功能。（已经出了这么久了，最近才开始使用这个布局，为什么要使用这个布局呢？）它有一个明显的优点：就是可以有效的解决布局嵌套过多的问题，使用一层布局就可以解决复杂的嵌套布局（此处在推荐一个控件Guideline，二者配合使用效果更佳）。ConstraintLayout有点类似于RelativeLayout，但是比RelativeLayout更强大。下面看一下基本使用：

ConstraintLayout的基本属性

主要是通过四个边来确定视图的大小和位置的，所以只要对4个边做约束即可：

app:layout_constraintStart_toStartOf=""

app:layout_constraintStart_toEndOf=""

app:layout_constraintTop_toTopOf=""

app:layout_constraintTop_toBottomOf=""

app:layout_constraintEnd_toStartOf=""

app:layout_constraintEnd_toEndOf=""

app:layout_constraintBottom_toTopOf=""

app:layout_constraintBottom_toBottomOf=""

下面简单做一个登陆页面,如下：

图1

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:padding="50.0dip">

   

        android:id="@+id/username"

        android:layout_width="0.0dip"

        android:layout_height="50.0dip"

        android:layout_marginTop="150.0dip"

        android:hint="请输入账号"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

   

        android:id="@+id/password"

        android:layout_width="0.0dip"

        android:layout_height="50.0dip"

        android:layout_marginTop="25.0dip"

        android:hint="请输入密码"

        app:layout_constraintEnd_toEndOf="@+id/username"

        app:layout_constraintStart_toStartOf="@+id/username"

        app:layout_constraintTop_toBottomOf="@+id/username" />

   

        android:layout_width="0.0dip"

        android:layout_height="wrap_content"

        android:layout_marginTop="30.0dip"

        android:text="登录"

        app:layout_constraintEnd_toEndOf="@+id/password"

        app:layout_constraintStart_toStartOf="@+id/password"

        app:layout_constraintTop_toBottomOf="@+id/password" />

控件居中（※）

想让登录按钮居中，只要把Button的android:layout_width=“wrap_content“即可，如下图

图2

   

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_marginTop="30.0dip"

    android:text="登录"

    app:layout_constraintEnd_toEndOf="@+id/password"

    app:layout_constraintStart_toStartOf="@+id/password"

    app:layout_constraintTop_toBottomOf="@+id/password" />

链式layout_constraintHorizontal_chainStyle方式

图3

    

    android:id="@+id/textView2"

    android:layout_width="wrap_content"

    android:layout_height="50dp"

    android:layout_marginStart="8dp"

    android:layout_marginBottom="8dp"

    android:background="@color/colorAccent"

    android:gravity="center"

    android:text="TextView"

    app:layout_constraintHorizontal_chainStyle="spread"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toStartOf="@+id/textView3"

    app:layout_constraintStart_toStartOf="parent" />

    

    android:id="@+id/textView3"

    android:layout_width="wrap_content"

    android:layout_height="50dp"

    android:layout_marginStart="8dp"

    android:background="@color/colorPrimary"

    android:gravity="center"

    android:text="TextView"

    app:layout_constraintBottom_toBottomOf="@+id/textView2"

    app:layout_constraintEnd_toStartOf="@+id/textView4"

    app:layout_constraintStart_toEndOf="@+id/textView2"

    app:layout_constraintTop_toTopOf="@+id/textView2" />

    

    android:id="@+id/textView4"

    android:layout_width="wrap_content"

    android:layout_height="50dp"

    android:layout_marginStart="8dp"

    android:background="@color/design_default_color_primary_dark"

    android:text="TextView"

    android:gravity="center"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toEndOf="@+id/textView3"

    app:layout_constraintTop_toTopOf="@+id/textView3" />

添加chain属性后几种情况，一下是官方给出的图片

图4

layout_constraintDimensionRatio使用

图5

    

    android:layout_width="0.0dip"

    android:layout_height="0.0dip"

    android:background="@color/design_default_color_primary"

    app:layout_constraintDimensionRatio="3:1"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />

以上就是ConstraintLayout的基本使用，也是主要的使用，其他的属性用的比较少，就不跟大家一一分享了。

另：上述提到的Guideline控件

    

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:orientation="horizontal"

    app:layout_constraintGuide_percent="0.5" />

首先必须设置横竖屏，android:orientation="horizontal"，其次设置占据屏幕的百分比app:layout_constraintGuide_percent="0.5"，在复杂布局中与ConstraintLayout配合非常适用，推荐大家使用

以上就是最近使用中遇到的ConstraintLayout使用的相关介绍，如有问题，请大家多多指教，互相学习！