Android Layout с ListView между "верхней панелью" и "нижней панелью"
Я пытаюсь построить макет, где есть текстовое представление в верхней части экрана и нижняя панель внизу экрана.
Каждое из этих представлений должно оставаться фиксированным на месте, а между ними должно быть ListView.
TOPBAR
LISTVIEW (scrollable)
BOTTOM BAR
Мой макет (см. ниже) почти работает: верхний и нижний компоненты остаются фиксированными и свитки списка. "Проблема" в том, что последняя строка моего ListView остается скрытой за нижней панелью.
Любые предложения по настройке макета?
Спасибо!
<?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>
Ответы
Ответ 1
Здесь идет простое предложение. Создайте новый XML и пойдите с этим.
<?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>
Ответ 2
Проблема с макетом OP заключается в том, что первый линейный макет устанавливается как android:layout_height="fill_parent"
, что приведет к тому, что первый линейный макет заполнит родительский элемент. Он не знает, что вы собираетесь добавлять дополнительные просмотры. Что вам нужно сделать, так это добавить представления в том порядке, в котором они знают свой размер. Значит, вы знаете размер верхнего и нижнего бара, вы можете добавить их как android:layout_height="wrap_content"
. Затем добавьте listview, так как размер неизвестен во время компиляции.
Ответ 3
Я выполнил то, что вы пытаетесь сделать аналогичным образом, используя идентификаторы и атрибуты layout_below/layout_above. View
расположены по-другому, но конечный результат тот же. A ListView
между двумя другими LinearLayout
s, один сверху и один снизу.
В ListView
вы можете видеть, что у меня есть:
android:layout_above="@+id/event_list_buttons"
android:layout_below="@id/title_container"
Эти атрибуты располагают ListView
между моим верхним и нижним 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>
Ответ 4
У меня была такая проблема. Я использовал три макета вместо двух, и это решение:
- 3 макета хранятся в RelativeLayout, как в решениях выше
- макет, содержащий список, связан с "Topbar" (firstLayout) с помощью android: layout_below
- третий макет становится "bottombar" с использованием android: layout_alignParentBottom = "true"
-
и самое главное (ваша проблема): я добавляю android: layout_marginBottom к макету, содержащему список. Я должен был сделать несколько корректировок до значения, прежде чем найти достаточный запас.
<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>
Ответ 5
Я нашел другой способ сделать это с помощью layout_weight, когда он заключен в линейный макет. Если вы установите вес ListView на что-то сколь угодно большое, а статический вес нижнего бара на что-то очень маленькое, эффект будет действовать. Для отображения списка и высоты нижнего столбца должно быть установлено значение "wrap_content", чтобы все работало вместе.
<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>
Ответ 6
Я нашел, что я думаю, что это простое решение только из this post
Просто объявляйте обе полосы перед списком просмотров, добавляя android: layout_alignParentBottom = "true" и android: layout_alignParentTop = "true" в каждом случае.
Затем укажите в макете списка просмотра, который он установил между ними с помощью свойств android: layout_above = "id_of_footer" и android: layout_below = "id_of_header".
Это рабочий пример из моего приложения. Просто с нижним колонтитулом.
<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>