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

最新推荐文章于 2024-04-13 17:33:41 发布
最新推荐文章于 2024-04-13 17:33:41 发布
阅读量5k 收藏 33
点赞数 12
分类专栏： Android开发 文章标签： android studio android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ladiez/article/details/115034089
版权

目录

为什么要使用约束布局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="找回密码"
        android:textColor="#2196F3"
        app:layout_constraintEnd_toStartOf="@+id/textView10"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button7" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="256dp"
        android:text="紧急冻结"
        android:textColor="#2196F3"
        app:layout_constraintEnd_toStartOf="@+id/textView11"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView9"
        app:layout_constraintTop_toBottomOf="@+id/button7" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="256dp"
        android:text="微信安全中心"
        android:textColor="#2196F3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView10"
        app:layout_constraintTop_toBottomOf="@+id/button7" />


</androidx.constraintlayout.widget.ConstraintLayout>

效果图：
在这里插入图片描述

示例三（仿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">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="-41dp"
        tools:layout_editor_absoluteY="0dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView29"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="(●'◡'●)"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintEnd_toEndOf="@+id/imageView19"
                app:layout_constraintStart_toEndOf="@+id/imageView17"
                app:layout_constraintTop_toBottomOf="@+id/imageView19" />

            <TextView
                android:id="@+id/textView22"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="扑通"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="@+id/imageView24"
                app:layout_constraintStart_toStartOf="@+id/imageView24" />

            <TextView
                android:id="@+id/textView24"
                android:layout_width="36dp"
                android:layout_height="27dp"
                android:text="新建"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintBottom_toBottomOf="@+id/button"
                app:layout_constraintEnd_toStartOf="@+id/button"
                app:layout_constraintTop_toTopOf="@+id/button" />

            <TextView
                android:id="@+id/textView23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="自建歌单 3"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintStart_toStartOf="@+id/textView19"
                app:layout_constraintTop_toTopOf="@+id/textView24" />

            <ImageView
                android:id="@+id/imageView14"
                android:layout_width="153dp"
                android:layout_height="156dp"
                app:layout_constraintStart_toEndOf="@+id/imageView13"
                app:layout_constraintTop_toTopOf="@+id/imageView13"
                app:srcCompat="@drawable/d2" />

            <EditText
                android:id="@+id/editTextTextPersonName"
                android:layout_width="500dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="14dp"
                android:ems="10"
                android:hint="说好不哭 为您推荐"
                android:inputType="textPersonName"
                app:layout_constraintStart_toEndOf="@+id/imageView4"
                app:layout_constraintTop_toBottomOf="@+id/textView" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView3"
                app:srcCompat="@drawable/b2" />

            <TextView
                android:id="@+id/textView13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="23"
                app:layout_constraintEnd_toEndOf="@+id/textView12"
                app:layout_constraintStart_toStartOf="@+id/textView12"
                app:layout_constraintTop_toBottomOf="@+id/textView12" />

            <TextView
                android:id="@+id/textView9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="136dp"
                android:layout_marginLeft="136dp"
                android:text="会员中心"
                android:textColor="#000000"
                android:textSize="20dp"
                app:layout_constraintStart_toEndOf="@+id/textView2"
                app:layout_constraintTop_toTopOf="@+id/textView2" />

            <TextView
                android:id="@+id/textView20"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:text="更多  >"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/textView19" />

            <TextView
                android:id="@+id/textView16"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="电台"
                android:textColor="#000000"
                android:textSize="20dp"
                app:layout_constraintEnd_toEndOf="@+id/imageView11"
                app:layout_constraintStart_toStartOf="@+id/imageView11"
                app:layout_constraintTop_toBottomOf="@+id/imageView11" />

            <ImageView
                android:id="@+id/imageView11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:layout_constraintEnd_toStartOf="@+id/imageView12"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/imageView10"
                app:layout_constraintTop_toBottomOf="@+id/imageView6"
                app:srcCompat="@drawable/c4" />

            <TextView
                android:id="@+id/textView10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="喜欢"
                android:textColor="#000000"
                android:textSize="20dp"
                app:layout_constraintEnd_toEndOf="@+id/imageView8"
                app:layout_constraintStart_toStartOf="@+id/imageView8"
                app:layout_constraintTop_toBottomOf="@+id/imageView8" />

            <ImageView
                android:id="@+id/imageView10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toStartOf="@+id/imageView11"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/imageView9"
                app:layout_constraintTop_toBottomOf="@+id/imageView6"
                app:srcCompat="@drawable/c3" />

            <TextView
                android:id="@+id/textView14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="歌单"
                android:textColor="#000000"
                android:textSize="20dp"
                app:layout_constraintEnd_toEndOf="@+id/imageView10"
                app:layout_constraintStart_toStartOf="@+id/imageView10"
                app:layout_constraintTop_toBottomOf="@+id/imageView10" />

            <TextView
                android:id="@+id/textView18"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3"
                app:layout_constraintEnd_toEndOf="@+id/textView17"
                app:layout_constraintStart_toStartOf="@+id/textView17"
                app:layout_constraintTop_toBottomOf="@+id/textView17" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_width="54dp"
                android:layout_height="72dp"
                android:layout_marginStart="164dp"
                android:layout_marginLeft="164dp"
                app:layout_constraintStart_toEndOf="@+id/imageView6"
                app:layout_constraintTop_toTopOf="@+id/imageView6"
                app:srcCompat="@drawable/h2" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="86dp"
                android:layout_height="57dp"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="16dp"
                android:text="我的"
                android:textColor="#000000"
                android:textSize="35dp"
                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_marginTop="16dp"
                android:text="粉丝  0"
                android:textSize="20dp"
                app:layout_constraintEnd_toStartOf="@+id/textView6"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/textView3"
                app:layout_constraintTop_toBottomOf="@+id/imageView5" />

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="60dp"
                android:layout_height="59dp"
                android:layout_marginEnd="4dp"
                android:layout_marginRight="4dp"
                android:src="@drawable/a1"
                app:layout_constraintEnd_toStartOf="@+id/imageView2"
                app:layout_constraintTop_toTopOf="@+id/textView" />

            <TextView
                android:id="@+id/textView8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="104dp"
                android:layout_marginLeft="104dp"
                android:text="u1s1 送绿钻"
                app:layout_constraintStart_toEndOf="@+id/textView4"
                app:layout_constraintTop_toTopOf="@+id/textView4" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="听歌时长兑换奖励"
                app:layout_constraintStart_toEndOf="@+id/imageView6"
                app:layout_constraintTop_toBottomOf="@+id/textView2" />

            <TextView
                android:id="@+id/textView11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="22"
                app:layout_constraintEnd_toEndOf="@+id/textView10"
                app:layout_constraintStart_toStartOf="@+id/textView10"
                app:layout_constraintTop_toBottomOf="@+id/textView10" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="新歌提醒"
                android:textSize="20dp"
                app:layout_constraintEnd_toStartOf="@+id/textView7"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/textView5"
                app:layout_constraintTop_toBottomOf="@+id/imageView5" />

            <TextView
                android:id="@+id/textView17"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="已购"
                android:textColor="#000000"
                android:textSize="20dp"
                app:layout_constraintEnd_toEndOf="@+id/imageView12"
                app:layout_constraintStart_toStartOf="@+id/imageView12"
                app:layout_constraintTop_toBottomOf="@+id/imageView12" />

            <ImageView
                android:id="@+id/imageView8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                app:layout_constraintEnd_toStartOf="@+id/imageView9"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView6"
                app:srcCompat="@drawable/c1" />

            <TextView
                android:id="@+id/textView19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="8dp"
                android:text="最近播放"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView11" />

            <ImageView
                android:id="@+id/imageView9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:layout_constraintEnd_toStartOf="@+id/imageView10"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/imageView8"
                app:layout_constraintTop_toBottomOf="@+id/imageView6"
                app:srcCompat="@drawable/c2" />

            <ImageView
                android:id="@+id/imageView13"
                android:layout_width="153dp"
                android:layout_height="156dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView19"
                app:srcCompat="@drawable/d1" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="374dp"
                android:layout_height="71dp"
                android:layout_marginTop="24dp"
                android:src="@drawable/b1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.486"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName" />

            <TextView
                android:id="@+id/textView15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3"
                app:layout_constraintEnd_toEndOf="@+id/textView14"
                app:layout_constraintStart_toStartOf="@+id/textView14"
                app:layout_constraintTop_toBottomOf="@+id/textView14" />

            <TextView
                android:id="@+id/textView7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="暂无更新"
                android:textSize="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/textView6"
                app:layout_constraintTop_toBottomOf="@+id/imageView5" />

            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="54dp"
                android:layout_height="72dp"
                android:layout_marginTop="12dp"
                app:layout_constraintStart_toStartOf="@+id/textView3"
                app:layout_constraintTop_toBottomOf="@+id/textView3"
                app:srcCompat="@drawable/h1" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView"
                app:srcCompat="@drawable/a3" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:text="活动中心"
                android:textColor="#000000"
                android:textSize="20dp"
                app:layout_constraintStart_toStartOf="@+id/textView4"
                app:layout_constraintTop_toTopOf="@+id/imageView6" />

            <TextView
                android:id="@+id/textView12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="本地"
                android:textColor="#000000"
                android:textSize="20dp"
                app:layout_constraintEnd_toEndOf="@+id/imageView9"
                app:layout_constraintStart_toStartOf="@+id/imageView9"
                app:layout_constraintTop_toBottomOf="@+id/imageView9" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="关注  0"
                android:textSize="20dp"
                app:layout_constraintEnd_toStartOf="@+id/textView5"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView5" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="61dp"
                android:layout_height="53dp"
                android:layout_marginTop="18dp"
                android:layout_marginEnd="16dp"
                android:layout_marginRight="16dp"
                android:src="@drawable/a2"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:id="@+id/imageView12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/imageView11"
                app:layout_constraintTop_toBottomOf="@+id/imageView6"
                app:srcCompat="@drawable/c5" />

            <ImageView
                android:id="@+id/imageView15"
                android:layout_width="153dp"
                android:layout_height="156dp"
                android:layout_marginTop="4dp"
                app:layout_constraintStart_toEndOf="@+id/imageView14"
                app:layout_constraintTop_toTopOf="@+id/imageView14"
                app:srcCompat="@drawable/d3" />

            <TextView
                android:id="@+id/textView26"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="更多 >"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintEnd_toEndOf="@+id/textView20"
                app:layout_constraintTop_toTopOf="@+id/textView24" />

            <Button
                android:id="@+id/button"
                android:layout_width="47dp"
                android:layout_height="54dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="24dp"
                android:text="+"
                android:textSize="25dp"
                app:layout_constraintEnd_toStartOf="@+id/textView26"
                app:layout_constraintTop_toBottomOf="@+id/imageView15" />

            <ImageView
                android:id="@+id/imageView16"
                android:layout_width="153dp"
                android:layout_height="156dp"
                android:layout_marginTop="24dp"
                app:layout_constraintStart_toStartOf="@+id/imageView13"
                app:layout_constraintTop_toBottomOf="@+id/textView23"
                app:srcCompat="@drawable/f1" />

            <ImageView
                android:id="@+id/imageView17"
                android:layout_width="153dp"
                android:layout_height="156dp"
                android:layout_marginStart="4dp"
                android:layout_marginLeft="4dp"
                app:layout_constraintStart_toStartOf="@+id/imageView14"
                app:layout_constraintTop_toTopOf="@+id/imageView16"
                app:srcCompat="@drawable/f2" />

            <ImageView
                android:id="@+id/imageView19"
                android:layout_width="153dp"
                android:layout_height="156dp"
                app:layout_constraintStart_toEndOf="@+id/imageView14"
                app:layout_constraintTop_toTopOf="@+id/imageView17"
                app:srcCompat="@drawable/f3" />

            <TextView
                android:id="@+id/textView27"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="复习曲"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintEnd_toEndOf="@+id/imageView16"
                app:layout_constraintStart_toStartOf="@+id/imageView16"
                app:layout_constraintTop_toBottomOf="@+id/imageView16" />

            <TextView
                android:id="@+id/textView28"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="古风"
                android:textColor="#000000"
                android:textSize="15dp"
                app:layout_constraintEnd_toStartOf="@+id/imageView19"
                app:layout_constraintStart_toEndOf="@+id/imageView16"
                app:layout_constraintTop_toBottomOf="@+id/imageView17" />

            <ImageView
                android:id="@+id/imageView21"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="12dp"
                app:layout_constraintBottom_toTopOf="@+id/textView21"
                app:layout_constraintEnd_toStartOf="@+id/imageView24"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/imageView20"
                app:srcCompat="@drawable/g2" />

            <ImageView
                android:id="@+id/imageView24"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                app:layout_constraintBottom_toTopOf="@+id/textView22"
                app:layout_constraintEnd_toStartOf="@+id/imageView25"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/imageView21"
                app:srcCompat="@drawable/g3" />

            <ImageView
                android:id="@+id/imageView25"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                app:layout_constraintBottom_toTopOf="@+id/textView25"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/imageView24"
                app:srcCompat="@drawable/g4" />

            <TextView
                android:id="@+id/textView30"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="首页"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="@+id/imageView20"
                app:layout_constraintStart_toStartOf="@+id/imageView20"
                app:layout_constraintTop_toBottomOf="@+id/imageView20" />

            <ImageView
                android:id="@+id/imageView20"
                android:layout_width="wrap_content"
                android:layout_height="58dp"
                android:layout_marginTop="25dp"
                app:layout_constraintBottom_toTopOf="@+id/textView30"
                app:layout_constraintEnd_toStartOf="@+id/imageView21"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView27"
                app:srcCompat="@drawable/g1" />

            <TextView
                android:id="@+id/textView21"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="视频"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="@+id/imageView21"
                app:layout_constraintStart_toStartOf="@+id/imageView21" />

            <TextView
                android:id="@+id/textView25"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我的"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="@+id/imageView25"
                app:layout_constraintStart_toStartOf="@+id/imageView25" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

