Mise en page Android avec ListView entre une «barre supérieure» et une «barre inférieure»

Question

J'essaie de construire une mise en page où il y a une vue de texte en haut de l'écran et une barre inférieure en bas de l'écran. Chacune de ces vues doit rester fixe et entre les deux doit être un ListView.

TOPBAR 
LISTVIEW (scrollable) 
BOTTOM BAR 

Ma mise en page (voir ci-dessous) presque œuvres: les composants haut et en bas restent fixes et les rouleaux de ListView. Le "problème" est que la dernière rangée de ma ListView reste cachée derrière la barre inférieure.

Des suggestions sur la façon d'ajuster la disposition?

Merci!

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     xmlns:android="http://schemas.android.com/apk/res/android"> 
    <LinearLayout 
      android:layout_alignParentTop="true" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:orientation="vertical" 
      > 
     <TextView 
       android:background="@drawable/blackgrad" 
       android:gravity="center" 
       android:id="@+id/title" 
       android:layout_height="50dip" 
       android:layout_width="fill_parent" 
       android:text="blah blah" 
       android:textColor="#ffffff" 
       android:textSize="18sp" 
       /> 
     <ListView 
       android:background="#ffffff" 
       android:cacheColorHint="#ffffffff" 
       android:id="@android:id/list" 
       android:layout_height="fill_parent" 
       android:layout_width="fill_parent" 
       /> 
    </LinearLayout> 
    <LinearLayout 
      android:background="#efefef" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:layout_width="fill_parent" 
      android:layout_height="50dip" 
      android:orientation="horizontal"> 
     <Button 
       android:layout_height="wrap_content" 
       android:id="@+id/back" 
       android:text="Back" 
       android:layout_width="wrap_content" /> 

     <Button 
       android:layout_height="wrap_content" 
       android:id="@+id/home" 
       android:text="Home" 
       android:layout_width="wrap_content" /> 

     <Button 
       android:layout_height="wrap_content" 
       android:id="@+id/next" 
       android:text="Next" 
       android:layout_width="wrap_content" /> 


    </LinearLayout> 
</RelativeLayout> 

Answer 1

Voici une suggestion simple. Faites un nouveau XML et allez-y avec ça.

<?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"> 
    <TextView 
     android:text="Header" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content"/> 
    <ListView 
     android:id="@android:id/list" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="1"/> 
    <TextView 
     android:text="Footer" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom"/> 
</LinearLayout> 

Answer 2

J'ai accompli ce que vous essayez de faire d'une manière similaire, en utilisant les ID et les attributs layout_below/layout_above. Les View sont disposés différemment, mais le résultat final est le même. Un ListView entre deux autres LinearLayout, l'un en haut et l'autre en bas.

Dans le ListView vous pouvez voir que j'ai:

android:layout_above="@+id/event_list_buttons" 
android:layout_below="@id/title_container" 

Les attributs position du ListView entre mon haut et en bas LinearLayout s.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout android:id="@+id/RelativeLayout01" 
    android:layout_width="fill_parent" android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 

    <LinearLayout style="@style/TitleBar"> 
     <ImageView style="@style/TitleBarLogo" android:src="@drawable/logo_small_transparent" /> 

     <View style="@style/TitleBarSpring" /> 

     <ImageView style="@style/TitleBarSeparator" /> 
     <ImageButton style="@style/TitleBarAction" android:src="@drawable/ic_title_refresh" 
      android:id="@+id/title_refresh_button" android:onClick="onClick" /> 
     <ProgressBar style="@style/TitleBarProgressIndicator" 
      android:id="@+id/title_refresh_progress" android:visibility="gone" /> 

     <ImageView style="@style/TitleBarSeparator" /> 
     <ImageButton style="@style/TitleBarAction" android:src="@drawable/ic_title_search" /> 
    </LinearLayout> 

    <ListView android:layout_width="fill_parent" 
     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/android:list" android:layout_above="@+id/event_list_buttons" 
     android:layout_below="@id/title_container" android:fastScrollEnabled="true" 
     android:background="@color/white"></ListView> 

    <LinearLayout android:layout_width="fill_parent" 
     xmlns:android="http://schemas.android.com/apk/res/android" android:id="@id/event_list_buttons" 
     android:layout_height="wrap_content" android:layout_alignParentBottom="true" 
     android:gravity="center_horizontal"> 

     <Button android:layout_width="wrap_content" 
      android:layout_height="wrap_content" android:id="@+id/events_list_view_organizing_button" 
      android:text="Organizing" android:onClick="onClick"></Button> 
     <Button android:layout_width="wrap_content" 
      android:layout_height="wrap_content" android:id="@+id/events_list_view_attending_button" 
      android:text="Attending" android:onClick="onClick"></Button> 

    </LinearLayout> 
