抖音客户端训练营--day2-EW帮帮网

常见的布局

布局的选择依赖于对性能的需求，其中约束布局的效果最好，但是学习成本高

帧布局

是最简单的布局容器，将所有的子元素堆叠在一起，默认放置在左上角，新添加的元素会覆盖在之前元素的上方，形成层叠效果

线性布局

这是最基本的布局方式，适用于简单的线性排列需求

约束布局

每个视图都有八个约束锚点：如图所示

包含上下左右四边以及四个角，可以与其他视图的锚点或者父容器建立约束关系

链和屏障

chain：将多个视图以链的形式连接，控制它们的排列方式

barrier：为一组视图创建虚拟屏障，其余视图可以依赖此屏障定位

ConstraintLayout 是 Android 开发中用于构建复杂用户界面（UI）的布局容器，属于 Android Jetpack 组件库的一部分。它的核心思想是通过定义约束关系（Constraints）来确定子控件的位置和尺寸，替代传统布局（如 LinearLayout、RelativeLayout）的层级嵌套，从而实现更灵活、高效的 UI 设计。

不需要使用层级的方式，只有一层

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

    <!-- 按钮 A 左侧对齐父布局左侧，顶部对齐父布局顶部 -->
    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 按钮 B 左侧对齐按钮 A 右侧，顶部对齐父布局顶部 -->
    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintStart_toEndOf="@+id/buttonA"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

使用Layer操作进行分组

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

    <!-- 定义控件 -->
    <ImageView
        android:id="@+id/image"
        ... />
    <TextView
        android:id="@+id/title"
        ... />
    <Button
        android:id="@+id/button"
        ... />

    <!-- 定义 Layer -->
    <androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="image,title,button"  <!-- 关联控件 -->
        android:rotation="0"  <!-- 初始旋转角度 -->
        android:translationY="0dp" /> <!-- 初始平移位置 -->

</androidx.constraintlayout.widget.ConstraintLayout>

代码中的使用

val layer = findViewById<Layer>(R.id.layer)

// 统一旋转
layer.rotation = 45f

// 统一平移
layer.translationX = 100f

// 统一缩放
layer.scaleX = 0.8f
layer.scaleY = 0.8f