ConstraintLayout基础详解(上)

jianning-wu

已于 2023-08-15 10:47:38 修改

阅读量1.9k

点赞数

于 2017-06-05 14:16:37 首次发布

本文链接：https://blog.csdn.net/weixin_37730482/article/details/72866827

版权

Android ConstraintLayout 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一.ConstraintLayout简介

ConstraintLayout 是一个ViewGroup，它允许您以灵活的方式定位和大小小部件。ConstraintLayout可以作为一个支持库使用，可以在Android系统上使用API level 9 (Gingerbread)。

ConstraintLayout采用方向约束的方式对控件进行定位，至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。

二.基础属性

1.常见属性

//本控件的左边在XX控件的左边&右边 可取值：parent&id
layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf



//本控件的右边在XX控件的左边&右边 可取值：parent&id
layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf



//本控件的上边在XX控件的上边&下边 可取值：parent&id
layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf



//本控件的下边在XX控件的上边&下边 可取值：parent&id
layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf



//本控件的开始在XX控件的结尾&开始 可取值：parent&id
layout_constraintStart_toEndOf

layout_constraintStart_toStartOf



//本控件的结尾在XX控件的开始&结尾 可取值：parent&id
layout_constraintEnd_toStartOf

layout_constraintEnd_toEndOf



//本控件的基线
layout_constraintBaseline_toBaselineOf

2.代码

<1> app:layout_constraintLeft_toLeftOf="parent" ：控件的左边在父布局的左边。即设置TextView1在父布局的左边。

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

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        app:layout_constraintLeft_toLeftOf="parent"
        tools:ignore="MissingConstraints">

    </TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

<2> app:layout_constraintLeft_toRightOf="@+id/activity_constraint_layout_TextView1" ：控件的左边在TextView1的右边。即设置TextView2在TextView1的右面。

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

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/activity_constraint_layout_TextView2"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginStart="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字2"
        android:textColor="#FFFFFF"
        app:layout_constraintLeft_toRightOf="@+id/activity_constraint_layout_TextView1"
        tools:ignore="MissingConstraints">

    </TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

<3> app:layout_constraintTop_toBottomOf="@+id/activity_constraint_layout_TextView1"：控件的上边在TextView1的下面。即设置TextView2在TextView1的下面。

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

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/activity_constraint_layout_TextView2"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字2"
        android:textColor="#FFFFFF"
        app:layout_constraintTop_toBottomOf="@+id/activity_constraint_layout_TextView1"
        tools:ignore="MissingConstraints">

    </TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

<4> app:layout_constraintRight_toRightOf="parent"：控件的右边在父布局的右边。即设置TextView1在父布局的右边。

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

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        app:layout_constraintRight_toRightOf="parent"
        tools:ignore="MissingConstraints">

    </TextView>


</androidx.constraintlayout.widget.ConstraintLayout>

<5> app:layout_constraintStart_toEndOf="@id/activity_constraint_layout_TextView1"：控件的开始在TextView1的结尾。即设置TextView2在TextView1的右面。

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

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/activity_constraint_layout_TextView2"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字2"
        android:textColor="#FFFFFF"
        app:layout_constraintStart_toEndOf="@id/activity_constraint_layout_TextView1"
        tools:ignore="MissingConstraints">

    </TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

其实app:layout_constraintStart_toEndOf也可以使用app:layout_constraintLeft_toRightOf，但是使用start和end来表示左和右是为了考虑别的国家的习惯，有的国家开始方向是右，所以使用start和end可以兼容这种情况。

<6> app:layout_constraintBaseline_toBaselineOf="@id/activity_constraint_layout_TextView1"：控件的基线和TextView1的基线相同。即设置TextView1和TextView2在同一个基线上。这种写法也很常见比如 2000¥。

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

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="2900"
        android:textColor="@color/colorPrimary"
        android:textSize="40sp"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/activity_constraint_layout_TextView2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:gravity="center|left"
        android:text="¥"
        android:textColor="@color/colorAccent"
        android:textSize="26sp"
        app:layout_constraintBaseline_toBaselineOf="@id/activity_constraint_layout_TextView1"
        app:layout_constraintLeft_toRightOf="@id/activity_constraint_layout_TextView1"
        tools:ignore="MissingConstraints">

    </TextView>

</androidx.constraintlayout.widget.ConstraintLayout>