【问题标题】:Making two LinearLayouts have 50% of the screen each without using layout_weight不使用 layout_weight 使两个 LinearLayout 各占屏幕的 50%
【发布时间】:2012-05-10 17:28:15
【问题描述】:

我目前正在对横向屏幕进行特殊的 xml 布局,其中存在 4 个图像,并且 2 个 LinearLayouts 彼此相邻,每个具有 2 个图像。这些LinearLayouts 我称之为linearLayout1linearLayout2

linearLayout1 用蓝色矩形标记:

linearLayout2 用蓝色矩形标记:

如您所见,第一个使用了大约 80% 的屏幕,而第二个使用了剩余的屏幕。我当然不想要这个,我想要每个 50%。我不能使用 layout_weight,因为它已经在 LinearLayouts 本身中使用(两个图像的定位)并且嵌套的权重不利于性能。

我尝试了许多不同的变体,但我根本无法让两个 LinearLayout 各占屏幕的 50%。代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/db1_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >

<LinearLayout
    android:id="@+id/title_container"
    style="@style/TitleBar" >

    <ImageView
        style="@style/TitleBarLogo"
        android:contentDescription="@string/imgViewDesc"
        android:src="@drawable/title_logo" />

    <ImageView
        style="@style/TitleBarSeparator"
        android:contentDescription="@string/imgViewDesc" />

    <TextView style="@style/TitleBarText" />

    <ImageButton
        style="@style/TitleBarAction"
        android:contentDescription="@string/imgViewDesc"
        android:onClick="onClickAbout"
        android:src="@drawable/title_about" />
</LinearLayout>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/title_container"
    android:layout_above="@+id/mobFoxView" >

    <!-- LEFT COLUMN -->

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/mobFoxView"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/linearLayout2"
        android:background="@color/white"
        android:gravity="center"
        android:orientation="vertical"
        android:weightSum="2" >

        <ImageView
            android:id="@+id/imgNews"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:contentDescription="@string/imgViewDesc"
            android:onClick="onClickFeature"
            android:src="@drawable/front_news_1" />

        <ImageView
            android:id="@+id/imgReleases"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:contentDescription="@string/imgViewDesc"
            android:onClick="onClickFeature"
            android:src="@drawable/front_releases_1" />
    </LinearLayout>

    <!-- RIGHT COLUMN -->

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_above="@+id/mobFoxView"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/linearLayout1"
        android:background="@color/white"
        android:gravity="center"
        android:orientation="vertical"
        android:weightSum="2" >

        <ImageView
            android:id="@+id/imgArtists"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:contentDescription="@string/imgViewDesc"
            android:onClick="onClickFeature"
            android:src="@drawable/front_artists_1" />

        <ImageView
            android:id="@+id/imgLabels"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:contentDescription="@string/imgViewDesc"
            android:onClick="onClickFeature"
            android:src="@drawable/front_labels_1" />
    </LinearLayout>
</RelativeLayout>

<com.mobfox.sdk.MobFoxView
    android:id="@+id/mobFoxView"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    mode="test"
    publisherId="@string/mobFoxID" />

</RelativeLayout>

【问题讨论】:

  • 无论如何我都会使用嵌套的 layout_weight 。性能不会那么差。

标签: android android-layout android-linearlayout


【解决方案1】:

嗯,我在这里看到了两个选项。

  1. 拧紧该 LINT 警告并使用嵌套权重。手机速度很快,而且它会产生几毫秒的差异,因为你只膨胀一次布局(大部分时间)。嵌套布局只会对性能不利,因为充气机需要通过更多次才能测量布局。

  2. 将您的顶部LinearLayout 替换为RelativeLayout,并将两个孩子与中间的不可见View 对齐,如下所示:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/top"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
      android:id="@+id/center_point"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_centerInParent="true"/>

    <LinearLayout
      android:id="@+id/left_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_alignParentLeft="true"
      android:layout_alignRight="@+id/center_point">
    </LinearLayout>


    <LinearLayout
      android:id="@+id/right_layout"
      android:orientation="horizontal" //default
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_alignParentRight="true"
      android:layout_alignLeft="@+id/center_point">
    </LinearLayout>

</RelativeLayout>

【讨论】:

  • +1 用于 LINT 警告评论(我有这种感觉已经很长时间了)。以及合理的解决方案
  • 你说的是我的“顶级线性布局”,你指的是哪一个?我的顶部布局是相对布局。
  • 我以为您在询问如何在不使用权重的情况下在 LinearLayout 中划分布局。由于您已经在RelativeLayout 中有两个布局,那么您已经是解决方案#2 的一部分。创建第三个不可见的视图,该视图位于父级 LinearLayout 的中心,并将另外两个与该视图对齐。
【解决方案2】:

您可以为布局设置“权重”,如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent" >
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
    </LinearLayout>
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
    </LinearLayout>

所以每个线性输出占据屏幕的 50%。 :)

【讨论】:

    【解决方案3】:

    如果您试图避免将某个功能用于其预期目的,您可能应该考虑您的方法是否不理想......您似乎正在尝试将项目排列成行和列。尝试使用TableLayout

    【讨论】:

      【解决方案4】:

      没有layout_weight,把这两个linearlayout放到一个父linearlayout中

      <LinearLayout orientation:horizontal>
                 <LinearLayout Child 1 />
                 <LinearLayout Child 2 />
      </LinearLayout>
      

      使用 layout_gravity 将它们居中,如果这些线性布局的内容大小相同,则它们应该大小相同

      如果没有,那么你仍然有问题

      并且可能需要使用代码调整大小

      【讨论】:

        猜你喜欢
        • 2022-12-22
        • 2020-09-15
        • 2021-09-07
        • 1970-01-01
        • 1970-01-01
        • 2011-04-20
        • 1970-01-01
        • 1970-01-01
        • 2019-08-05
        相关资源
        最近更新 更多