Android ConstraintLayout 约束布局

Android ConstraintLayout (约束布局) 是 Android Studio 2.3+ 创建 activity_main.xml 的默认布局方式

在上一章节中我们学习了 Android ConstraintLayout 中的 边距 ( Margins ) 约束布局,本章我们就来学习 居中定位和偏向(centering positioning and bias)**

居中定位和偏向 (centering positioning and bias)

Android ConstraintLayout 约束布局最有用的一个地方就是它可以处理 "不可能" 的约束

例如,我们可以写一个如下的布局代码

<android.support.constraint.ConstraintLayout >
    <Button android:id="@+id/signup"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
<android.support.constraint.ConstraintLayout />

按照第一小节讲的属性值,这段代码的意思是,Button 的左边和父控件的左边对齐,Button 的右边和父控件的右边对齐

可是控件是 wrap_content 的,它如果不铺满父控件要如何能满足这两个约束呢?

我们写一个范例来看看结果如何

  1. 创建一个 空的 Android 项目 cn.twle.android.ConstraintLayout

  2. 修改 activity_main.xml 为以下内容

    <?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/signup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:text="Sign Up"/>
    
    </android.support.constraint.ConstraintLayout>
    

运行范例,显示结果如下

哇,按钮竟然 垂直居中 了,这是因为这两个约束作用类似于水平方向上,有相反的力 去拉控件,最终控件会居中显示

倾向 ( Bias )

ConstraintLayout 布局这种居中的特性搭配 bias,能使约束偏向某一边

倾向 ( Bias ) 提供了两个属性用于设置偏向到的程度

属性 说明
layout_constraintHorizontal_bias (0最左边 1 最右边,默认是 0.5)
layout_constraintVertical_bias (0最上边 1 最底边,默认是 0.5)

上面的 Sign Up 会水平居中,就是因为这个偏向是 0.5,如果我们改成其它值呢,比如 0.9

试一试吧

修改 activity_main.xml 为以下内容

<?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/signup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="Sign Up"/>

</android.support.constraint.ConstraintLayout>

运行范例,显示结果如下

我们发现 Sign Up 按钮在水平方向上向右偏移至 90% 左右

参考文档

  1. Android ConstraintLayout Guideline

  2. Android ConstrantLayout

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.