如何在Android中用ConstraintLayout适配全屏幕对齐风电机组杆与叶片ImageView

我在Android项目中拥有两个ImageView组件，分别对应风电机组的杆和叶片。现需设置布局约束，使叶片始终正确附着在杆的顶端，且适配不同屏幕分辨率。

当前布局编辑器显示状态：
![当前布局编辑器中的风电机组杆与叶片布局]

当前XML布局代码：

<?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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView_windTurbinePole"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/wind_turbine_pole" />

    <ImageView
        android:id="@+id/imageView_windTurbineBlade"
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView_windTurbinePole"
        app:layout_constraintEnd_toEndOf="@+id/imageView_windTurbinePole"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/imageView_windTurbinePole"
        app:srcCompat="@drawable/wind_turbine_blade" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

补充说明：预期效果为叶片位于杆顶端的真实风电机组样式，后续需实现叶片旋转动画。
![预期的风电机组布局效果]

调整后的布局实现方案 #

要实现叶片精准附着在杆顶端且适配不同屏幕，核心是通过约束让两者中心点对齐，并使用比例控制宽高避免变形：

1. 优化风电机组杆的布局 #

将杆设置为按比例适配父布局，保持竖长的正确形态：

<ImageView
    android:id="@+id/imageView_windTurbinePole"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.2"
    app:layout_constraintDimensionRatio="1:5"
    app:srcCompat="@drawable/wind_turbine_pole" />

• layout_constraintWidth_percent="0.2"：杆的宽度占父布局宽度的20%，适配不同屏幕宽度
• layout_constraintDimensionRatio="1:5"：强制杆的宽高比为1:5，保证竖长形态不被拉伸

2. 调整叶片的约束，精准附着在杆顶端 #

让叶片的底部中心点与杆的顶部中心点对齐，同时保持与杆的比例适配：

<ImageView
    android:id="@+id/imageView_windTurbineBlade"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/imageView_windTurbinePole"
    app:layout_constraintEnd_toEndOf="@+id/imageView_windTurbinePole"
    app:layout_constraintStart_toStartOf="@+id/imageView_windTurbinePole"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent="0.16"
    app:srcCompat="@drawable/wind_turbine_blade" />

• 约束Bottom_toTopOf让叶片底部紧贴杆的顶部，水平方向与杆居中对齐
• 用百分比和宽高比控制叶片大小，保证在不同屏幕下和杆的比例协调

3. 为后续旋转动画做准备 #

如果要实现叶片旋转，显式设置旋转中心点为自身中心（默认就是，但显式设置更稳妥）：

android:rotationPivotX="50%"
android:rotationPivotY="50%"

这样旋转时叶片会围绕杆的顶端转动，符合真实风电机组的效果。

内容的提问来源于stack exchange，提问作者VanessaF