线性布局动态调整元素大小，使所有内容都适合屏幕

Question

这就是我的片段的样子：

除了我的车轮图像下方有两个未显示的文本视图。我希望两个 textviews 都显示出来，并拥有保存图像的 RelativeLayout 以缩小它的高度以适应我的 textViews。结果应如下所示：

（为了截取这个截图，我设置了一个绝对高度，这不是一个解决方案）。

我尝试了各种方法，包括设置 layout_weights，但这似乎是我为不同的元素分配百分比，这并不是我想要做的。我也尝试将我的基本布局从 linearlayout 更改为 relativeLayout，但我遇到了同样的问题。

关于如何实现这一目标的任何想法？这是我的布局：

<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="match_parent"
tools:context="com.roberts.croberts.mantis.ShotWheelFragment"
android:id="@+id/shotWheelFragment"
android:orientation="vertical"
android:background="#2b2b2b">

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="1">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simulate"
        android:id="@+id/simulateBtn"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:paddingRight="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Score"
            android:id="@+id/scoreTitle"
            android:layout_weight="1.0"
            android:gravity="right"
            android:textColor="#fff" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="00.0"
            android:id="@+id/scoreField"
            android:layout_weight="1.0"
            android:gravity="right"
            android:textColor="#fff" />
    </LinearLayout>
</LinearLayout>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/imageContainer">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/frame_back"
        android:padding="20dp"
        android:id="@+id/frameBack"
        android:contentDescription="@string/backofimage"
        android:scaleType="fitCenter" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/frame"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/frame"
        android:padding="20dp"
        android:contentDescription="@string/backofimage"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true" />

    <ImageView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:src="@drawable/reset"
        android:padding="20dp"
        android:contentDescription="@string/reset"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true" />

    <ImageView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:src="@drawable/start"
        android:padding="20dp"
        android:contentDescription="start"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" />

</RelativeLayout>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Large Text"
    android:id="@+id/textView2"
    android:layout_gravity="center_horizontal"
    android:textColor="#fff" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Large Text"
    android:id="@+id/textView"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true" />

</LinearLayout>

Answer 1

这里的问题是，您在此布局文件根目录中的 LinearLayout 将每个子元素置于其上方的子元素之下。每当您向这些孩子中的任何一个宣布身高时，孩子都会达到那个高度。时期。除非您允许缩放每个孩子的高度，否则这种布局将简单地“离开”较小屏幕设备的屏幕。为了证明这一点，请将您的预览设备更改为 Nexus 6 而不是 Nexus 4。我假设您将看到整个布局，如您所愿。现在，为避免在较小的设备上出现此问题，您有两种选择：

1. 将整个布局包装在一个 ScrollView 中（这可能并不理想，并且没有很好的用户体验

2. 为您的 ImageView（以及您为其定义了高度的其他视图）定义高度，以适合您希望运行应用程序的最小设备。对于比您计划的更短的设备，这仍然会出现问题，但是现在谁真正拥有这些超短设备之一......

3. （我会推荐什么）将根 LinearLayout 的每个孩子的高度定义为权重，并在其高度属性中让这些孩子的孩子 match_parent。这样一来，您的整个布局将适合一个屏幕而不需要滚动，但在某些情况下，您的视图会显得更加“挤压”。

希望对你有帮助，如果有什么我可以澄清的，请告诉我。

编辑：我添加了应该使用权重生成所需布局的 xml。

<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="match_parent"
    tools:context="com.roberts.croberts.mantis.ShotWheelFragment"
    android:id="@+id/shotWheelFragment"
    android:orientation="vertical"
    android:background="#2b2b2b">


    *****
    <!-- Change the layout_weight to your liking here -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight=1>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Simulate"
            android:id="@+id/simulateBtn"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true" />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:paddingRight="16dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Score"
                android:id="@+id/scoreTitle"
                android:layout_weight="1.0"
                android:gravity="right"
                android:textColor="#fff" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="00.0"
                android:id="@+id/scoreField"
                android:layout_weight="1.0"
                android:gravity="right"
                android:textColor="#fff" />
        </LinearLayout>
    </LinearLayout>

    *****
    <!-- Change the layout_weight to your liking here -->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:id="@+id/imageContainer"
        android:layout_weight="10">

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/frame_back"
            android:padding="20dp"
            android:id="@+id/frameBack"
            android:contentDescription="@string/backofimage"
            android:scaleType="fitCenter" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/frame"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/frame"
            android:padding="20dp"
            android:contentDescription="@string/backofimage"
            android:layout_alignParentTop="true"
            android:layout_alignParentBottom="true" />

        <ImageView
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:src="@drawable/reset"
            android:padding="20dp"
            android:contentDescription="@string/reset"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true" />

        <ImageView
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:src="@drawable/start"
            android:padding="20dp"
            android:contentDescription="start"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true" />

    </RelativeLayout>

    *****
    <!-- Change the layout_weight to your liking here -->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:id="@+id/textViewContainer"
        android:layout_weight="2">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView2"
            android:layout_gravity="center_horizontal"
            android:textColor="#fff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" />

    </RelativeLayout>
</LinearLayout>