ConstraintLayout解析

发布时间 2023-06-06 23:55:08作者: 黑帅-quan

@

1.前言

你是不是一直不敢用ConstraintLayout,是以为属性太多太复杂?你心理上的惰性,畏惧它。它其实很好用很强大,如果要用就需要一个入门的敲门砖

2.了解ConstraintLayout

特点:简化操作、解决布局嵌套、自适应布局、可百分比布局、可同时替代线性布局LinearLayout和相对布局RelativeLayout的强大功能

3.基本用法

ConstraintLayout的位置约束属性如下,属性值可以是parent或者@+id/兄弟组件的id:
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_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
Layout_constraintEnd_toEndOf
怎么这么多12个属性,相对布局你都会,这个就不用害怕理解一下就明白了,相对布局不就是top,bottom,left,right四个属性吗,看单词只不过多了start和end(为了支持阿拉伯国家),这里你也可以当成left和right,效果一样。推荐使用start和end.下面就解析一下这些属性。

3.1 看一个布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
先理解一下这个button控件,它使用了layout_constraintStart_toStartOf、layout_constraintBottom_toBottomOf和
layout_constraintTop_toTopOf
意思:parent表示父布局,而且使用约束布局必须在水平和垂直都添加约束,不然不完整。
button的左边和父布局的左边对齐,
button的下面边和父布局的下面边对齐,
button的上面的边和父布局的上面边对齐
从显示效果图可以看到第一个左对左效果有了,又由于要求控件上对上和下对下就会出现在中间的效果。

3.2再看一个布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:testSize="24sp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:testSize="24sp"
        android:text="Button1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="@+id/button"
     />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
它使用了layout_constraintStart_toEndOf和
layout_constraintTop_toTopOf
意思:"@+id/button表示兄弟布局
button1的左边和兄弟布局的右边对齐,
button1的上面边和兄弟布局的上面边对齐,
从显示效果图可以看到效果都有了,真的好强大,下面再讲布局的时候不用详细讲了,不用死记硬背,理解了这个就基本的会了。
此博客没完成,有时间继续。尽快会完成