android - 滚动 View 内具有固定页眉和页脚的Android相对布局

我想要一个页面，里面有一个静态的页眉和页脚，里面有可滚动的内容。这是我的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/headerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/sendfunds" />
    </LinearLayout>

    <ScrollView
        android:id="@+id/scrollablContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/footerView"
        android:layout_below="@+id/headerView" >

        <RelativeLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="30dp"
                android:layout_marginTop="26dp"
                android:text="Balance"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textSize="8pt"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/textView1"
                android:layout_centerHorizontal="true"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/textView2"
                android:layout_alignBottom="@+id/textView2"
                android:layout_marginLeft="16dp"
                android:layout_toRightOf="@+id/textView2"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/textView1"
                android:layout_marginTop="34dp"
                android:text="WHO ARE YOU SENDING MONEY TO?"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="8pt" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView4"
                android:layout_marginTop="35dp"
                android:text="Recipient Name"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="170dp"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/textView5"
                android:layout_alignBottom="@+id/textView5"
                android:layout_alignParentRight="true"
                android:ems="10" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/editText1"
                android:layout_marginTop="25dp"
                android:text="Recipient Email"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/textView6"
                android:layout_alignBottom="@+id/textView6"
                android:layout_alignLeft="@+id/editText1"
                android:layout_alignParentRight="true"
                android:ems="10" />

            <TextView
                android:id="@+id/textView7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/editText2"
                android:layout_marginTop="37dp"
                android:text="HOW MUCH DO YOU WANT TO SEND?"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="8pt" />

            <TextView
                android:id="@+id/textView8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView7"
                android:layout_marginTop="34dp"
                android:text="Amount"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/textView8"
                android:layout_alignBottom="@+id/textView8"
                android:layout_alignLeft="@+id/editText2"
                android:layout_alignParentRight="true"
                android:ems="10" >

                <requestFocus />
            </EditText>

            <TextView
                android:id="@+id/textView9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/editText3"
                android:layout_marginTop="24dp"
                android:text="Wallet Cat."
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <Spinner
                android:id="@+id/spinner1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/editText3"
                android:layout_alignParentRight="true"
                android:layout_alignTop="@+id/textView9" />

            <TextView
                android:id="@+id/textView10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/textView9"
                android:layout_alignBottom="@+id/textView9"
                android:layout_alignLeft="@+id/spinner1"
                android:layout_marginLeft="22dp"
                android:text="TextView"
                android:visibility="gone" />

            <TextView
                android:id="@+id/textView11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView9"
                android:layout_marginTop="35dp"
                android:text="Pay Ref."
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/textView11"
                android:layout_alignLeft="@+id/spinner1"
                android:layout_alignParentRight="true"
                android:ems="10" />

            <TextView
                android:id="@+id/textView12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView11"
                android:layout_marginTop="27dp"
                android:text="Detail Ref."
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/textView12"
                android:layout_alignLeft="@+id/editText4"
                android:layout_alignParentRight="true"
                android:ems="10" />

            <TextView
                android:id="@+id/textView13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView12"
                android:layout_marginTop="39dp"
                android:text="Date of Birth"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/textView13"
                android:layout_alignLeft="@+id/editText5"
                android:ems="10" />

            <TextView
                android:id="@+id/textView14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView13"
                android:layout_marginTop="40dp"
                android:text="Password"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/textView14"
                android:layout_alignLeft="@+id/editText6"
                android:layout_alignParentRight="true"
                android:ems="10" />

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/editText7"
                android:layout_marginTop="37dp"
                android:layout_toLeftOf="@+id/textView3"
                android:text="Submit" />
        </RelativeLayout>
    </ScrollView>

    <RelativeLayout
        android:id="@+id/footerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/wallet_ic" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imageView1"
            android:src="@drawable/send_ic_hover" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imageView2"
            android:src="@drawable/upload_ic" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/imageView3"
            android:src="@drawable/history1" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/imageView4"
            android:src="@drawable/more" />
    </RelativeLayout>

</RelativeLayout>

有了这个，我有了静态的页眉和页脚，但是缺少一些可滚动的内容。我尝试增加ScrollView和layout和fillViewport=true的高度，但是没有运气。我应该如何增加中间布局的高度？

最佳答案

您可以通过使用LinearLayout容器而不是RelativeLayout容器来解决此问题。

该容器应包含3个子项：页眉，内容和页脚。内容的高度设置为填充剩余空间的位置。您可以使用weight属性来实现：

    android:layout_height="0dp"
    android:layout_weight="1"

使用此代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

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

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/sendfunds" />
    </LinearLayout>

    <ScrollView
        android:id="@+id/scrollablContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <RelativeLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <!-- Your Content -->

        </RelativeLayout>
    </ScrollView>

    <RelativeLayout
        android:id="@+id/footerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/wallet_ic" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imageView1"
            android:src="@drawable/send_ic_hover" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imageView2"
            android:src="@drawable/upload_ic" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/imageView3"
            android:src="@drawable/history1" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/imageView4"
            android:src="@drawable/more" />
    </RelativeLayout>

</LinearLayout>

注意使用

        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true

在LinearLayout中是没有意义的。所以这：

<LinearLayout
    android:id="@+id/headerView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/sendfunds" />
</LinearLayout>

是错的。