安卓:2个相对布局平分屏幕

50

我尝试过很多次绘制两个相对布局,横向对齐并分割为半屏幕。

在此输入图像描述

我使用画图工具设计了这张图片,以更好地解释我的意思。

有什么建议吗?


1
现在,您可以使用约束布局来完成此类操作。 - Suragch
5个回答

123

另一种无需使用LinearLayout实现同样任务的方法是在父布局中间放置一个居中对齐的"垫片",然后将其他元素与其对齐。如果将半宽元素的宽度设置为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>

5
最好在“centerShim”视图中设置高度为“android:layout_height =“ 0dp””。 - Mehul Joisar
4
这种方式比LinearLayout+layout_weight更有效地管理视图层次结构。 - Raymond Chenon
同时,android:gravity="center" 可以完美地将两个按钮居中。 - Mahbubur Rahman Khan

63

您可以将这两个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>

2
@V.Kalyuzhnyu,请务必发布您的更好版本,我相信它会比光速更快地得到赞同... - 2Dee
1
你的答案是正确的,但最好不要使用已占用布局,因为它们会为占用空间调用许多重绘。 - Vlad
这是一个很好的答案。如果您添加 android:layout_gravity="center",那么当您在其中一个内部布局中设置可见性为 GONE 时,其余可见布局将在水平方向上被很好地居中。不必过于担心使用 layout_weight,我相信还有更多其他方面需要关注性能。 - Luis Artola
我发现@KevBry的想法(https://dev59.com/Q2Ij5IYBdhLWcg3wsnGn#22362494)更简单、更高效。可惜它没有被接受为答案。 - head in the codes

5
现在您可以轻松使用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上的代码

更新

自API 26.0.0起,PercentRelativeLayout已弃用


1
你可以使用一个不推荐的结构,其中包含嵌套权重。

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>

0

我在你的绘图中看到了4个RelativeLayouts...?

如果你指的是中间的两个,把它们放进一个LinearLayout(水平方向),让它们都有match_parent的宽度,并给两个RelativeLayouts都分配1的权重。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接