Android布局如何实现多个ImageView与ProgressBar堆叠且全部共中心点居中

问题原因 #

你遇到的偏移问题核心有两个：

• layout_gravity属性对RelativeLayout无效，该属性仅适用于FrameLayout、LinearLayout这类父容器，你前两个ProgressBar能正常居中是因为添加了layout_centerVertical + layout_centerHorizontal属性，但如果控件自身的drawable存在不对称透明边距，就算控件几何中心对齐，内容也会看起来偏移
• 堆叠居中的场景下RelativeLayout不是最优选择，属性冗余容易出现逻辑冲突

解决方案 #

优先替换父布局为FrameLayout，这是Android官方推荐的堆叠布局实现，所有子控件只要统一配置layout_gravity="center"就能保证几何中心完全重合，修改后的XML代码如下：

<FrameLayout
    android:layout_width="760dp"
    android:layout_height="804dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.767">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="559dp"
        android:layout_height="521dp"
        android:layout_gravity="center"
        android:indeterminateOnly="false"
        android:progressDrawable="@drawable/circlebar"
        tools:progress="60" />

    <ProgressBar
        android:id="@+id/imageView3"
        android:layout_width="445dp"
        android:layout_height="503dp"
        android:layout_gravity="center"
        android:indeterminateOnly="false"
        android:progressDrawable="@drawable/circleblue"
        tools:progress="80" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="406dp"
        android:layout_height="454dp"
        android:layout_gravity="center"
        android:scaleType="centerInside"
        android:src="@drawable/pointerbig1" />

    <ImageView
        android:id="@+id/arrow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="centerInside"
        android:src="@drawable/arrow" />

</FrameLayout>

额外注意事项 #

如果修改后还有内容偏移，检查pointerbig1、arrow这两个drawable资源，是否存在多余的不对称透明边距，导致drawable内容的中心点和控件几何中心不重合：

• 可直接裁剪掉drawable的多余透明区域解决
• 也可以在代码中设置旋转轴心时手动调整偏移，示例代码如下：

// 以arrow1为例，显式指定旋转轴心
val arrow = findViewById<ImageView>(R.id.arrow1)
// 若drawable内容中心比控件中心偏左10dp、偏上5dp，就调整pivot的数值
arrow.pivotX = arrow.width / 2f + dpToPx(10)
arrow.pivotY = arrow.height / 2f + dpToPx(5)

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