布局的替代方案取决于LinearLayout权重

Question

我正在尝试创建一个UI，截至目前，它利用了LinearLayout和嵌套这些。

这或多或少都是我想要完成的事情。

+----------------------------------+ |Overlay Text | | | | | | | | | | | | IMAGE | | | | | | | | | | | | | +----------------------------------+ |Overlay Text |Overlay Text | | | | | | | | | IMAGE | | | | | | | | | | | IMAGE +-----------------+ | | | | | | | | | | | BUTTON | | | | | | | +----------------+-----------------+

主要问题是使用centerCrop属性，因此容器面板是固定大小的。

我能够让这个工作正常但我已经读过，由于重新计算了嵌套视图的混乱，性能可能会受到多个嵌套LinearLayouts的影响。但是我没有看到其他方法。

如果你想看一下，这是我的xml。任何帮助都会很棒。

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/mainOuterLayout">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/shirtRelativeLayout">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/shirtImageView"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/shirt_red"
            android:adjustViewBounds="true"
            android:layout_weight="1"
            android:scaleType="centerCrop" />

        <TextView
            android:text="IF THIS"
            android:id="@+id/shirtTextView"
            style="@style/overlayTextView" />

    </RelativeLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/bottomLinearLayout"
        android:layout_weight="1">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/pantsRelativeLayout"
            android:layout_weight="1">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/pantsImageView"
                android:src="@drawable/blue_pants"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop" />
            <TextView
                android:text="WEAR THIS"
                android:id="@+id/pantsTextView"
                style="@style/overlayTextView" />
        </RelativeLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/bottomRightLinearLayout"
            android:layout_weight="1">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:id="@+id/shoesRelativeLayout"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/shoesImageView"
                    android:src="@drawable/shoes"
                    android:scaleType="centerCrop"
                    android:adjustViewBounds="true" />

                <TextView
                    android:text="AND THAT"
                    android:id="@+id/shoesTextView"
                    style="@style/overlayTextView" />

            </RelativeLayout>

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="Roll Again"
                android:id="@+id/reloadOutfitButton"
                android:background="#b19636"
                android:textSize="16sp"
                android:textColor="@android:color/white"
                android:layout_weight="1" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Answer 1

好消息现在我们可以从android＆＃39; s percent support Library

获得嵌套LinearLayout权重属性的替代方案

Demo HERE !

GitHub Project HERE !

考虑这个简单的布局。

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/fifty_huntv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff7acfff"
        android:text="20% - 50%"
        android:textColor="@android:color/white"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@id/fifty_huntv"
        android:background="#ffff5566"
        android:text="80%-50%"
        app:layout_heightPercent="80%"
        app:layout_widthPercent="50%"
        />

</android.support.percent.PercentRelativeLayout>

我们可以创建一些复杂的平铺布局：