android - 要素を相対的なレイアウトで別の要素の中央と上に配置するにはどうすればよいですか?

Question

私が何を望んでいるかを理解できるように、ここに写真があります：

この緑色の要素は既に相対レイアウトに設定されていますが、その上に別の要素 (写真の黒い要素) を配置して、緑色の要素のちょうど中央に配置する必要があります。

黒の要素の幅は一定ではなく、緑の要素よりも幅が広いことに注意してください。

android:layout_alignLeft や android:layout_alignRight のようなものがあります。これは、左または右に揃えたい場合に役立ちますが、私が知る限り android:layout_alignCenter がないため、このことを行う方法がわかりません...

Answer 1

あなたが言ったように、両方の要素をRelativeLayout内に配置します。

次に、両方の要素の " center_horizo​​ntal " プロパティを true に設定し、次に緑要素の " below " プロパティを黒要素の id に設定します。

完全な例を次に示します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:background="@color/Black"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <View
        android:id="@+id/view2"
        android:layout_height="100dp"
        android:layout_below="@+id/view1"
        android:background="@color/Green"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

(「center_vertical」はオプションです)

またはここで、他のビューの位置に関係なく:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:background="@color/Black"
        android:layout_centerVertical="true" />

    <View
        android:id="@+id/view2"
        android:layout_width="40dp"
        android:layout_height="100dp"
        android:layout_below="@+id/view1"
        android:layout_alignLeft="@+id/view1"
        android:layout_alignRight="@+id/view1"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:background="@color/Green" />

</RelativeLayout>

(この場合、余白は 2 番目のビューの幅を定義します)

これが最終結果です。