RelativeLayout, ScrollView и панель навигации внизу - PullRequest
Новая
       25

RelativeLayout, ScrollView и панель навигации внизу

3 голосов
/ 30 ноября 2011

Что я хочу сделать, так это сделать макет так:

Название

Дата

Длинный текст с прокруткой

Навигационная панель придерживается внизу

Ну, я сделал все, но есть небольшая проблема с прокруткой. Я хочу только прокрутить текст. Название и дата должны быть прикреплены к верхней части, а навигационная панель - к нижней части активности. И да, это работает, но моя панель навигации перекрывает текст: /

Я попробовал все, есть одно решение, которое я нашел, установить фиксированную высоту для Scrollview, но это не будет хорошо работать на всех устройствах, не так ли? Я, вероятно, мог бы сделать некоторые вычисления в коде и изменить его высоту, но я бы хотел остаться в XML.

У кого-нибудь есть предложения?

Вот мой XML-файл: 

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

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.6"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/feed_title"
                style="@style/h1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical" />

            <TextView
                android:id="@+id/feed_info"
                style="@style/h2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <ImageView
            android:id="@+id/feed_fav_ico"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_vertical|right"
            android:background="@drawable/ic_fav_off" />
    </LinearLayout>


    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:scrollY="20dp" >

        <TextView
            android:id="@+id/feed_text"
            style="@style/text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Loren ipsum full tekst" />
    </ScrollView>
</LinearLayout>

<!-- Buttons -->

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="#FFFFFF"
    android:orientation="vertical"
    android:paddingBottom="5dp" >

    <Button
        android:id="@+id/go_to_article"
        style="@style/button_screen"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="15dp"
        android:text="@string/feed_show_full" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/next_feed"
            style="@style/button_screen"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/button_arrow_up" />

        <Button
            android:id="@+id/share_feed"
            style="@style/button_screen"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="@string/feed_share" />

        <Button
            android:id="@+id/delete_feed"
            style="@style/button_screen"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="@string/feed_delete" />

        <Button
            android:id="@+id/prev_feed"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/button_arrow_down" />
    </LinearLayout>
</LinearLayout>
<!-- ~Buttons -->

</RelativeLayout>

Ответы [ 4 ]

5 голосов
/ 30 ноября 2011

Вот то, что я изменил:

  • Перемещено верхнее расположение вниз
  • Дано имя нижнего расположения android:id="@+id/bottom_layout"
  • Дано имя верхнего расположения android:id="@+id/top_layout" (не требуется только для ясности)

  • Теперь топ-макет будет иметь следующие свойства:

    android:layout_above="@id/bottom_layout"

    android:layout_alignParentTop="true"

    Первый - сделать верхний макет закрепленным над нижним макетом.Второй способ - выровнять верхний край верхнего макета по верху родителя.В данном случае это RelativeLayout.

  • Теперь нижний макет будет иметь следующие свойства:

    android:layout_alignParentBottom="true"

    Он сообщит, что нижний край днамакет соответствует нижнему краю родительского элемента (который является RelativeLayout)

Ниже приведен полностью рабочий макет: 

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

<!-- Buttons -->

<LinearLayout
    android:id="@+id/bottom_layout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="#FFFFFF"
    android:orientation="vertical"
    android:paddingBottom="5dp" >

    <Button
        android:id="@+id/go_to_article"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="15dp"
        android:text="Feed full" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/next_feed"
            android:layout_width="40dp"
            android:layout_height="40dp" />

        <Button
            android:id="@+id/share_feed"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="share" />

        <Button
            android:id="@+id/delete_feed"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="delete" />

        <Button
            android:id="@+id/prev_feed"
            android:layout_width="40dp"
            android:layout_height="40dp" />
    </LinearLayout>
</LinearLayout>
<!-- ~Buttons -->

<LinearLayout
    android:id="@+id/top_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/bottom_layout"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.6"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/feed_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical" />

            <TextView
                android:id="@+id/feed_info"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <ImageView
            android:id="@+id/feed_fav_ico"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_vertical|right"
            android:background="@drawable/ic_launcher" />
    </LinearLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true"
        android:scrollY="20dp" >

        <TextView
            android:id="@+id/feed_text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/long_test" />
    </ScrollView>
</LinearLayout>

</RelativeLayout>
3 голосов
/ 30 ноября 2011

Вы пытались добавить вес к макету свитка? 

LinearLayout
- LinearLayout
-- Title
-- Date
- ScrollView layout_weigth=1
-- TextView
- LinearLayout
-- Button
-- Button
-- Button
1 голос
/ 30 ноября 2011

Перетащите нижний край LinearLayout (назовем его l1), удерживая ваш текст, и выровняйте его по верхнему краю линейного макета, содержащего вашу панель навигации (назовем его l2). Так что AbsoluteLayout.above на l1 равно l2. 

<LinearLayout android:id="@+id/l1"
    android:layout_above="@+id/l2">
</LinearLayout>
0 голосов
/ 30 ноября 2011

Как говорит Джонас, но чтобы дать вам немного больше, убедитесь, что вы заполнили все остальные. 

<LinearLayout 
    android:layout_height="fill-parent">

    <LinearLayout 
       android:layout_height="wrap_content">
       put your title and things in here
    </LinearLayout>

    <ScrollView
       android:layout_height="fill_parent"
       android:layout_weight="1">  <!-- this makes it not overlap the layout(navbar) below-->
       put your title and things in here
    </ScrollView>

    <LinearLayout
       android:layout_height="wrap_content">
       put your nav bar stuff in here
    </LinearLayout>
</LinearLayout>

Если вы не установите layout_weight, представление прокрутки фактически вытолкнет панель навигациинижняя часть экрана в этой конфигурации.Это как-то связано с тем, как зарезервировано место для макетов, я не совсем уверен, почему, но добавление веса задерживает резервирование на потом.Поскольку представление прокрутки заполняет родительский элемент, но все еще является частью линейного макета, макет обязательно будет соответствовать вашей нижней панели навигации, и в отличие от относительного макета не будет перекрытия.

...