Assurez-vous que le contenu de la mise en page Android reste dans les limites de l'écran

Question

J'ai reçu une maquette d'écran de mon concepteur d'interface utilisateur qui a une barre de navigation en haut, puis 5 icônes avec des étiquettes de texte correspondantes en dessous. Je dois m'assurer que le rembourrage pour chacun d'eux reste suffisamment relatif pour que les 5 paires d'icônes/étiquettes restent à l'écran.

Voici le guide de référence m'a été donné:

Voici mon XML en cours - deux simples dispositions relatives - un pour la barre de navigation, et un pour l'espace restant, avec un contenu Alignés et rembourré (et une image de fond sur laquelle ils s'assoient tous les deux dessus).

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

Le problème est que mes deux derniers TextView disparaissent du bas de l'écran.

Voir image ci-jointe:

Une partie de mon problème est que je ne (actuellement) été donné une densité d'actifs, mais je teste sur quatre appareils en direct ainsi que plusieurs émulateurs (N5, N4, Galaxy Nexus, HTC One X), et le problème persiste à travers les tailles d'écran et les densités.

Je peux essayer de coder en dur les paddings pour les masser, mais je veux croire qu'il existe une meilleure façon de le faire - fondamentalement pour mettre à l'échelle le contenu d'une mise en page aux limites définies.

J'ai cherché le net et SO, et peut-être ma terminologie m'échoue, mais je ne trouve pas les résultats que je cherche ... Est-ce que cela a du sens, et y a-t-il des pensées?

Answer 1

Utilisez un LinearLayout vertical et le poids de chaque élément dans ce 1 comme ci-dessous:

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