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

Question

我对 Android 开发还比较陌生，并且很难将某个界面组合在一起。我浏览过许多类似的问题，但没有一个给出我正在寻找的答案。

我想组合一个如下所示的 XML 接口：

我想要一个 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位一个固定的高度，使它在我的手机上看起来正确，但在其他手机上则不然。

我该如何最好地解决这个问题？

Answer 1

使用

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>

Answer 2

尝试以下代码

<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

棒设置到底部。

Answer 3

我可以使用下面的代码获得相同的结果。基本上，父布局是一个线性布局，第一个子元素是滚动视图，因此当显示键盘时它可以挤压其内容。另请注意与滚动视图一起使用的 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>

Answer 4

试试这个

<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>

Answer 5

试试这个，它的测试代码。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cl_root"
    android:paddingStart="@dimen/dp_10"
    android:paddingEnd="@dimen/dp_10"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white_3"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">


    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_your_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/dp_10"
        android:text="Titles"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="MissingConstraints" />


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_progress_card"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        tools:itemCount="19"
        app:layout_constraintBottom_toTopOf="@+id/tv_swipe_up_message"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_your_progress"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintHeight_default="wrap"
        app:layout_constraintVertical_chainStyle="packed"

        tools:listitem="@layout/item_short_form_component" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_swipe_up_message"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:padding="@dimen/space_normal"
        app:layout_constraintHeight_default="wrap"
        android:gravity="center"
        android:drawablePadding="@dimen/space_small"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintVertical_chainStyle="packed"
        android:drawableTop="@drawable/ic_arrow_up_grey"
        android:text="footer"
        app:layout_constraintTop_toBottomOf="@+id/rv_progress_card"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>