效果图：
在这里插入图片描述
在这里插入图片描述

补充

写在最后

match_parent在约束布局中不起作用，在ConstraintLayout中使用match_parent并不能达到填充满父布局的效果，而是由编辑器自动更正成一个数值。
Android第一讲笔记(常用控件以及线性布局)

ScrollView 滚动布局

ScrollView 不能直接放控件
ScrollView 里面放布局
ScrollView 只能放一个布局

示例一:纵向滚动

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

<!--    ScrollView 不能直接放控件
        ScrollView 里面放布局
        ScrollView 只能放一个布局
-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1"/>
            <Button
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1"/>
            <Button
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1"/>
            <Button
             android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1"/>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

效果图：
在这里插入图片描述

示例二:横向滚动

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

<!--    ScrollView 不能直接放控件
        ScrollView 里面放布局
        ScrollView 只能放一个布局
-->
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            >

            <Button
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1" />

            <Button
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1" />

            <Button
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1"/>
            <Button
             android:layout_width="200dp"
                android:layout_height="200dp"
                android:text="按钮1"/>
        </LinearLayout>

    </HorizontalScrollView>

</LinearLayout>

效果图：
在这里插入图片描述
欢迎批评指正，未完待续…

a碟
关注
专栏目录
Android 约束布局（ConstraintLayout）详解
Airsaid
01-13 4万+
前言 约束概述 转换布局 开始 创建布局 添加约束 基线约束 Chains Properties 设置宽高比例 Guidelines 自动添加约束 参考 本篇 ConstraintLayout 讲解版本：1.0.2，1.1.x 版本开始新增功能在下篇进行讲解。 前言 ConstraintLayout 是一个 ViewGroup，它的出现是为了解决复杂布局时，布局嵌套（
constraintlayout 滚动_ConstraintLayout 使用技巧
weixin_33773734的博客
02-23 2228
一开始我是拒绝的，但是看到ConstraintLayout最低支持android2.3之后，还是抱着试一试的心态服用了一个疗程。一个疗程之后，感觉xml布局中的view树，都在一级，二级之间徘徊了，心情好了，写代码手也不抖了。感谢google为我们提供了ConstraintLayout。It's similar to in that all views are laid out according...
ConstraintLayout布局属性大全
weixin_43107240的博客
09-08 1789
ConstraintLayout 1.介绍：约束布局ConstraintLayout是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从AS2.3起，官方的模板默认使用ConstraintLayout。 2.使用： （1）相对定位： 相对定位是部件对于另一个位置的约束，常用属性： layout_const...
ConstraintLayout约束布局属性
shenglong0210的博客
05-17 1036
ConstraintLayout属性 相对定位 layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintTop_toTopOf layout_constraintTo...
Android ConstraintLayout 约束布局属性
weixin_30363509的博客
08-13 318
常用方法总结 layout_constraintTop_toTopOf // 将所需视图的顶部与另一个视图的顶部对齐。 layout_constraintTop_toBottomOf // 将所需视图的顶部与另一个视图的底部对齐。 layout_constraintBottom_toTopOf // 将所需视图的底部与另一个视图的顶部对齐。 lay...
constraintlayout 滚动_android – 如何垂直滚动ConstraintLayout？
weixin_34439836的博客
01-17 1774
为了使屏幕中的元素可滚动,我认为您可以在CoordinatorLayout中使用NestedScrollView.我通常会将LinearLayout与我在那里显示的所有元素放在一起.例如：xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-au...
Android ConstraintLayout 约束布局 1
最新发布
2401_84149765的博客
04-13 715
目前已经更新的部分资料：《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！扫码获取！！（备注：Android）**[外链图片转存中…(img-542Cqt8P-1713000810822)][外链图片转存中…(img-wWm5ANmB-1713000810823)][外链图片转存中…(img-lKcgUppI-1713000810823)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
Android-第二节ConstraintLayout（约束布局）
2401_84008985的博客
03-30 1085
为什么很多程序员做不了架构师？1、良好健康的职业规划很重要，但大多数人都忽略了2、学习的习惯很重要，持之以恒才是正解。3、编程思维没能提升一个台阶，局限在了编码，业务，没考虑过选型、扩展4、身边没有好的架构师引导、培养。所处的圈子对程序员的成长影响巨大。金九银十面试季，跳槽季，整理面试题已经成了我多年的习惯！在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。
Android 约束布局（ConstraintLayout）详解，android基础编程
m0_61330806的博客
03-25 1234
Android架构学习进阶是一条漫长而艰苦的道路，不能靠一时激情，更不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！上面分享的字节跳动公司2020年的面试真题解析大全，笔者还把一线互联网企业主流面试技术要点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。详情可以点击我的【Github】如果你熟练掌握【Github】中列出的知识点，相信将会大大增加你通过前两轮技术面试的几率！这些内容都供大家参考，互相学习。
Android利用ConstraintLayout实现漂亮的动画详解
08-30
最近在无意中看到一篇关于ConstraintLayout的文章，ConstraintLayout是Android Studio 2.2中主要的新增功能之一，下面这篇文章主要给大家介绍了关于Android利用ConstraintLayout实现漂亮的动画的相关资料，需要的朋友可以参考下。
Android ConstraintLayout的使用
12-22
这个工程是使用ConstraintLayout的Demo，因为ConstraintLayout是用的可视化的方式来编写Android应用程序的界面，所有看xml文档是看不出效果的，有需要的可以下载
Android 约束布局（ConstraintLayout）详解，面试官问的那些安卓原理你都懂吗
2301_77116622的博客
03-28 990
我们刚刚创建好了一条链，此时我们可以设置（链式模式）来告诉Chains：“你应该怎样去填充剩余的空间”。在「蓝图」中，设置的方式是点击链条的小图标：在「布局」中，设置的属性是：分别对应着「水平链」和「垂直链」。除了上面说的之外，Chains还能对链中单独的视图控件设置Weiget。因为目前并不支持在编辑器当中设置Weiget，所以我们只能在布局中进行设置了，设置的属性是：我们现在将第一个Button填充完剩余的空间，在该Buttton上设置如下属性：使用和的Weiget。
ConstraintLayout （约束布局）属性详情
andjdk的专栏
08-20 447
查看链接 ：https://www.jianshu.com/p/c60f787817ad
约束布局基本属性与认识
m0_63911789的博客
04-23 338
layout_constraintVertical_bias layout_constraintHorizontal_bias 垂直/水平偏移量，取值范围为0-1，默认0.5 app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" a.
【约束布局】ConstraintLayout 13 种相对定位属性组合 ( 属性组合 | 用法说明 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
07-23 3011
相对定位简介 相对定位属性组合前提条件 相对定位 Left Right 四种组合属性 相对定位 Start End 四种组合属性 相对定位 Top Bottom 四种组合属性 相对定位控件约束细节 ( 被约束的边的具体位置 )
Android ConstraintLayout
CSerwangjun的博客
07-20 900
一.什么是ConstraintLayout及其优点 ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在2016的I/O大会上重点宣传的一个功能。按字面意思来理解，就是约束布局，很多人也称它是RelativeLayout相对布局的进阶版，因为确实在布局方面与RelativeLayout类似，不过优化和强大了很多。在传统的android开发
约束布局解析
杨筱毅的专栏
11-06 1314
1、相对定位：属性都形如 layout_constraint’DIRECTION’_to’TARGET DIRECTION’Of=”TARGET“ 1、constraint’DIRECTION’ 里的 ‘DIRECTION’代表是这个子控件自身的哪条边 2、to’TARGET DIRECTION’Of 里的 ‘TARGET DIRECTION’ 代表的是和约束控件的哪条边发生约束 3
安卓（Android）约束布局（ConstraintLayout）实战应用基本属性
wutian3998的专栏
04-25 6797
本人水平有限，如有不当之处，请谅解我在网上看了一些关于约束布局（ConstraintLayout）的文章，说约束布局可以减少嵌套，使用更方便，所以就实战了一下，看看约束布局如何实现LinearLayout和RelativeLayout的常用功能。在实战的过程中，对约束布局的属性有时不清楚怎么实现的，于是我发现了一个技巧，那就在拖动控件的界面，让控件实现约束布局，然后再看xml文件，就可以看到这个控...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a碟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值