Android TabLayout With Viewpager Inside CoordinateLayout With BottomAppBar

Question

我正在将 TabLayout 与 CoordinatorLayout 中的 ViewPager 一起使用。在这里，我还有一个带有 FAB 的 BottomAppBar。下面是布局图。

MainActivity Layout

这是我的 xml 此布局代码。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.MainActivity">

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:paddingBottom="100dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/mainTabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            app:tabGravity="fill"
            app:tabInlineLabel="true"
            app:tabMode="fixed" />

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/mainViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/mainBottomAppBar"
    style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:hideOnScroll="true"
    app:menu="@menu/main_menu"
    app:navigationIcon="@drawable/icon_menu" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/mainFAB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/colorPrimary"
    app:layout_anchor="@id/mainBottomAppBar"
    app:srcCompat="@drawable/icon_add"
    app:tint="@color/white" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

但问题是，在选项卡（或片段）之间滑动 不起作用。如果我像下面这样编写 xml 代码，那么滑动就可以正常工作。

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activities.MainActivity">

<com.google.android.material.tabs.TabLayout
    android:id="@+id/mainTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    app:tabGravity="fill"
    app:tabInlineLabel="true"
    app:tabMode="fixed" />

<androidx.viewpager.widget.ViewPager
    android:id="@+id/mainViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

我不明白我需要做出哪些改变。任何类型的解决方案或建议将不胜感激。提前致谢。

Answer 1

在 NestedScrollView

中添加 android:fillViewport 属性

<androidx.core.widget.NestedScrollView
    android:fillViewport="true"
    ..>

Android TabLayout With Viewpager Inside CoordinateLayout With BottomAppBar

Android TabLayout With Viewpager Inside CoordinateLayout With BottomAppBar

android

android-viewpager

android-coordinatorlayout

android-tablayout

android-bottomappbar