android - 相对布局 : centering of two FrameLayout elements

Question

在我的 activity_main.xml 中，我有许多元素，其中我想让两个 FrameLayout 元素居中。如果我只有两个 FrameLayout 元素，它们就会正确居中。以下是显示的代码和屏幕截图:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.abcd.testlayout.MainActivity">

    <FrameLayout
        android:id="@+id/vertical_line"
        android:background="@color/colorPrimary"
        android:layout_width="50dp"
        android:layout_height="280dp">
        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/presence_audio_away" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/vertical_line2"
        android:background="@color/colorAccent"
        android:layout_width="280dp"
        android:layout_height="50dp"
        android:layout_below="@+id/vertical_line">
        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/ic_lock_idle_alarm" />
    </FrameLayout>

</RelativeLayout>

如您所见，我有两条线，一条垂直的蓝线和一条水平的粉红色线。粉色线水平居中，蓝色线垂直居中。这正是我想要的。

现在，如果我将所有其他元素添加到布局中，这里是代码和屏幕截图:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.abcd.testlayout.MainActivity">

    <FrameLayout
        android:id="@+id/vertical_line"
        android:background="@color/colorPrimary"
        android:layout_width="50dp"
        android:layout_height="280dp">
        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/presence_audio_away" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/vertical_line2"
        android:background="@color/colorAccent"
        android:layout_width="280dp"
        android:layout_height="50dp"
        android:layout_below="@+id/vertical_line">
        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/ic_lock_idle_alarm" />
    </FrameLayout>

    <ImageView
        android:id="@+id/img1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter" />

    <RelativeLayout
        android:gravity="center"
        android:id="@+id/rel"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:antialias="true"
            android:scaleType="matrix" />
    </RelativeLayout>

    <ImageButton
        android:id="@+id/img3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        app:srcCompat="@android:drawable/btn_default_small"/>

    <ImageButton
        android:id="@+id/imageButton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/imageButton"
        android:layout_marginStart="42dp"
        android:layout_marginLeft="42dp"
        app:srcCompat="@android:drawable/arrow_up_float"/>

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:layout_above="@+id/seekBar"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        app:srcCompat="@android:drawable/arrow_down_float"/>

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:max="100"
        android:progress="0"
        android:visibility="visible"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true" />

</RelativeLayout>

如您所见，蓝线和红线移到了左上角，但我喜欢这两个元素的位置与上一个屏幕截图中的位置保持一致。

有没有办法做到这一点，意思是将蓝线和红线移动到与上一个屏幕截图完全相同的位置，并保持其他元素的位置不变，而不尝试向这些元素添加左边距或按钮边距？适用于所有手机尺寸甚至平板电脑的东西，只需使用 gravity:center 或类似的东西？

Answer 1

将这两个 View 包装在另一个 RelativeLayout 中，如下所示:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        tools:context=".MainActivity">

        <FrameLayout
            android:id="@+id/vertical_line"
            android:layout_width="50dp"
            android:layout_height="280dp"
            android:background="@color/colorPrimary">

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:srcCompat="@android:drawable/presence_audio_away" />
        </FrameLayout>

        <FrameLayout
            android:id="@+id/vertical_line2"
            android:layout_width="280dp"
            android:layout_height="50dp"
            android:layout_below="@+id/vertical_line"
            android:background="@color/colorAccent">

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:srcCompat="@android:drawable/ic_lock_idle_alarm" />
        </FrameLayout>
    </RelativeLayout>

    <!-- Your other views -->

</RelativeLayout>