Material 设计浮动按钮 (FAB) 阻塞 RecyclerView

Question

我在我的应用程序中尝试使用 material 设计 FAB 按钮时遇到了一个奇怪的问题。我正在使用这个库 (https://github.com/makovkastar/FloatingActionButton)。

我的 activity xml 有一个 RecyclerView 和 FAB。但 FAB 实际上挡住了整个屏幕的下半部分。像这样：

http://i.stack.imgur.com/FtEcb.png

从图中可以看出，包含卡片的RecyclerView被Floating Button挡住了。这是我正在使用的代码：

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <fragment
        class="com.rubberduck.zoop.fragments.OffersFragment"
        android:id="@+id/fragment_enter_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        tools:layout="@layout/fragment_offer" />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="8dp"
        android:elevation="6dp"
        android:src="@drawable/ic_place_white_24dp"
        fab:fab_colorNormal="@color/color_accent"
        fab:fab_colorPressed="@color/color_accent_pressed"
        fab:fab_colorRipple="@color/ripple" />

</LinearLayout>

fragment_offer.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context="com.rubberduck.zoop.fragments.OffersFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_offers"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <include
        android:id="@+id/card_offer"
        layout="@layout/offer_card" />


</LinearLayout>

Answer 1

当您使用 LinearLayout 作为 fragment 和 FloatingActionButton 的容器时，项目不会重叠：LinearLayout 为每个组件提供完整的宽度你使用 orientation="vertical"。相反，根据 FloatingActionButton readme，您应该使用 FrameLayout（允许项目重叠 - 确保 FloatingActionButton 出现在 RecyclerView 上方）：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <fragment
        class="com.rubberduck.zoop.fragments.OffersFragment"
        android:id="@+id/fragment_enter_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/fragment_offer" />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="8dp"
        android:elevation="6dp"
        android:src="@drawable/ic_place_white_24dp"
        fab:fab_colorNormal="@color/color_accent"
        fab:fab_colorPressed="@color/color_accent_pressed"
        fab:fab_colorRipple="@color/ripple" />

</FrameLayout>

Material 设计浮动按钮 (FAB) 阻塞 RecyclerView

Material Design Floating Button (FAB) Blocking RecyclerView

android

material-design

floating-action-button