相对布局，滚动视图和底部导航栏

Question

我想要做的是，制作这样的布局：

标题

日期

带滚动条的长文本

导航栏固定在底部

我已经做好了一切，但是滚动有一个小问题。我只想滚动文本。标题和日期应该固定在顶部，导航栏应该固定在活动的底部。是的，它可以工作，但我的导航栏会覆盖文本 :/

我尝试了一切，我找到了一个解决方案，为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>

- MicNeo

Answer 1

以下是我所更改的内容：

• 将顶部布局移到底部
• 将底部布局命名为 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>

- havexz

---

谢谢！它可以工作了！我尝试过类似的东西，但是我的按钮没有出现在XML代码的顶部。再次感谢！ :) - MicNeo

Answer 2

你是否尝试过为滚动布局设置权重？

LinearLayout
- LinearLayout
-- Title
-- Date
- ScrollView layout_weigth=1
-- TextView
- LinearLayout
-- Button
-- Button
-- Button

- Jonas Schmid

---

是的，谢谢。我正在尝试对代码进行许多更改，但您的解决方案更简单易行。 - tres.14159

Answer 3

将包含文本的LinearLayout（我们称之为l1）的底部边缘拖动并对齐到包含导航栏的LinearLayout（我们称之为l2）的顶部边缘。这样，l1上的AbsoluteLayout.above就等于l2。

<LinearLayout android:id="@+id/l1"
    android:layout_above="@+id/l2">
</LinearLayout>

- AxiomaticNexus

Answer 4

就像 Jonas 所说的那样，但是为了给你更多的帮助，请确保填写其他内容。

<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，此配置下scrollview实际上会将导航栏推出屏幕底部。这与布局空间的保留方式有关，我不完全确定原因，但添加权重会延迟保留时间。 由于scrollview填充了父级但仍然是线性布局的一部分，因此布局将确保容纳您的下部导航栏，并且与相对布局不同，不会发生重叠。

- loosebazooka