Question

这就是我的片段的样子：

除了我的车轮图像下面有两个没有出现的文字视图。我希望两个文本视图都显示出来并让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.我假设您将看到整个布局，如您所愿。现在，为了避免在较小的设备上出现此问题，您可以选择以下几种方法：

将整个布局包裹在ScrollView中（这可能并不理想，并且没有非常好的用户体验
为您的ImageView（以及其他已定义高度的视图）定义适合您打算运行应用的最小设备的高度。对于比你原先计划的设备更短的设备，这仍然会有问题，但是现在谁真的拥有这些超短设备之一......
（我建议使用）将根LinearLayout的每个子项的高度定义为权重，并在其height属性中使这些子项的子项为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>

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

1 个答案: