web-dev-qa-db-ja.com

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

これが私が欲しいものを理解できるように写真です:

enter image description here

この緑色の要素は既に相対レイアウトに設定されています。必要なのは、その上に別の要素(写真の黒い要素)を配置して、緑色の要素の真ん中に正確に配置されるようにすることです。

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

Android:layout_alignLeftやAndroid:layout_alignRightのようなものがあり、左または右に配置したい場合に役立ちますが、私が知る限り、Android:layout_alignCenterがないため、この方法がわかりません...

13
David Simka

あなたが自分で言ったように、両方の要素を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番目のビューの幅を定義します)

これが最終結果です。

enter image description here

20
Philipp Jahoda