如何在 xml 中的 Fragment 中的 ListView 上方放置一个浮动操作按钮 (FAB)？

Question

这是我的 XML 但它抱怨说我有 "two roots"..

<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/list"
    style="@style/ListView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add_white_48dp"
    android:layout_gravity="bottom|end"
    fab:elevation="6dp"
    fab:pressedTranslationZ="12dp"
    fab:backgroundTint="@color/accent"/>

如果我将它们都包装在另一个根目录中，例如 RelativeLayout 或 FrameLayout，我的应用程序会崩溃...

Caused by: java.lang.ClassCastException: android.widget.FrameLayout cannot be cast to android.widget.ListView

我的 ListView 由我的 Fragment 中的适配器填充，就像这样...

ListView mListView = (ListView) inflater.inflate(R.layout.main_list_fragment, container, false);

FloatingActionButton myFab = (FloatingActionButton) mListView.findViewById(R.id.fab);
myFab.setOnClickListener(new View.OnClickListener() {
  public void onClick(View v) {
    //// TODO: 23/09/15
  }
});

int[] to = new int[]{R.id.item};
String[] columns = new String[]{"name"};
listAdapter = new CustomAdapter(this.getActivity(), null, columns, to);
this.setListAdapter(listAdapter);

如何构造我的 XML 以便我的 FAB 浮动在 ListView 上方？

Answer 1

您可以使用 CoordinatorLayout 布局，如下所示。上面的列表视图是什么意思，如果你的意思是在列表顶部，那么你必须更改 android:layout_gravity="top"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:background="@color/white"
    android:divider="@null"
    android:orientation="vertical">
    <ListView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@android:id/list"
        style="@style/ListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent”/>
</LinearLayout>

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add_white_48dp"
    android:layout_gravity="bottom|end"
    fab:elevation="6dp"
    fab:pressedTranslationZ="12dp"
    fab:backgroundTint="@color/accent”/>
</android.support.design.widget.CoordinatorLayout>

Answer 2

这是我解决问题的方法，请注意，在这种情况下，浮动操作按钮 (FAB) 始终停靠在 activity 的右下角，无论列表视图的高度如何。

activity_base.xml

Base activity 托管 DrawerLayout、Toolbar 和 NavigationView，请参阅 id "activity_content" 的 FrameLayout。这个 FrameLayout 会在运行时用来放置包含 ListView 的布局（我也可以放置 GridView，根据用户的喜好放在这里）。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/activity_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
>

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <FrameLayout
            android:id="@+id/activity_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="@dimen/fab_margin_right"
        android:src="@mipmap/ic_action_shred_light" />

</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"/>

content_main.xml 这是我想放在 activity_base.

中的主题 ListView 布局

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_base">

    <TextView
        android:id="@+id/address_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="/"
        android:textSize="13dp"
        />

    <ListView
        android:layout_height="0dip"
        android:layout_width="fill_parent"
        android:id="@+id/list_view"
        android:layout_weight="1"
        android:textFilterEnabled="true"
        android:fastScrollEnabled="true"
        android:drawSelectorOnTop="false" />

</LinearLayout>

如何在 xml 中的 Fragment 中的 ListView 上方放置一个浮动操作按钮 (FAB)？

How do you put a floating action button (FAB) above a ListView in a Fragment in xml?

xml

android

listview

floating-action-button