如何使用ConstraintLayout

最新推荐文章于 2023-10-01 00:53:35 发布

BarryLll

最新推荐文章于 2023-10-01 00:53:35 发布

阅读量208

点赞数 1

分类专栏： android开发笔记文章标签： ConstraintLayout

本文链接：https://blog.csdn.net/wiseyue/article/details/86594343

版权

android开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

API28文档中的ConstraintLayout相关介绍

1.在多层LinearLayout嵌套（超过三层）之后，视图的渲染会拖累应用的性能，以往我们会选择使用RelativeLayout，但是如果视图层复杂的话RelativeLayout里面还需要嵌套其他视图，对视图的位置控制起来很麻烦，也不容易进行屏幕适配。所以我们使用ConstraintLayout。因为ConstraintLayout使用起来比RelativeLayout更灵活，性能也更加的出色。还有一点就是ConstraintLayout可以按照比例约束控件位置和尺寸，能够更好地适配屏幕大小不同的机型。

2.如果你的AndroidStudio在3.0以上，那么是自带这个布局的直接就可以使用，如果是在 2.3--3.0，那么你需要先添加依赖

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

3.接着我们来看看它的具体用法：

3.1约束布局相对定位的常用属性：

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

<Button 
    android:id="@+id/buttonA"
     ... />
<Button
    android:id="@+id/buttonB" 
    ...
    app:layout_constraintLeft_toRightOf="@+id/buttonA" />

先说一下基本的方法的含义，拿上图来说，buttonB控件的左边约束在id为buttonA的控件的右边（相当于RelativeLayout中的android:layout_toRightOf），其他的也都类似，就不做过多的赘述。

重点我们来关注一下layout_constraintBaseline_toBaselineOf这个方法，baseline是基线，那么如图所示，两个控件的高度不一致，但是又希望他们文本对齐，这个时候就可以使用layout_constraintBaseline_toBaselineOf

3.2 Margin（边距）

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

在这里，特别需要注意的就是要想在约束布局中使用margin就必须先约束该控件在约束布局中的位置。

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/ButtonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

这段代码中，下面的两句代码必须有，不然的话，margin不会生效。

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

当位置约束目标的可见性为View.GONE时，请看下面的一种情况：假设ButtonB的左边约束在ButtonA的右边，并给ButtonB设一个app:layout_goneMarginLeft="10dp"

<?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"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide BtnA"
        app:layout_constraintLeft_toRightOf="@+id/buttonA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_goneMarginLeft="30dp" />
</android.support.constraint.ConstraintLayout>

不加VIEW.GONE属性时，layout_goneMarginLeft属性并不会生效，图中效果并没有30的边距。

如果给ButtonA加上visiblity属性为gone时：

就会是这样效果，只有给buttonA设置visibility为gone时，layout_goneMarginLeft属性才会生效。

3.3 Centering positioning and bias居中定位和偏移

AS3.0之后我们新建空项目activity_main.xml中“HelloWorld”所在位置就是居中的，他的写法是：

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

如果想要水平居中，那么只需要约束左右为parent的左右，同理垂直居中就是约束上下为parent的上下即可。

此时我们回想一下上面提到的margin边距的用法，他的前提是需要有一个相对定位先约束他的位置，而垂直/水平居中已经约束了它的定位，那么我们可以直接使用margin，那么整体的效果就是出去margin外边距的距离之后剩下的距离内在进行水平/垂直居中。如下图所示：

代码如下：

    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="120dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

除了这种偏移外，ConstraintLayout还提供了另外一种偏移（bias）的属性：

水平偏移：layout_constraintHorizontal_bias

垂直偏移：layout_constraintVertical_bias

其实，bias和权重、占位很相似，bias的值在0-1之间，假如你取0.3，那么你的控件就在整个水平/垂直距离上3/10的位置，例如：

代码如下：

    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

如果你想要居中，那么设置为0.5即可。

3.4 Circular positioning (Added in 1.1)角度定位

角度定位指的是可以用一个角度Angle和一个距离Radius来约束两个空间的中心位置。

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide BtnA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintCircle="@+id/buttonA"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="200dp" />
</android.support.constraint.ConstraintLayout>

3.5 Dimensions constraints尺寸约束

BarryLll

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何使用ConstraintLayout

API28文档中的ConstraintLayout相关介绍1.在多层LinearLayout嵌套（超过三层）之后，视图的渲染会拖累应用的性能，以往我们会选择使用RelativeLayout，但是如果视图层复杂的话RelativeLayout里面还需要嵌套其他视图，对视图的位置控制起来很麻烦，也不容易进行屏幕适配。所以我们使用ConstraintLayout。因为ConstraintLay...
复制链接

扫一扫