Android - 浮动操作栏位于底部导航栏后面

时间:2021-01-10 17:00:28

标签: android android-fragments android-recyclerview floating-action-button android-collapsingtoolbarlayout

我有以下情况:我有一个包含一个 activity 和多个 fragments 的应用。 fragments 使用 Activity 布局中的 NavHostFragment 换入和换出。 所有 fragments 共享的公共视图(例如 CoordinatorLayoutAppBarLayoutCollapsingToolbarToolbar 等)也位于 activity布局。某些 fragment 布局具有 RecyclerViewFloatingActionBar 等视图。

这是它的样子:

enter image description here

在 .gif 文件中,您可以看到 FloatingActionButton 位于 BottomNavigationBar 后面。只有当用户向下滚动时,FloatingActionButton 才会完整地显示给用户。我想要的是,即使他们没有向下滚动,他们也应该能够完全看到按钮。 (请注意,RecyclerView 没有项目,因为我想将焦点保持在按钮上。按钮的行为与项目相同。)

这就是我的 activity_main.xml 的样子:

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

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        tools:openDrawer="start">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/coordinator_layout"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:fitsSystemWindows="true"
                app:layout_constraintBottom_toTopOf="@id/bottom_nav_view"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.appbar.AppBarLayout
                    android:id="@+id/app_bar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fitsSystemWindows="true"
                    android:theme="@style/Theme.AndroidApp.AppBarOverlay">

                    <com.google.android.material.appbar.CollapsingToolbarLayout
                        android:id="@+id/toolbar_layout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:layout_scrollFlags="scroll|snap"
                        app:toolbarId="@id/toolbar">

                        <androidx.appcompat.widget.Toolbar
                            android:id="@+id/toolbar"
                            style="@style/Widget.MaterialComponents.Toolbar.Primary"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            app:contentInsetStart="0dp"
                            app:layout_collapseMode="parallax">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="?attr/actionBarSize"
                                android:gravity="center"
                                android:text="@string/app_name"
                                android:textAppearance="?attr/textAppearanceHeadline5" />
                        </androidx.appcompat.widget.Toolbar>

                    </com.google.android.material.appbar.CollapsingToolbarLayout>
                </com.google.android.material.appbar.AppBarLayout>

                <fragment
                    android:id="@+id/myNavHostFragment"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"
                    app:defaultNavHost="true"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:navGraph="@navigation/navigation" />

            </androidx.coordinatorlayout.widget.CoordinatorLayout>

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_nav_view"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@id/coordinator_layout"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:menu="@menu/bottom_nav_menu" />

        </androidx.constraintlayout.widget.ConstraintLayout>


        <com.google.android.material.navigation.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"
            app:itemIconTint="@drawable/drawer_item_color"
            app:itemTextColor="@drawable/drawer_item_color"
            app:menu="@menu/drawer_actions" />

    </androidx.drawerlayout.widget.DrawerLayout>
    
</layout>

这是我的一个片段的布局:

<layout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="viewModel"
            type="com.example.androidapp.ItemsFragmentViewModel"/>

    </data>
    

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/list_items"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/progress_bar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/add_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_create"
            android:onClick="@{() -> viewModel.create()}"
            app:fabSize="normal"
            app:layout_anchor="@id/list_items"
            app:layout_anchorGravity="bottom|right|end"
            tools:ignore="ContentDescription" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>

也许我把活动布局弄乱了一点,我不知道。一切正常,只有 FloatingActionButton 会破坏它。 有人可以帮忙吗?

提前致谢

1 个答案:

答案 0 :(得分:0)

<块引用>

我想要的是他们应该能够完全看到按钮 即使他们没有向下滚动。

最好的方法是将 FloatingActionButton 放在 CoordinatorLayout 布局的 activity_main 内,以实现所需的效果,例如滚动、隐藏或任何您喜欢的效果。

正如这里已经提到的:Fragment layout with FAB conflict with CoordinatorLayout


第二部分:

您需要做的就是删除 ConstraintLayout 布局中的 activity_main,以便 DrawerLayout 能够将 CoordinatorLayout 识别为其子项。之后,使用 BottomNavigationView 中的 CoordinatorLayout

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordinator_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/app_bar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/toolbar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|snap"
                    app:toolbarId="@id/toolbar">

                    <androidx.appcompat.widget.Toolbar
                        android:id="@+id/toolbar"
                        style="@style/Widget.MaterialComponents.Toolbar.Primary"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        app:contentInsetStart="0dp"
                        app:layout_collapseMode="parallax">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            android:gravity="center"
                            android:text="@string/app_name"
                            android:textAppearance="?attr/textAppearanceHeadline5" />
                    </androidx.appcompat.widget.Toolbar>

                </com.google.android.material.appbar.CollapsingToolbarLayout>
            </com.google.android.material.appbar.AppBarLayout>

            <fragment
                android:id="@+id/myNavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:defaultNavHost="true"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                app:navGraph="@navigation/navigation" />

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:labelVisibilityMode="unlabeled"
                app:menu="@menu/bottom_nav_menu" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true" />

    </androidx.drawerlayout.widget.DrawerLayout>

</layout>