在 ListView 顶部包含浮动操作按钮

Posted 2023-04-15

【中文标题】在 ListView 顶部包含浮动操作按钮

【英文标题】：Include Floating Action Button on top of ListView

【发布时间】：2017-10-13 04:50:25

【问题描述】：

我正在尝试在我的一个布局中添加一个浮动操作按钮。我为浮动操作按钮创建了一个单独的布局，以包含在我的主布局中。但每当我包含它时，它都不在列表视图的顶部。

浮动操作按钮 XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_ android:layout_>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floatingActionButton"
    android:layout_
    android:layout_
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="23dp"
    android:layout_marginEnd="22dp"
    android:clickable="true"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_menu_add" />
    </RelativeLayout>

活动布局：

<LinearLayout 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:layout_
android:orientation="vertical"
android:layout_
tools:context=".MainActivity"
android:weightSum="1"
android:background="@color/BG_beige">


<LinearLayout
    android:layout_
    android:layout_
    android:orientation="horizontal"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="10dp">

    <TextView
        android:id="@+id/textView17"
        android:layout_
        android:layout_
        android:layout_weight="1.58"
        android:text="Name"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/textView15"
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:text="Price"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/textView19"
        android:layout_
        android:layout_
        android:layout_weight="0.51"
        android:text="Paid"
        android:textSize="20sp"
        android:gravity="center"/>



</LinearLayout>

<ListView
    android:id="@+id/list"
    android:layout_
    android:layout_ />

<include
    layout="@layout/utility_fab"
    android:layout_
    android:layout_
    />

 </LinearLayout>

所以结果布局是这样的：

【参考方案1】：

将您的布局包裹在 FrameLayout 中并应用 android:layout_gravity="bottom"

<FrameLayout
    android:layout_
    android:layout_>

    <ListView
        android:id="@+id/list"
        android:layout_
        android:layout_ />

    <include
        layout="@layout/utility_fab"
        android:layout_
        android:layout_
        android:layout_gravity="bottom" />
</FrameLayout>

【讨论】：

但是框架布局不会破坏我当前的定位吗？因为我使用线性

FrameLayout 仅用于对齐列表视图和浮动操作按钮...不会影响线性布局

【参考方案2】：

RelativeLayout 设置错误

<RelativeLayout>
    <Your main layout/>
    <Fab button/>
</RelativeLayout>

目前您已经告诉 android 将 fab 按钮和父级 RelativeLayout 布局放在 listview 之后，我怀疑它在屏幕之外

【参考方案3】：

如果您想将一个组件放在另一个组件之上，您可以尝试使用 FrameLayout，例如在这里您可以找到示例（请参阅已接受的答案）：

How to show one layout on top of the other programmatically in my case?

另一种选择是使用RelativeLayout（请参阅已接受的答案）：

how to put 2 layouts on top of each others

更新：您可以尝试使用以下代码。可能您必须自己进行一些额外的设置，但这是一般的想法：

<FrameLayout 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:layout_>

    <LinearLayout
    android:orientation="vertical"
    android:layout_
    tools:context=".MainActivity"
    android:weightSum="1"
    android:background="@color/BG_beige">

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="horizontal"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="10dp">

        <TextView
            android:id="@+id/textView17"
            android:layout_
            android:layout_
            android:layout_weight="1.58"
            android:text="Name"
            android:textSize="20sp"/>

        <TextView
            android:id="@+id/textView15"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:text="Price"
            android:textSize="20sp"/>

        <TextView
            android:id="@+id/textView19"
            android:layout_
            android:layout_
            android:layout_weight="0.51"
            android:text="Paid"
            android:textSize="20sp"
            android:gravity="center"/> 
    </LinearLayout>

    <ListView
        android:id="@+id/list"
        android:layout_
        android:layout_ />
 </LinearLayout>

<include
    layout="@layout/utility_fab"
    android:layout_
    android:layout_
    />

</FrameLayout>

【讨论】：

但是框架布局不会破坏我当前的定位吗？因为我使用线性