首页 > ScrollView如何做到夹在两个控件(分别位于顶部和低部)之间,而且不覆盖内容?

ScrollView如何做到夹在两个控件(分别位于顶部和低部)之间,而且不覆盖内容?

最近一个小的问题纠结住了我,是这样的:

我在一个Android界面布局需要3部分,顶部是一个固定的标题,最下面是一个固定的东西,放个可打电话的按钮之类的,中间是一个ScrollView,用来浏览信息。ScrollView的浏览不能遮挡住顶部和底部的标题,也就是说顶部和底部标题始终都要在。

总体我采用了RelativeLayout布局,里面分为3个RelativeLayout子布局,第一个和第三个布局简单放了一个TextView,第二个布局放了一个ScrollView。

创建过程:
1、顶部的RelativeLayout首先写出来,命名为relativelayout1,里面简单放了一个TextView;

2、中间的布局,命名为relativelayout2,里面放了一个ScrollView,在relativelayout2中设置了属性android:layout_below="@id/relativelayout1",那它自然而然就跑到了relativelayout1的下方;

3、底部的布局,命名为relativelayout3,里面也简单放了一个TextView,在relativelayout3中设置成属性android:layout_alignParentBottom="true",那底部布局就顺利的始终留在了窗口的最下面。

但是问题来了!!
ScrollView的底部没办法设置下边界要对齐relativelayout3的上边缘啊,它造成的后果是:relativelayout3虽然始终留在了界面的最下方,但是把ScrollView的最下面遮盖住了。也就是说
如图所示(TextView我加了透明色,可以更直观的看出来问题所在)

再放大一些

也就是说我想把左图的布局变为右图的布局:

这里有我的简单的代码,直接复制到编译环境里就ok,字符串www可以放一段很长的文字以使效果更明显。麻烦诸位帮忙看下!

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

<RelativeLayout
    android:id="@+id/relativelayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#80BBDEFB" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="20dp"
        android:text="这是顶部标题" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/relativelayout2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/relativelayout1" >

    <ScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"
            android:text="@string/www" />
    </ScrollView>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/relativelayout3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#80CCFF90" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="20dp"
        android:text="这是底部标题" />
</RelativeLayout>


原来的布局文件不变,在layout2 加一行 layout_above=layout3 应该就可以了


最外层用LinearLayout,relativelayout1和relativelayout3设置layout_weight=1, relativelayout2不设置layout_weight。


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

    <RelativeLayout
        android:id="@+id/relativelayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#80BBDEFB" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="20dp"
        android:text="这是顶部标题" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relativelayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#80CCFF90" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:padding="20dp"
            android:text="这是顶部标题" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relativelayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/relativelayout1"
        android:layout_above="@id/relativelayout3 >

        <ScrollView
            android:id="@+id/scrollview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"
            android:text="@string/www" />
        </ScrollView>
   </RelativeLayout>
</RelativeLayout>

先布置上下两个布局,再布置中间的scrollview,因为程序在解析xml文件时是从上至下的,所以解析到relativeLayout2的android:layout_height="match_parent"标签时会填满屏幕的剩余空间

【热门文章】
【热门文章】