web-dev-qa-db-ja.com

RelativeLayout：ビューを他のビューに対して水平または垂直に中央揃えにします

別の既存のビューに従って、水平または垂直に中央揃えされたRelativeLayoutのXMLのビューを整列させることは可能ですか？.

たとえば、次のようなものがあるとします。

enter image description here

2番目のテキストビューは、最初のテキストビューの下の中央に表示されます。

<?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" >

    <TextView
        Android:id="@+id/textView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_marginLeft="72dp"
        Android:text="dynamic text" />

    <TextView
        Android:id="@+id/second"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_below="@id/textView"
        Android:layout_marginLeft="43dp" <!-- Is there a rule to center it? -->
        Android:text="centered below text 1" />

</RelativeLayout>

そのようなものをXMLで実装することは可能ですか？まだ見逃しているルールはありますか？プログラムで位置を計算したくない

androidcenterandroid-relativelayout
19
sockeqwe

これらのビューに個別の親レイアウトを使用し、それをメインレイアウトに追加します（もしあれば他のものを含めることができます）

<?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" >
    <LinearLayout
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:orientation="vertical"
         Android:gravity="center"
         Android:layout_marginLeft = "30dp">
        <TextView
            Android:id="@+id/textView"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="dynamic text" />

        <TextView
            Android:id="@+id/second"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="centered below text 1" />
    </LinearLayout>
...
...
other veiws go here
...

</RelativeLayout>
13
Noundla Sandeep

私は受け入れられたものよりもはるかに良い解決策を持っています。追加のネストはありません！これを行うには、小さいビューで2つの属性を組み合わせます。水平方向の中央に配置する場合は、align_startとalign_endの両方を使用して大きなビューを表示できます。 「Android：gravity = "center"」というテキストの重力が中央に配置されていることを確認してください。垂直方向の配置の場合は、align_topとalign_bottomの両方を使用します。以下は、レイアウトの変更された実装です。

<?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"
Android:paddingLeft="43dp" >

<TextView
    Android:id="@+id/textView"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_alignStart="@+id/second"
    Android:layout_alignEnd="@+id/second"
    Android:gravity="center"
    Android:text="dynamic text" />

<TextView
    Android:id="@+id/second"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_below="@id/textView"
    Android:gravity="center"
    Android:text="centered below text 1" />

</RelativeLayout>

受け入れられた回答のように不要な入れ子は必要ありません。

28
Jessicardo

あなたに合った次のものを使用してください

    Android:layout_centerHorizontal="true"
    Android:layout_centerInParent="true"    
    Android:layout_centerVertical="true"
8
stinepike

正しい解決策は、ConstraintLayoutを使用することです

RelativeLayoutのボタンの下にテキストビューを水平に配置しようとしましたが、align_bottomとlayout_belowが一緒にうまく機能しなかったため、不可能でした。最後に、constraintLayoutを取得して同じロジックを試しましたが、それは魅力のように機能しました。以下がそのコードです。

<Android.support.constraint.ConstraintLayout 
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:clipChildren="false"
xmlns:Android="http://schemas.Android.com/apk/res/Android">

<Button
    Android:id="@+id/episode_recording_header_stop"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@mipmap/ic_launcher"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.399" />


<TextView
    Android:id="@+id/button_selected_text"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="8dp"
    Android:textAlignment="center"
    Android:textColor="@Android:color/black"
    Android:textSize="12sp"
    Android:text="text which is exactly center aligned w.r.t the Button above"
    app:layout_constraintEnd_toEndOf="@+id/episode_recording_header_stop"
   app:layout_constraintStart_toStartOf="@+id/episode_recording_header_stop"
    app:layout_constraintTop_toBottomOf="@+id/episode_recording_header_stop" 
    />

</Android.support.constraint.ConstraintLayout>

最終的な出力は以下に添付されています

enter image description here

3
Rakesh Gopathi

私は解決策を見つけました：コンテンツを別のRelativeLayoutにラップしてから、このLayoutWrapperを好きな場所に配置できます：

<?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" >

    <RelativeLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentTop="true"
        Android:layout_marginLeft="58dp"
        Android:layout_marginTop="58dp" >

        <TextView
            Android:id="@+id/textView"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentTop="true"
            Android:layout_centerInParent="true"
            Android:text="dynamic text" />

        <TextView
            Android:id="@+id/second"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_below="@+id/textView"
            Android:layout_centerInParent="true"
            Android:text="centered below text 1" />
    </RelativeLayout>

</RelativeLayout>
0
sockeqwe

これを行う->

<?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" >

    <TextView
        Android:id="@+id/textView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true"
        Android:text="dynamic text" />

    <TextView
        Android:id="@+id/second"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_below="@+id/textView"
        Android:layout_centerHorizontal="true" <!-- Is there a rule to center it? -->
        Android:text="centered below text 1" />

</RelativeLayout>
0
Vishal Pawale