2010-10-31 4 views
1

J'ai essayé de créer un RelativeLayout avec un en-tête, un corps (liste) et un pied de page. Je veux que l'en-tête soit au-dessus de tout (aligné vers le haut), le corps (liste) sous l'en-tête (en défilement) et le pied de page (aligné vers le bas) pour être au-dessus du corps .Android: problèmes de mise en page XML

J'ai réussi à le faire PARFAIT quand il s'agit de comment les choses semblent mais apparemment la mise en page XML est la cause des problèmes que j'ai eu en cliquant sur listItems (see here, and here). Pour résoudre les problèmes, j'ai dû encapsuler ListView avec LinearLayout et le mettre entre l'en-tête et le pied de page (dans le fichier XML). Cela résout les problèmes de clic de listItems MAIS crée un nouveau problème - le pied de page cache le dernier élément ListView, même si la liste passe sous l'en-tête lorsque vous le faites défiler vers le bas.

Je suis à peu près désespérée ici: \

C'est le XML qui crée la mise en page parfaite, mais provoque la liste des questions en cliquant: Item

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:background="#ffffff" 
    > 
    <RelativeLayout 
     android:background="@drawable/top_background" 
     android:layout_width="fill_parent" 
     android:layout_height="50dip" 
     android:id="@+id/top_control_bar" 
     > 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:text="Droidmarks" 
      android:layout_alignParentLeft="true" 
      android:layout_toLeftOf="@+id/add_bookmark" 
      android:textSize="20dip" 
      android:textColor="#a0cb26" 
      android:shadowColor="#7a9b1b" 
      android:shadowRadius="5" 
      android:layout_marginLeft="5dip" 
      android:gravity="left|center" /> 
     <Button 
      android:id="@+id/add_bookmark" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="right|center" 
      android:layout_alignParentRight="true" 
      android:text="Add" 
     /> 
    </RelativeLayout> 
    <LinearLayout 
     android:id="@+id/bottom_control_bar" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:background="@drawable/top_background" 
     android:visibility="invisible" 
     > 
     <Button 
      android:id="@+id/test" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="right|center" 
      android:layout_alignParentRight="true" 
      android:text="Add" 
     /> 
    </LinearLayout> 

    <ListView 
     android:id="@android:id/list" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/top_control_bar" 
     android:layout_above="@id/bottom_control_bar" 
     android:drawSelectorOnTop="false" 
     android:focusable="false" 
     android:focusableInTouchMode="false" 
     android:cacheColorHint="#ffffff" 
     android:listSelector="@drawable/selected_item" 
     /> 
    <TextView android:id="@android:id/empty" android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="No Bookmarks found. You can add one by clicking the star." 
     android:layout_below="@id/top_control_bar" android:layout_above="@id/bottom_control_bar" /> 
</RelativeLayout> 

C'est le XML qui cache la dernière liste d'article mais résout les problèmes cliquants:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:background="#ffffff" 
    > 
    <RelativeLayout 
     android:background="@drawable/top_background" 
     android:layout_width="fill_parent" 
     android:layout_height="50dip" 
     android:id="@+id/top_control_bar" 
     android:layout_alignParentTop="true" 
     > 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:text="Droidmarks" 
      android:layout_alignParentLeft="true" 
      android:layout_toLeftOf="@+id/add_bookmark" 
      android:textSize="20dip" 
      android:textColor="#a0cb26" 
      android:shadowColor="#7a9b1b" 
      android:shadowRadius="5" 
      android:layout_marginLeft="5dip" 
      android:gravity="left|center" /> 
     <Button 
      android:id="@+id/add_bookmark" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="right|center" 
      android:layout_alignParentRight="true" 
      android:text="Add" 
     /> 
    </RelativeLayout> 

    <LinearLayout 
     android:id="@+id/listArea" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:layout_below="@id/top_control_bar" 
     > 
     <ListView 
      android:id="@android:id/list" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:drawSelectorOnTop="false" 
      android:cacheColorHint="#ffffff" /> 
     <TextView android:id="@android:id/empty" android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="No Bookmarks found. You can add one by clicking the star." /> 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/bottom_control_bar" 
     android:layout_above="@id/listArea" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:background="@drawable/top_background" 
     android:orientation="horizontal" 
     android:visibility="visible" 
     > 
     <Button 
     android:id="@+id/test" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="right|center" 
     android:layout_alignParentRight="true" 
     android:text="Add" 
    /> 
    </LinearLayout> 
</RelativeLayout> 

J'avais une pececiate toute aide pour trouver une solution pour les deux problèmes!

Merci!

Répondre

3

Puis-je vous demander pourquoi vous utilisez un RelativeLayout pour le conteneur? Il semble que ce soit un endroit parfait pour utiliser un LinearLayout avec une zone centrale pondérée (la listview) configurée pour prendre toute la zone restante après l'en-tête et le pied de page wrap_height-set. Les RelativeLayouts sont parfaits pour simplifier les mises en page profondément imbriquées qui contiennent à la fois des éléments horizontaux et verticaux, mais votre calque externe ici ne contient que 3 éléments verticaux. Optez donc pour un LinearLayout avec orientation:vertical sauf si quelque chose me manque ici.

EDIT: En bref, essayez ceci; Cela devrait vous donner un en-tête de hauteur fixe, un pied de page de hauteur d'emballage, et la zone centrale occupant tout l'espace restant. Assurez-vous que la disposition externe est définie sur fill_parent hauteur et la zone du milieu est définie sur une hauteur fixe, mais avec un layout_weight="1". J'aime utiliser "0px" pour la layout_highlight de base quand j'utilise layout_weight juste pour que cela reste clair quand je reviens et que je le relis plus tard.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" 
    android:background="#ffffff" 
    > 
    <RelativeLayout 
     android:background="@drawable/top_background" 
     android:layout_width="fill_parent" 
     android:layout_height="50dip" 
     android:id="@+id/top_control_bar" 
     > <!-- snip - inner contents unchanged --> 
    </RelativeLayout> 

    <LinearLayout 
     android:id="@+id/listArea" 
     android:layout_width="fill_parent" 
     android:layout_height="0px" 
     android:layout_weight="1" 
     android:orientation="horizontal" 
     ><!-- snip - inner contents unchanged --> 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/bottom_control_bar" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:background="@drawable/top_background" 
     android:orientation="horizontal" 
     android:visibility="visible" 
     ><!-- snip - inner contents unchanged --> 
    </LinearLayout> 
</LinearLayout> 
+0

Salut Yoni! Merci pour votre réponse! Essayé ce que vous avez dit et maintenant j'ai perdu le bottom_control_bar, même si je l'ai ajouté android: layout_above ... Pouvez-vous s'il vous plaît mettre à jour votre réponse avec les modifications que vous voulez dire? –

+0

btw, J'utilise RelativeLayout comme un wrapper car c'est la seule façon de positionner les éléments internes les uns par rapport aux autres. –

+0

Je ne suis pas sûr de comprendre ce que vous entendez par "la seule façon de positionner les éléments internes les uns par rapport aux autres" - si une mise en page se trouve dans une autre mise en page, le type d'enveloppe n'a aucun effet sur les enfants *, juste sur la mise en page elle-même. Votre RelativeLayout externe a ici 3 enfants; pour le rendre linéaire, définissez la hauteur du premier à wrap_content, celle du troisième à wrap_content, et celle du milieu à la hauteur de 0px avec un layout_weight de "1". Les enfants directs d'un LinearLayout ignorent les drapeaux RelativeLayout comme android: layout_above et ainsi de suite. –