程序员经验分享-hwhale

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

2023-11-07

为什么要使用约束布局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>

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

android开发

android studio

Android

Android第二讲笔记（约束布局ConstraintLayout） 的相关文章

  • 如何使用 kotlin Android 从 Url 读取 JSON？

    我正在使用 kotlin 来开发应用程序 现在我想从服务器获取 JSON 数据 在java中 我实现了Asyntask以及Rxjava来从Url读取JSON 我也在谷歌搜索 但我无法获得满足我的要求的正确详细信息 如何使用 kotlin 从

  • 在 Android 中从麦克风录制 wav 文件 - 问题

    我需要能够使用 Android 中的麦克风创建 WAV 文件 目前 我遇到了很多麻烦 到目前为止 这就是我的情况 我正在使用 micDroid 项目代码的一部分来记录 read thread int sampleRate 44100 int

  • Android 从 C++ 端播放原始音频

    我需要能够在 Android 系统的 C 端以自定义文件格式传输音频 我正在致力于移植自定义媒体播放器 并且需要能够打开自定义文件并从中传输音频 这很重要 因为我认为从性能角度来看将整个播放器移植到 JAVA 是不可行的 并且通过 JNI

  • Auto-value-gson出现接口错误，注册一个InstanceCreator？

    我有一个如下所示的接口类 public interface Species String name And a Human实现的类 AutoValue使用类型适配器 AutoValue public abstract class Human

  • 如何使用数据绑定将点击侦听器设置为 LinearLayout

    我目前正在尝试将点击侦听器设置为LinearLayout查看在 xml使用数据绑定的布局文件 我已经设法让它在其他视图上很好地工作 比如Button or TextView 但由于某种原因 它不能与LinearLayout 这是我尝试的基本

  • Google 地图位于活动的中间区域

    我正在使用 Android studio 2 1 2 我检查了一下 大多数问题要么使用旧版本的 Android studio 要么使用一些旧的类 这些类不适用于我的情况 从文件 gt 新项目 gt 我使用了选项Google Maps Act

  • 如何使用 runOnUiThread 而不出现“无法对非静态方法进行静态引用”编译器错误

    我有一个主课 ClientPlayer extends Activity 和一项服务 LotteryServer extends Service implements Runnable 当尝试在此服务的 run 方法中使用 RunOnUiT

  • 在android中从JSON生成listview

    我对 Android 完全陌生 目前正在尝试从从我的服务器中提取的 JSON 数组生成列表视图 我已经阅读了很多教程 但没有运气 有一种独特的方法可以做到这一点 请您指出一些适合开始的资源 我读过了this http www josecgo

  • Android studio - 如何保存先前活动中选择的数据

    这是我的代码片段 这Textview充当按钮并具有Onclicklistner在他们 当cpu1000时Textview单击它会导致cpu g1000其代码如下所示的类 public class Game 1000 extends AppC

  • 更新到 Kotlin 1.3.30 后出现“未解析的引用：Parcelize”

    我使用 Kotlin 1 3 21 很长时间了kotlin android extensions插件长期处于实验模式 今天我通过升级版本切换到 Kotlin 1 3 30 现在无论我使用什么 Parcelize注释我看到错误 Unresol

  • Android 辅助功能服务检测通知

    我试图让我的应用程序在显示通知时进行检测 我已在设置应用程序中启用它并且onServiceConnected确实接到电话 但是当我创建通知或通过 gmail 应用程序接收电子邮件时 什么也没有发生 onAccessibilityEvent没

  • 将 android 蓝牙客户端套接字连接到 ubuntu 服务器套接字时出现问题

    我正在编写一个 Android 应用程序 它应该通过蓝牙与服务器交换数据 服务器端位于运行 Ubuntu 的 PC 上 使用 bluez 库 用 C 或 C 编写 当我尝试连接到 PC 上的服务器套接字时 我的 Android 应用程序失败

  • 如何在单个查询中搜索 RealmObject 的 RealmList 字段

    假设我有一堂课 public class Company extends RealmObject private String companyId private RealmList

  • 在 android studio 中找不到 SDK 位置

    我刚刚在 android studio 中导入了我的 eclipse 项目 我一直这么说 Error SDK location not found Define location with sdk dir in the local prop

  • 警报对话框中的 Webview 不显示内容

    我正在开发一个 Android 应用程序 我需要在网络视图和警报对话框上显示一个网站 该站点显示在网络视图中 但不显示在警报对话框中 到目前为止 这是我的代码 WebView WebView myWebView WebView v find

  • 带有 backstack Resume 的嵌套片段

    在我的应用程序中有几个fragments in an activity我正在维护一个backStack对于这些fragment 一切都很好 但其中有一个嵌套的片段 当我把它放入backStack然后再次按后退按钮恢复 该片段看起来与先前的内

  • Android应用主题更换流畅

    我正在开发一个提供白天和夜间主题的项目 我正在更改主题 夜间主题 AppCompatDelegate setDefaultNightMode AppCompatDelegate MODE NIGHT YES 日主题 AppCompatDel

  • 在 Xamarin 中隐藏软键盘

    如何隐藏软键盘以便在聚焦时显示Entry在 Xamarin forms 便携式表单项目中 我假设我们必须为此编写特定于平台的渲染器 但以下内容不起作用 我创建自己的条目子类 public class MyExtendedEntry Entr

  • PhoneGap 1.4 封装 Sencha Touch 2.X - 性能怎么样？

    我正在构建一个多平台平板电脑应用程序 仅使用其 Webview 使用 Phonegap 1 4 对其进行包装 然后使用 Sencha Touch 2 框架发挥我的魔力 我所说的多平台是指 iOS 5 X 和 Android 3 0 目前 到

  • Android TextureView 和硬件加速

    我正在尝试实现上所示的示例这一页 http developer android com reference android view TextureView html 我已经在运行 android 4 及以上版本的三种不同设备上进行了尝试

