Question

我的UI设计师给出了一个屏幕补偿，顶部有一个导航栏，然后是每个下面有5个带有匹配文本标签的图标。我需要确保每个填充的填充保持相对足够，以使所有5个图标/标签对保留在屏幕上。

以下是我给出的参考指南： enter image description here

这是我当前的XML - 两个简单的相对布局 - 一个用于导航栏，另一个用于剩余空间，具有对齐和填充内容（以及一个背景图像，它们都位于顶部）。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:ignore="ContentDescription" >

    <ImageView
        android:id="@+id/guide_bg_img"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/guide_bg" />

    <RelativeLayout
        android:id="@+id/guide_nav"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@+color/transparent_grey"
        android:padding="5dp" 
    >

        <ImageButton
            android:id="@+id/guide_toggle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/guide_replay"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/guide_toggle_icon" />

        <ImageButton
            android:id="@+id/guide_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/guide_back_icon" />

        <ImageButton
            android:id="@+id/guide_replay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/guide_toggle"
            android:src="@drawable/guide_replay_icon" />

        <TextView
            android:id="@+id/guide_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="30dp"
            android:layout_toLeftOf="@+id/guide_replay"
            android:text="@+string/label_guide"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/guide_labels"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_below="@+id/guide_nav"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/guide_ear_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/guide_ear_icon" />

        <TextView
            android:id="@+id/guide_ear_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_ear_icon"
            android:layout_centerHorizontal="true"
            android:padding="10dp"
            android:text="@string/label_guide_ear"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <ImageView
            android:id="@+id/guide_car_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_ear_label"
            android:layout_centerHorizontal="true"
            android:src="@drawable/guide_cars_icon" />

        <TextView
            android:id="@+id/guide_car_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_car_icon"
            android:layout_centerHorizontal="true"
            android:padding="10dp"
            android:text="@string/label_guide_car"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <ImageView
            android:id="@+id/guide_live_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_car_label"
            android:layout_centerHorizontal="true"
            android:src="@drawable/guide_live_icon" />

        <TextView
            android:id="@+id/guide_live_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_live_icon"
            android:layout_centerHorizontal="true"
            android:padding="10dp"
            android:text="@string/label_guide_live"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <ImageView
            android:id="@+id/guide_device_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_live_label"
            android:layout_centerHorizontal="true"
            android:src="@drawable/guide_device_icon" />

        <TextView
            android:id="@+id/guide_device_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_device_icon"
            android:layout_centerHorizontal="true"
            android:padding="10dp"
            android:text="@string/label_guide_device"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <ImageView
            android:id="@+id/guide_explore_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_device_label"
            android:layout_centerHorizontal="true"
            android:src="@drawable/guide_explore_icon" />

        <TextView
            android:id="@+id/guide_explore_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_explore_icon"
            android:layout_centerHorizontal="true"
            android:padding="10dp"
            android:text="@string/label_guide_explore"
            android:textAppearance="?android:attr/textAppearanceMedium" />

     <TextView
            android:id="@+id/guide_explore_enjoy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/guide_explore_label"
            android:layout_centerHorizontal="true"
            android:padding="10dp"
            android:text="@string/label_guide_enjoy"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </RelativeLayout>

</RelativeLayout>

问题是我的底部两个TextView正从屏幕底部消失。

见附图：

enter image description here

我的部分问题是我只有（目前）获得了一个密度的资产，但我正在测试四个实时设备以及几个仿真器（N5，N4，Galaxy Nexus，HTC One X），以及问题是在屏幕尺寸和密度上持续存在。

我可以尝试硬编码填充以按摩它，但我想相信有更好的方法来做到这一点 - 基本上是将布局的内容扩展到设置的边界。

我搜索了网络，也许我的术语让我失望，但我找不到我要找的结果...... 这是否有意义，是否有任何想法？

Answer 1

使用垂直LinearLayout并对其中的每个项目进行加权，如下所示：

<Linearlayout android:orientation="vertical" ...>
    <ImageButton android:layout_weight="1" android:layout_height="0dip" .../>
    <ImageButton android:layout_weight="1" android:layout_height="0dip" .../>
    ...
</LinearLayout>

确保android布局内容保持在屏幕范围内

1 个答案: