【问题标题】:RelativeLayout, ScrollView and navigation bar at bottom底部的RelativeLayout、ScrollView和导航栏
【发布时间】:2012-01-09 06:51:19
【问题描述】:

我想做的是,这样布局:

标题

日期

带有滚动条的长文本

导航栏贴在底部

好吧,我已经完成了所有操作,但是滚动有点问题。我只想滚动文本。标题和日期应该贴在顶部,导航栏应该贴在活动的底部。是的,它有效,但我的导航栏与文本重叠:/

我尝试了所有方法,找到了一个解决方案,为 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>

【问题讨论】:

    标签: android scrollview android-relativelayout navigationbar


    【解决方案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>
    

    【讨论】:

    • 谢谢!它正在工作!我尝试了类似的方法,但我没有在 xml 代码的顶部找到我的按钮。再次感谢! :)
    【解决方案2】:

    您是否尝试为滚动布局增加权重?

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

    【讨论】:

    • 好的,谢谢。我正在尝试对代码进行大量更改,但您的解决方案更加简单易行。
    【解决方案3】:

    拖动带有文本的 LinearLayout(我们称之为 l1)的底部边缘,并将其与带有导航栏的线性布局的顶部边缘(我们称之为 l2)对齐。这样l1上的AbsoluteLayout.above就等于l2了。

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

    【讨论】:

      【解决方案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,在这个配置中,滚动视图实际上会将导航栏从屏幕底部推出。它与布局空间的保留方式有关,我不完全确定为什么,但是增加权重会将保留延迟到以后。 由于滚动视图正在填充父视图,但仍然是线性布局的一部分,因此布局将确保容纳您的下部导航栏,并且与相对布局不同,不会重叠。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-04-02
        • 1970-01-01
        • 2021-10-01
        • 1970-01-01
        • 1970-01-01
        • 2017-07-18
        相关资源
        最近更新 更多