在 Android 中设置 rotationX 后对齐 2 个布局

Question

我在对两个 RelativeLayouts 设置旋转后对齐它们时遇到问题。我想创建类似 3D 的感觉（带烤箱的燃气灶），如下所示：。基本上我有 2 个圆角方形，里面有圆形进度条。我用

android:rotationX="20" //top square layout

android:rotationX="-20" //bottom square layout

我在两件事上遇到困难：

确保顶部和底部的方块保持相互连接设置旋转后。
始终确保顶部和底部具有相同的宽度（这也必须在多个设备上工作）

我目前已经实现了以下目标，如您所见，对齐远非完美：

我尝试在布局上设置布局边距，这在我自己的设备上有效，但在所有设备上的效果并不相同。我目前使用

根据顶部布局的宽度设置底部方形布局的宽度

android:layout_alignLeft="@+id/topLayout"
android:layout_alignRight="@+id/topLayout"

..然而，旋转后似乎无法正确对齐布局。有没有办法在 XML 或以编程方式实现预期效果？

布局如下xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:animateLayoutChanges="true">

    <RelativeLayout
        android:id="@+id/topLayout"
        android:rotationX="20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corners"
        android:layout_centerHorizontal="true">

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"/>

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/kookplaat1"/>

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_below="@+id/kookplaat2"/>

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/kookplaat3"
            android:layout_alignLeft="@+id/kookplaat2"/>

    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/bottomLayout"
        android:rotationX="-20"
        android:layout_alignLeft="@+id/topLayout"
        android:layout_alignRight="@+id/topLayout"


        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corners"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/topLayout">

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat5"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

</RelativeLayout>

Answer 1

问题是您没有指定旋转的轴心位置，因此默认情况下会根据视图的中心进行旋转。

由于您希望顶视图的底部与底视图的顶部对齐，因此您希望分别将它们作为每个视图的锚点。

确保在旋转之前为每个视图设置轴心点。为此，您需要知道每个视图的高度。如果您知道顶视图的高度，可以通过 XML 实现，如果不知道，则需要在测量发生后通过代码完成。这是一个例子：

topView.setPivotX(topView.getMeasuredWidth() / 2);
topView.setPivotY(topView.getMeasuredHeight());
topView.setRotationX(20);

bottomView.setPivotX(bottomView.getMeasuredWidth() / 2);
bottomView.setPivotY(0);
bottomView.setRotationX(-20);

在 Android 中设置 rotationX 后对齐 2 个布局

Aligning 2 layouts after setting rotationX in Android

android

xml

image-rotation