抖音客户端训练营--day2-海口c网

抖音客户端训练营--day2

article/2025/7/26 21:27:21

常见的布局

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

帧布局

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

线性布局

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

约束布局

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

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

链和屏障

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

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

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

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

<androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><!-- 按钮 A 左侧对齐父布局左侧，顶部对齐父布局顶部 --><Buttonandroid: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 右侧，顶部对齐父布局顶部 --><Buttonandroid: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.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><!-- 定义控件 --><ImageViewandroid:id="@+id/image"... /><TextViewandroid:id="@+id/title"... /><Buttonandroid:id="@+id/button"... /><!-- 定义 Layer --><androidx.constraintlayout.helper.widget.Layerandroid: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