web-dev-qa-db-ja.com

Android:半分の画面に分割された2つの相対レイアウト

私は何度も水平方向に整列し、半画面に分割された2つの相対レイアウトを描画しようとしました。

enter image description here

ペイントで画像をデザインし、私が意味することをもう少し詳しく説明します。

なにか提案を?

39
iGio90

これら2つのRelativeLayoutを水平方向のLinearLayout内に配置し、両方のRelativeLayoutに weight を使用できます。これにより、LinearLayoutが2つの等しい部分に分割されます。

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="horizontal"
    Android:baselineAligned="false">
    <RelativeLayout
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1">
   </RelativeLayout>
   <RelativeLayout
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1">
   </RelativeLayout>
</LinearLayout>
49
2Dee

LinearLayoutを使用せずに同じタスクを実行するもう1つの方法は、親レイアウトの中央に中央揃えの「シム」を配置し、他の要素をそれに合わせます。半角エレメントの幅をmatch_parentに設定し、左右を揃えると、それらは収まるように縮小します。

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:paddingBottom="@dimen/activity_vertical_margin"
    Android:paddingLeft="@dimen/activity_horizontal_margin"
    Android:paddingRight="@dimen/activity_horizontal_margin"
    Android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.EqualWidthExample" >

    <!-- An invisible view aligned to the center of the parent. Allows other
    views to be arranged on either side -->
    <View 
        Android:id="@+id/centerShim"
        Android:layout_height="match_parent"
        Android:layout_width="0dp"
        Android:visibility="invisible"
        Android:layout_centerHorizontal="true"/>

    <!--Set width to match_parent sets maximum width. alignParentLeft aligns 
    the left Edge of this view with the left Edge of its parent. toLeftOf 
    sets the right Edge of this view to align with the left Edge of the 
    given view. The result of all three settings is that this view will 
    always take up exactly half of the width of its parent, however wide 
    that may be. -->
    <Button
        Android:id="@+id/btLeft"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_toLeftOf="@+id/centerShim"
        Android:text="Left Button" />

    <!--Same deal, but on the right -->
    <Button
        Android:id="@+id/btRight"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:layout_toRightOf="@+id/centerShim"
        Android:layout_below="@+id/tvLeft"
        Android:text="Right Button" />
</RelativeLayout>
111
KevBry

percentRelativeLayoutを使用して簡単に実行できるようになりました

<Android.support.percent.PercentRelativeLayout
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:padding="16dp"
tools:context=".MainActivity">


<Button
    Android:id="@+id/button"
    Android:layout_height="wrap_content"
    Android:layout_centerVertical="true"
    Android:text="Button"
    app:layout_widthPercent="50%"/>

<Button
    Android:id="@+id/button2"
    Android:layout_height="wrap_content"
    Android:layout_centerVertical="true"
    Android:layout_toRightOf="@id/button"
    Android:text="Button 2"
    app:layout_widthPercent="50%"/>
</Android.support.percent.PercentRelativeLayout>

gradle依存関係を追加することを忘れないでください

dependencies {
     compile 'com.Android.support:percent:25.3.1'
}

githubのコード

更新

PercentRelativeLayoutはAPIレベル26.0.0以降廃止予定

5
zaPlayer

ネストされたウィジェットで非推奨構造を使用できます

Layout 1 above 2 side by side below

<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical"
    Android:baselineAligned="false"
    Android:weightSum="5">
    <RelativeLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:paddingLeft="@dimen/activity_horizontal_margin"
        Android:paddingRight="@dimen/activity_horizontal_margin"
        Android:paddingTop="@dimen/activity_vertical_margin"
        Android:paddingBottom="@dimen/activity_vertical_margin"
        Android:layout_gravity="center">
        <TextView
            Android:id="@+id/TopTextView"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:textAppearance="?android:attr/textAppearanceLarge"
            Android:text="Top Text View"
            Android:layout_alignParentTop="true"
            Android:layout_centerHorizontal="true"
            Android:layout_marginTop="5dp"/>

    </RelativeLayout>
    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:orientation="horizontal"
        Android:weightSum="2"
        Android:layout_weight="4">

        <RelativeLayout
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:paddingLeft="@dimen/activity_horizontal_margin"
            Android:paddingRight="@dimen/activity_horizontal_margin"
            Android:paddingTop="@dimen/activity_vertical_margin"
            Android:paddingBottom="@dimen/activity_vertical_margin">
            <TextView
                Android:id="@+id/LeftTextView"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                Android:text="Left Text View"
                Android:layout_centerHorizontal="true"
                Android:layout_marginTop="30dp"/>

        </RelativeLayout>
        <RelativeLayout
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:paddingLeft="@dimen/activity_horizontal_margin"
            Android:paddingRight="@dimen/activity_horizontal_margin"
            Android:paddingTop="@dimen/activity_vertical_margin"
            Android:paddingBottom="@dimen/activity_vertical_margin">
                <TextView
                    Android:id="@+id/RightTextView"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:textAppearance="?android:attr/textAppearanceLarge"
                    Android:text="Right Text View"
                    Android:layout_centerHorizontal="true"
                    Android:layout_marginTop="30dp"/>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>
1
CrandellWS

図面に4つの相対レイアウトが表示されます...?

真ん中の2つを1つのLinearLayout(水平方向)に配置する場合は、すべての幅をmatch_parentにし、両方の相対レイアウトの重みを1にします。

0
jpm