具有粘性页脚的Android相对布局

时间:2013-09-18 10:49:29

标签: android xml android-layout layout relativelayout

我对Android开发相对较新,而且我很难将某个界面组合在一起。我查看了许多类似的问题,但没有一个给我我正在寻找的答案。

我想整理一个XML接口,如下所示:

enter image description here

我想要一个LinearLayout,它就像一个包含两个按钮的粘性页脚。该部分将始终与底部对齐,并且始终为60dp高。然后,RelativeLayout将位于页脚顶部,但它的高度应根据屏幕大小进行缩放。

我尝试了以下内容:

<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=".DartboardActivity">

    <RelativeLayout 
            android:id="@+id/game_layout"
            android:layout_width="match_parent"
            android:layout_height="506dp"
            android:background="@drawable/background"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin">  

            <ImageView
                android:id="@+id/Dartboard"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/desc_dartboard"
                android:src="@drawable/dartboard" />

            <hhs.week3.dartboard.VerticalSeekBar
                android:id="@+id/seekBarVertical"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="bottom"
                android:thumb="@drawable/thumbhorizontal"
                android:layout_marginBottom="40dp" />

             <SeekBar
                android:id="@+id/seekBarHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:thumb="@drawable/thumbhorizontal" />

    </RelativeLayout>

    <LinearLayout
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#333">

        <Button
            android:id="@+id/fire"
            style="@style/button"
            android:layout_width="0dp"

            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:text="@string/fire" />

        <Button
            android:id="@+id/settings"
            style="@style/button"
            android:layout_width="0dp"

            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:text="@string/settings" />

    </LinearLayout>

</LinearLayout>

我让它工作得很好,但它需要我给RelativeLayout位一个固定的高度,使它看起来在我的手机上,但不是在其他人。

我如何最好地接近这个?

4 个答案:

答案 0 :(得分:15)

使用LinearLayout layout_weight机制为您的RelativeLayout分配所有剩余空间:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        ... />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp" 
        ... />

</LinearLayout>

答案 1 :(得分:6)

尝试以下代码

<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"
    android:orientation="vertical"
    tools:context=".DartboardActivity" >

    <RelativeLayout
        android:id="@+id/game_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/buttons"
        android:layout_alignParentTop="true"
        android:background="@drawable/ic_launcher"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="#333"
        android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>

我删除了LinearLayout并替换为RelativeLayout。这样您就可以将LinearLayout贴在底部。

答案 2 :(得分:0)

试试这个

<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=".DartboardActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:background="@drawable/background"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">


            <ImageView
                android:id="@+id/Dartboard"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="@string/desc_dartboard"
                android:src="@drawable/dartboard"
                android:adjustViewBounds="true"/>

            <hhs.week3.dartboard.VerticalSeekBar
                android:layout_marginTop="10dp"
                android:id="@+id/seekBarVertical"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:thumb="@drawable/thumbhorizontal"/>

            <SeekBar
                android:id="@+id/seekBarHorizontal"
                android:layout_width="match_parent"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:thumb="@drawable/thumbhorizontal" />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#333333">

        <Button
            android:id="@+id/fire"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="@string/fire"/>

        <Button
            android:id="@+id/settings"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="@string/settings"/>

    </LinearLayout>

</LinearLayout>

答案 3 :(得分:0)

通过使用下面的代码,我能够获得相同的结果。基本上,父布局是一个线性布局,第一个子元素是一个scrollview,因此它可以在显示键盘时挤压其内容。另请注意使用与scrollview一起使用的 android:layout_height =“0dp” android:layout_weight =“1”

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

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

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >


    </LinearLayout>
</ScrollView>

<FrameLayout
    android:id="@+id/buttonsPanel"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#333" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="action buttons" />
</FrameLayout>

</LinearLayout>