Android第二讲笔记（约束布局ConstraintLayout）

为什么要使用约束布局ConstraintLayout？

在上节课，我们学习了线性布局。线性布局可以自动在一个方向上进行布局，通过距离或权重控制控件的放置，操作简单，容易上手。
但是线性布局也同样存在着弊端，*写UI 布局嵌套层次越少越好，最好不要超过3层，和性能有关；其次，有一些位置也不好实现，比如说置于最底端。*所以我们学习和使用约束布局ConstraintLayout，避免布局嵌套现象。解析ConstraintLayout的性能优势（官方）
约束布局的基本使用方法拖拽操作可以参考拖拽操作

约束布局基本属性

• layout_constraintTop_toTopOf------将该组件顶部与另一个组件的顶部对齐
• layout_constraintTop_toBottomOf------将该组件的顶部与另一个组件的底部对齐
• layout_constraintBottom_toTopOf------将该组件的底部与另一个组件的顶部对齐
• layout_constraintBottom_toBottomOf------将该组件的底部与另一个组件的底部对齐
• layout_constraintLeft_toLeftOf------将该组件的左边与另一个组件的左边对齐
• layout_constraintLeft_toRightOf------将该组件的左边与另一个组件的右边对齐
• layout_constraintRight_toLeftOf------将该组件的右边与另一个组件的左边对齐
• layout_constraintRight_toRightOf------将该组件的右边与另一个组件的右边对齐
• layout_constraintStart_toEndOf ------将该组件的起始位置与另一个组件的结束位置对齐
• layout_constraintStart_toStartOf ------将该组件的起始位置与另一个组件的起始位置对齐
• layout_constraintEnd_toStartOf ------将该组件的结束位置与另一个组件的的起始位置对齐
• layout_constraintEnd_toEndOf ------将该组件的结束位置与另一个组件的的结束位置对齐

约束布局简单使用方法

进入Design

拖拽弹簧可以添加各种约束

BUTTON1与BUTTON2左对齐

右边可以调节组件的各种属性

示例

示例一（仿QQ消息）

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:src="@drawable/a1"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="LZ"
        android:textColor="#000000"
        android:textSize="26dp"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="下午3：24"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="去哪了？"
        app:layout_constraintStart_toStartOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果图：

示例二（仿微信登陆界面）

<?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="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button5"
        android:layout_width="58dp"
        android:layout_height="56dp"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="4dp"
        android:text="X"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="72dp"
        android:text="微信号/QQ/邮箱登陆"
        android:textSize="25dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="28dp"
        android:text="账号"
        android:textColor="#000000"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />
    <!--start=left-->
    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="23dp"
        android:text="密码"
        android:textColor="#000000"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="91dp"
        android:layout_marginLeft="91dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="90dp"
        android:layout_marginRight="90dp"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintBottom_toBottomOf="@+id/textView7"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/textView7"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName" />

    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="1dp"
        android:layout_marginRight="1dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toBottomOf="@+id/textView6"
        app:layout_constraintEnd_toEndOf="@+id/editTextTextPassword"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="56dp"
        android:text="用手机号登陆"
        android:textColor="#2196F3"
        app:layout_constraintStart_toStartOf="@+id/textView7"
        app:layout_constraintTop_toBottomOf="@+id/textView7" />

    <Button
        android:id="@+id/button7"
        android:layout_width="399dp"
        android:layout_height="48dp"
        android:layout_marginTop="88dp"
        android:text="登陆"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="256dp"
        android:text="找回密码"