ConstraintLayout中chain解决几个控件整体居中的问题

于 2018-11-28 11:07:48 发布
阅读量3.3w 收藏 24
点赞数 15
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/menwaiqingshan/article/details/84581001
版权

ConstraintLayout

约束布局主要是为了解决布局的复杂嵌套存在的。

登录页面

在这里插入图片描述

<?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"
                                            xmlns:tools="http://schemas.android.com/tools"
                                            android:layout_width="match_parent"
                                            android:layout_height="match_parent"
                                            android:background="#FFFFFF">


    <EditText
        android:id="@+id/ed_mobile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:hint="请输入手机号"
        android:inputType="phone"
        android:maxLength="11"
        android:maxLines="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>


    <EditText
        android:id="@+id/ed_getCaptcha"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:hint="请输入验证码"
        android:inputType="number"
        android:maxLength="4"
        app:layout_constraintEnd_toStartOf="@+id/btn_getCaptcha"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ed_mobile"/>


    <Button
        android:id="@+id/btn_getCaptcha"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:text="发送验证码"
        android:textSize="15sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ed_mobile"/>

    <Button
        android:id="@+id/btn_login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:text="登录"
        android:textSize="15sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ed_getCaptcha"/>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_login">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="XXXX文字"/>

        <TextView
            android:id="@+id/activity_login_clause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="点击注册"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注册"/>

    </LinearLayout>
</android.support.constraint.ConstraintLayout>

ConstraintLayout–使几个控件整体居中

使单个控件居中一般有

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

尝试：我尝试过ConstraintLayout的Groups。Groups只能控制控件的显示和隐藏，并不能控制位置

要使几个控件整体居中，在别的布局中一般会在这几个控件的外面再套一层,然后使外面的这层布局居中就可以了。但是，约束布局本身就是为了减少嵌套而出现的，这一做法明显不可行。

1、使用Guideline。画一条垂直，画一条水平的引导线，这两条线在布局中心垂直。然后各控件根据这两条线来布局。缺点，这个方法没法直接弄出控件与控件之间的关系，所有的关系都是靠引导线来维持的。

2、Chain
选中要垂直的几个布局，手机号码输入框、验证码输入框、登录按钮、提示linearlayout，右键选择chains–create Vertical Chain
（chain的默认style是spread，元素默认被展开排列）
在这里插入图片描述

chain的style为spread时的结果
在这里插入图片描述

只需要在链头添加

app:layout_constraintVertical_chainStyle="packed"

则把这几个控件整体成功居中

这里插入图片描述

   <?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"
                                                xmlns:tools="http://schemas.android.com/tools"
                                                android:layout_width="match_parent"
                                                android:layout_height="match_parent"
                                                android:background="#FFFFFF">


        <EditText
            android:id="@+id/ed_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginLeft="32dp"
            android:layout_marginEnd="32dp"
            android:layout_marginRight="32dp"
            android:hint="请输入手机号"
            android:inputType="phone"
            android:maxLength="11"
            android:maxLines="1"
            app:layout_constraintBottom_toTopOf="@+id/ed_getCaptcha"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed"/>


        <EditText
            android:id="@+id/ed_getCaptcha"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginLeft="32dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:hint="请输入验证码"
            android:inputType="number"
            android:maxLength="4"
            app:layout_constraintBottom_toTopOf="@+id/btn_login"
            app:layout_constraintEnd_toStartOf="@+id/btn_getCaptcha"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ed_mobile"/>


        <Button
            android:id="@+id/btn_getCaptcha"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="32dp"
            android:layout_marginRight="32dp"
            android:text="发送验证码"
            android:textSize="15sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ed_mobile"/>

        <Button
            android:id="@+id/btn_login"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginLeft="32dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="32dp"
            android:layout_marginRight="32dp"
            android:text="登录"
            android:textSize="15sp"
            app:layout_constraintBottom_toTopOf="@+id/linearLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ed_getCaptcha"/>

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginLeft="32dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="32dp"
            android:layout_marginRight="32dp"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_login">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="XXXX文字"/>

            <TextView
                android:id="@+id/activity_login_clause"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="点击注册"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="注册"/>

        </LinearLayout>

    </android.support.constraint.ConstraintLayout>
SemiraChen
关注
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值