RelativeLayout：兩個FrameLayout元素的居中對齊

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

裹在另一個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>