</RelativeLayout> 

Answer 3

Le problème avec la disposition des postes d'observation est que le premier agencement linéaire est défini comme android:layout_height="fill_parent" qui provoquera la première disposition linéaire pour remplir le parent. Il ne sait pas que vous allez ajouter d'autres vues. Ce que vous avez à faire est d'ajouter des vues dans l'ordre où elles connaissent leur taille. Vous connaissez donc la taille du par et de la barre du bas, vous pouvez les ajouter comme android:layout_height="wrap_content". Ensuite, ajoutez la listview car sa taille est inconnue au moment de la compilation.

Answer 4

J'ai trouvé une autre façon de le faire avec layout_weight quand il est inclus dans une disposition linéaire. Si vous définissez le poids de la ListView sur quelque chose d'arbitrairement grand et le poids statique de la barre inférieure sur quelque chose de très petit, l'effet fonctionne. La taille de la barre et la taille de la barre inférieure doivent être définies sur "wrap_content" pour que tout fonctionne également.

<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:orientation="vertical" 
android:color="@color/bg" 
xmlns:android="http://schemas.android.com/apk/res/android" > 

    <ListView 
     android:id="@android:id/list" 
     android:padding="5dp" 
     android:divider="@color/bg" 
     android:dividerHeight="4dp" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="20" 
     > 
    </ListView> 

    <TextView android:text="Sorry, no results were found" android:id="@android:id/empty" android:layout_width="fill_parent" android:layout_height="fill_parent"></TextView> 


    <include layout="@layout/bottom_bar" android:layout_weight=".1" android:id="@+id/bottomBar" android:layout_alignParentBottom="true" android:layout_width="fill_parent" android:layout_height="wrap_content"></include> 

Answer 5

J'ai trouvé je pense que la solution plus facile de juste this après

Juste deux barres déclare AVANT l'viewlist ajoutant Android: layout_alignParentBottom = "true" et android: layout_alignParentTop = "true " dans chaque cas.

Ensuite, spécifiez dans la présentation de la liste d'affichage qu'il est défini entre eux avec android: layout_above = "id_of_footer" et android: layout_below = "id_of_header" propriétés.

Ceci est un exemple de travail de mon application. Juste avec une barre de pied de page.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:orientation="vertical" > 

<LinearLayout 
    android:id="@+id/bottom_bar" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:background="#333333" 
    android:padding="@dimen/padding_small" > 

    <Button 
     android:id="@+id/bt_add_session" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:onClick="addSession" 
     android:text="@string/add_session" /> 

    <TextView 
     android:id="@+id/lb_summary" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:gravity="right" 
     android:text="@string/summary_example" 
     android:textAppearance="?android:attr/textAppearanceSmall" 
     android:textColor="#FFFFFF" /> 
</LinearLayout> 

<ListView 
    android:id="@+id/vl_sessions" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_above="@id/bottom_bar" > 
</ListView> 

Answer 6

J'ai eu ce genre de problème. J'ai utilisé trois mises en page au lieu de deux, et ce genre de solution:

• les 3 mises en page sont stockés dans une RelativeLayout, comme dans les solutions ci-dessus
• la mise en page contenant le listview est lié à la « Topbar » (firstLayout) en utilisant android: layout_below
• la troisième mise en page devient le "bottombar" en utilisant android: layout_alignParentBottom = "true"

• et la chose la plus importante (votre problème): ajouter Android: layout_marginBottom à la mise en page contenant le listview. J'ai dû faire plusieurs ajustements à la valeur avant de trouver la marge suffisante.

  <LinearLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/firstLayout" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:gravity="left" 
      android:orientation="horizontal" > 
  
      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:layout_gravity="center_vertical" 
       android:layout_marginTop="10dip" 
       android:text="@string/show_history_text" /> 
  </LinearLayout> 
  
  <LinearLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/secondLayout" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/firstLayout" 
      android:layout_marginBottom="50dip" > 
  
      <ListView 
       android:id="@+id/ListNotes" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" /> 
  </LinearLayout> 
  
  <LinearLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/thirdLayout" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:background="@color/LightSteelBlue" 
      android:gravity="left" 
      android:orientation="horizontal" > 
  
      <Button 
       android:id="@+id/btnClose" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       android:gravity="center_vertical|left" 
       android:onClick="BtnCloseClick" 
       android:text="@string/btn_close_history_text" /> 
  </LinearLayout>