本文详解如何使用 constraintlayout 替代 relativelayout，通过约束链与比例定位实现两个 lottie 动画在所有设备上始终精确居中、上下对齐且保持视觉层级关系，彻底解决因屏幕尺寸差异导致的布局偏移问题。
在 Android 开发中，为启动页（Splash Screen）设计高质量动效时，Lottie 是首选方案。但许多开发者会遇到一个典型问题：使用 RelativeLayout 时，即使设置了 android:layout_centerInParent="true"，动画实际内容（如 SVG 图形锚点或文字基线）仍可能偏离视觉中心——这是因为 Lottie 的渲染区域（view bounds）与动画内容的逻辑中心（composition origin）并不总是一致。尤其当两个动画需严格相对定位（例如标题动画位于图形动画上方 2/3 处）时，硬编码 marginBottom 或固定 dp 偏移将导致不同屏幕密度/宽高比下严重错位。
推荐方案：全面迁移到 ConstraintLayout
ConstraintLayout 提供了更语义化、响应式更强的定位能力，支持基于父容器比例、视图间比例及垂直/水平偏差（bias）的精确定位，完美适配全尺寸屏幕。
✅ 正确实现示例（XML）：
<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:id="@+id/activity_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primary_color"
tools:context=".activities.ActivitySplash.ActivitySplash">
<!-- 主图形动画：垂直居中，水平铺满，顶部留出 1/3 空间给标题 -->
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/title_animation"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.66" <!-- 占屏高 66%，为标题预留上方空间 -->
app:lottie_autoPlay="false"
app:lottie_loop="true"
app:lottie_rawRes="@raw/title_anim" />
<!-- 标题动画：置于主动画上方，垂直居中于其上 2/3 区域，水平居中 -->
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@id/title_animation"
app:layout_constraintBottom_toTopOf="@id/title_animation"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_bias="0.33" <!-- 从顶部起 33% 位置（即主动画上 1/3 处），等效于“主动画高度的 2/3 位置下方” -->
app:lottie_autoPlay="false"
app:lottie_loop="false"
app:lottie_rawRes="@raw/title_app" />
</androidx.constraintlayout.widget.ConstraintLayout>? 关键技巧说明：
- 使用 0dp + constraint 组合替代 match_parent，确保响应式拉伸；
- app:layout_constraintHeight_percent 实现动态高度占比，避免硬编码 dp；
- app:layout_constraintVertical_bias="0.33" 是核心：它让标题动画在「主动画的顶部到顶部」这一约束区间内，按 33% 比例定位——即恰好落在主动画顶部向下 1/3 高度处，视觉上就是“位于主动画上方 2/3 高度位置”；
- 若需微调（如补偿动画自身内边距），可结合 app:layout_marginTop（单位为 dp）进行像素级修正，但应优先用 bias 和 percent 保证跨屏一致性。
⚠️ 注意事项：
- 确保已添加 ConstraintLayout 依赖（implementation 'androidx.constraintlayout:constraintlayout:2.1.4' 或更高版本）；
- Lottie 动画资源（.json）本身建议在 AE 中导出时统一设置合成锚点（Anchor Point）为 (50%, 50%)，从源头减少偏移；
- 在代码中启动动画时，务必调用 lottieView.setAnimation(R.raw.xxx) 后再 playAnimation()，避免因异步加载导致初始帧错位。
通过以上结构化约束，两个 Lottie 动画将真正实现「与屏幕尺寸无关的几何中心对齐」和「可控的相对层级定位」，大幅提升 Splash 页面的专业性与兼容性。
