做两个LinearLayouts有屏幕的各占50%,而无需使用layout_weight各占、屏幕、两个、layout_weight

2023-09-04 07:38:28 作者:反蓝

目前,我正在做一个横向屏幕,其中4图像present和2 LinearLayouts是相邻的各2图像的特殊的XML布局。这些LinearLayouts我称之为 linearLayout1 linearLayout2

linearLayout1 标记为蓝色矩形:

linearLayout2 标记为蓝色矩形:

正如你所看到的,第一个使用〜80%的屏幕,而第二个使用还剩下些什么。我不希望这门课程,我要为各占50%。我不能使用 layout_weight ,因为它已经用在LinearLayouts本身(两幅图像的定位)和嵌套的权重是不好的表现。

我已经尝试了许多不同的变化,但我根本无法获得这两个LinearLayouts让每个屏幕的50%。这里的code:

 < XML版本=1.0编码=UTF-8&GT?;
< RelativeLayout的的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
机器人:ID =@ + ID / db1_root
机器人:layout_width =FILL_PARENT
机器人:layout_height =FILL_PARENT
机器人:方向=横向>

<的LinearLayout
    机器人:ID =@ + ID / title_container
    风格=@风格/ TitleBar中>

    < ImageView的
        风格=@风格/ TitleBarLogo
        机器人:contentDescription =@字符串/ imgViewDesc
        机器人:SRC =@可绘制/ title_logo/>

    < ImageView的
        风格=@风格/ TitleBarSeparator
        机器人:contentDescription =@字符串/ imgViewDesc/>

    < TextView的风格=@风格/ TitleBarText/>

    <的ImageButton
        风格=@风格/ TitleBarAction
        机器人:contentDescription =@字符串/ imgViewDesc
        机器人:的onClick =onClickAbout
        机器人:SRC =@可绘制/ title_about/>
< / LinearLayout中>

< RelativeLayout的
    机器人:layout_width =FILL_PARENT
    机器人:layout_height =WRAP_CONTENT
    机器人:layout_below =@ ID / title_container
    机器人:layout_above =@ + ID / mobFoxView>

    <! - 左边一列 - >

    <的LinearLayout
        机器人:ID =@ + ID / linearLayout1
        机器人:layout_width =FILL_PARENT
        机器人:layout_height =FILL_PARENT
        机器人:layout_above =@ + ID / mobFoxView
        机器人:layout_alignParentLeft =真
        机器人:layout_toLeftOf =@ + ID / linearLayout2
        机器人:背景=@色/白
        机器人:重力=中心
        机器人:方向=垂直
        机器人:weightSum =2>

        < ImageView的
            机器人:ID =@ + ID / imgNews
            机器人:layout_width =WRAP_CONTENT
            机器人:layout_height =0dp
            机器人:layout_weight =1
            机器人:contentDescription =@字符串/ imgViewDesc
            机器人:的onClick =onClickFeature
            机器人:SRC =@可绘制/ front_news_1/>

        < ImageView的
            机器人:ID =@ + ID / imgReleases
            机器人:layout_width =WRAP_CONTENT
            机器人:layout_height =0dp
            机器人:layout_weight =1
            机器人:contentDescription =@字符串/ imgViewDesc
            机器人:的onClick =onClickFeature
            机器人:SRC =@可绘制/ front_releases_1/>
    < / LinearLayout中>

    <! - 右列 - >

    <的LinearLayout
        机器人:ID =@ + ID / linearLayout2
        机器人:layout_width =WRAP_CONTENT
        机器人:layout_height =FILL_PARENT
        机器人:layout_above =@ + ID / mobFoxView
        机器人:layout_alignParentRight =真
        机器人:layout_alignTop =@ ID / linearLayout1
        机器人:背景=@色/白
        机器人:重力=中心
        机器人:方向=垂直
        机器人:weightSum =2>

        < ImageView的
            机器人:ID =@ + ID / imgArtists
            机器人:layout_width =WRAP_CONTENT
            机器人:layout_height =0dp
            机器人:layout_weight =1
            机器人:contentDescription =@字符串/ imgViewDesc
            机器人:的onClick =onClickFeature
            机器人:SRC =@可绘制/ front_artists_1/>

        < ImageView的
            机器人:ID =@ + ID / imgLabels
            机器人:layout_width =WRAP_CONTENT
            机器人:layout_height =0dp
            机器人:layout_weight =1
            机器人:contentDescription =@字符串/ imgViewDesc
            机器人:的onClick =onClickFeature
            机器人:SRC =@可绘制/ front_labels_1/>
    < / LinearLayout中>
< / RelativeLayout的>

< com.mobfox.sdk.MobFoxView
    机器人:ID =@ + ID / mobFoxView
    机器人:layout_width =FILL_PARENT
    机器人:layout_height =50dp
    机器人:layout_alignParentBottom =真
    模式=测试
    publisherId =@字符串/ mobFoxID/>

< / RelativeLayout的>
 

解决方案

嗯,有两个选择,我看可以在这里找到。

螺杆皮棉警告,并使用嵌套的权重呢。手机的速度快,它将使价值的差异毫秒,因为你只充气布局一次(大部分时间)。有嵌套布局是唯一不好的性能,因为充气需要做出更多的传球来衡量的布局。

交换你的前的LinearLayout RelativeLayout的并对齐两个孩子一个无形的查看在该中心,像这样:

 < RelativeLayout的
    的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    机器人:ID =@ + ID /顶
    机器人:layout_width =match_parent
    机器人:layout_height =match_parent>

    <的LinearLayout
      机器人:ID =@ + ID / center_point
      机器人:layout_width =0dp
      机器人:layout_height =0dp
      机器人:layout_centerInParent =真/>

    <的LinearLayout
      机器人:ID =@ + ID / left_layout
      机器人:layout_width =match_parent
      机器人:layout_height =match_parent
      机器人:layout_alignParentLeft =真
      机器人:layout_alignRight =@ + ID / center_point>
    < / LinearLayout中>


    <的LinearLayout
      机器人:ID =@ + ID / right_layout
      机器人:layout_width =match_parent
      机器人:layout_height =match_parent
      机器人:layout_alignParentRight =真
      机器人:layout_alignLeft =@ + ID / center_point>
    < / LinearLayout中>

< / RelativeLayout的>
 

这十个网站,错过了保证你会后悔

I'm currently doing a special xml layout of a landscape screen, where 4 images are present and 2 LinearLayouts are next to each other with 2 images each. These LinearLayouts I call linearLayout1 and linearLayout2.

linearLayout1 is marked with blue rectangle:

linearLayout2 is marked with blue rectangle:

As you can see, the first one uses ~80% of the screen, while the second one uses what's left. I don't want this of course, I want 50% for each. I can't use layout_weight because it's already used in the LinearLayouts themselves (positioning of the two images) and nested weights are bad for performance.

I've tried many different variations, but I simply can't get the two LinearLayouts to have 50% of the screen each. Here's the code:

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

解决方案

Well, there are two options I see available here.

Screw that LINT warning and use the nested weights anyway. Phones are fast and it will make milliseconds worth of a difference since you only inflate layouts once (most of the time). Having nested layouts is only bad for performance because the inflator needs to make more passes to measure the layouts.

Swap your top LinearLayout with a RelativeLayout and align the two children to an invisible View in the center like so:

<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:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_alignParentRight="true"
      android:layout_alignLeft="@+id/center_point>
    </Linearlayout>

</RelativeLayout>