Disposición androide con ListView entre una “barra superior” y “barra inferior”
Pregunta
Estoy tratando de construir un diseño donde hay una vista de texto en la parte superior de la pantalla y una barra inferior en la parte inferior de la pantalla. Cada uno de estos puntos de vista deben quedarse fijo en su lugar y en entre el 2 debe ser un ListView.
TOPBAR
LISTVIEW (scrollable)
BOTTOM BAR
Mi diseño (véase más adelante) casi funciona: la parte superior e inferior componentes permanecen fijos y los rollos de vista de lista. El "problema" es que la última fila de mi ListView permanece oculto detrás de la barra inferior.
¿Alguna sugerencia sobre cómo ajustar el diseño?
Gracias!
<?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>
Solución
Aquí viene un simple sugerencia. Hacer una nueva XML y tener un ir con esto.
<?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>
Otros consejos
El problema con los PO diseño es que la primera disposición lineal se establece como android:layout_height="fill_parent"
lo que hará que la primera disposición lineal para llenar la matriz. No sabe que se va a añadir más puntos de vista. Lo que tienes que hacer es añadir puntos de vista en el orden en que conocen su tamaño. Así se conoce el tamaño del par superior y la barra inferior, se puede añadir aquellos que android:layout_height="wrap_content"
. A continuación, añadir la vista de lista, ya que su tamaño no se conoce en tiempo de compilación.
I logra lo que estás tratando de hacer de una manera similar, el uso de identificadores y los atributos layout_below / layout_above. Los View
s están dispuestos de una manera diferente, pero el resultado final es el mismo. A ListView
entre otros dos LinearLayout
s, uno en la parte superior y uno en la parte inferior.
En el ListView
se puede ver que tengo:
android:layout_above="@+id/event_list_buttons"
android:layout_below="@id/title_container"
Los atributos de la posición ListView
entre mi superior e inferior 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>
he tenido este tipo de problema. Solía ??tres diseños en lugar de dos, y este tipo de solución:
- los 3 diseños se almacenan en un RelativeLayout, como en soluciones anteriores
- la disposición que contiene la vista de lista está vinculado con el "Topbar" (firstLayout) usando androide: layout_below
- el tercer diseño se convierte en el "Bottombar" usando Android: layout_alignParentBottom = "true"
-
y lo importante mayoría (el problema): añado androide: layout_marginBottom a la disposición que contiene la vista de lista. Tuve que hacer varios de adaptación que el valor antes de encontrar el margen suficiente.
<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>
He encontrado otra manera de hacer esto con la layout_weight cuando encerrado en una disposición lineal. Si establece el peso del ListView a algo arbitrariamente grande y el peso de la barra inferior estática a algo muy pequeño, funciona el efecto. Tanto la vista de lista y de la altura de la barra inferior se deben establecer en "wrap_content" para que todo funcione en conjunto también.
<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>
He encontrado Creo que la solución más fácil sólo de este post
Just declarar ambas barras ANTES de la viewlist añadiendo androide: layout_alignParentBottom = "true" y android: layout_alignParentTop = "true" en cada caso.
A continuación, especifica en el diseño viewlist que establece entre ellos con android: layout_above = "id_of_footer" y android:. Layout_below = propiedades "id_of_header"
Esto es ejemplo de trabajo de mi aplicación. Sólo con barra de pie de página.
<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>