随机推荐

  • 北京的大学排名

    一 软科版排名榜 根据软科2022中国大学最新排名结果 北京市共有48所大学入选上榜 其中位列前十的院校为 1 清华大学 全国第1名 2 北京大学 全国第2名 3 北京航空航天大学 全国第15名 4 北京师范大学 全国第17名 5 北京理工

  • java错误1500_JAVA错误汇总

    1 Slf4J API版本兼容 问题描述 Exception in thread main java lang NoSuchMethodError org slf4j helpers MessageFormatter arrayFormat

  • 各种树的概念

    一 叶结点 终端节点 非终端节点 分支节点 根节点 内部节点 除根节点外 分支节点又称为内部节点 二 1非空二叉树 至少有一个结点的二叉树叫做非空二叉树 二叉树是每个节点最多有两个子树的树结构 1 斜树 在大话数据结构里是在二叉树一节讲的

  • Confluence 6 配置内部目录概述

    内部目录是在 Confluence 数据库中存储用户和用户组信息的空间 内部目录在系统进行安装的时候默认进行安装 当你在安装过程中创建第一个管理员用户 这个管理员用户的用户名和其他细节信息存储在系统安装的内部目录中 如果需要 你可以配置一个

  • el-dialog水平垂直居中

    el dialog水平垂直居中 直接看代码 deep el dialog display flex flex direction column margin 0 important position absolute top 50 left

  • ICMP报文的类型

    ICMP经常被认为是IP层的一个组成部分 它传递差错报文以及其他需要注意的信息 ICMP报文通常被IP层或更高层协议 TCP或UDP 使用 一些ICMP报文把差错报文返回给用户进程 ICMP报文是在IP数据报内部被传输的 如图6 1所示 I

  • 软件测试常见风险分析

    文章目录 软件测试常见风险分析 一 1 需求风险 2 测试用例风险 3 缺陷风险 4 代码质量风险 5 测试环境风险 6 试技术风险 7 回归测试风险 8 沟通协调风险 9 其它不可预计风险 软件测试常见风险分析 二 1 人力 风险评估点

  • nacos安装和启动(windows)

    nacos官网地址 home 1 搭建java环境 Nacos 依赖 Java 环境来运行 如果您是从代码开始构建并运行 Nacos 需要为此配置 Maven 环境 Windows 安装下载 zap 文件 不需要 Maven 环境 但必须安

  • 在centos7安装theia

    前段时间组装了一台主机 用来充当服务器主机 服务器主机选用centos7系统 我顺便在centos安装theia theia是个操作Linux的工具 十分好用 在我写的文章里 在树莓派4b上配置Theia 搭建云端编程 已经介绍了ubunt

  • 关于阿里云服务器ECS与域名的绑定详细过程介绍

    本文简单的介绍下阿里云的虚拟服务器ECS与域名绑定 条件 阿里云服务器 已实名认证域名 域名解析 1进入阿里云管理控制台 云解析DNS 选择需要解析的域名 解析 2添加两条解析 打码的地方添自己服务器的公网IP 添加解析后 需要检查服务的端

  • 注入多个实现类【JAVA】(设计模式之策略模式）项目实际场景【Spring boot】

    文章目录 业务场景 策略模式的概念 代码示例 1 创建一个接口类 2 创建接口类的实现类 3 创建脚手架 box类 4 最后创建一个实现工厂类 MsgBeanFactory 5 测试代码 6 输出结果 总结 业务场景 最近有一个场景消息发送

  • 表格行与列边框样式处理的原理分析及实战应用

    欢迎大家前往腾讯云社区 获取更多腾讯海量技术实践干货哦 作者 韩宇波 导语 table之间的边框存在共用问题 自然而然就存在冲突 既然存在冲突 那么就势必涉及到最后渲染哪一个样式的问题 本文就主要研究当冲突产生时 如何让浏览器按照自己意愿渲

  • 新的开始----

    种一棵树最好的时间就是现在 为什么记录博客呢 因为记不住 如何学 怎么学习编程 利用能利用的时间 学上不会的 补上会了不熟的 攻克看了还是模棱两可的 博客模板 总分总 WWH

  • Qt中QT_BEGIN_NAMESPACE和QT_END_NAMESPACE的作用

    在Qt中 我们经常会看到 QT BEGIN NAMESPACE class QAction class QMenu class QPlainTextEdit QT END NAMESPACE 这样的方式表达方式 这样做有什么意义呢 只要深入

  • 【华为OD统一考试B卷

    华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一修改为OD统一考试 A卷 和OD统一考试 B卷 你收到的链接上面会标注A卷还是B卷 请注意 根据反馈 目前大部分收到的都是

  • 函数变更记录表 function_change

    函数变更记录表 datamart function change 表结构 CREATE TABLE datamart function change function name character varying 200 函数名 new p

  • Linux巡检脚本

    linux巡检脚本 转自 http myit icu index php archives 1634 待测试 bin bash Author Dean Date 2021 11 25 E mail deanmr qq com bin bas

  • Application tried to present modally an active controller

    控制器模态到另一个控制器发生了错误 报错是Application 试图模态到一个活跃的控制器中 第一次模态的时候不会出现问题 第二次发生了问题 也就是说明了第二次模态的视图是活跃状态 没有销毁 查找代码 发现了问题 第一次模态之后 控制器不

  • json-server常见问题

    json server搭建本地测试服务器 mock数据 模拟后台数据 现在基本上都是前后端分离 前端是前端工程师 后端属于后端工程师 但是前后端交互是个必不可少的环节 一般用Ajax进行交互 还需要一些实验数据来支撑 就需要模拟数据 1 v

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

    目录 为什么要使用约束布局ConstraintLayout 约束布局基本属性 约束布局简单使用方法 示例 示例一 仿QQ消息 示例二 仿微信登陆界面 示例三 仿QQ音乐界面 补充 写在最后 ScrollView 滚动布局 示例一 纵向滚动

热门标签