Android 中滚动 "prominent top app bar" 的应用程序中的延迟滚动行为

Question

当前的意外行为：

所需的滚动行为：

我在 Android Kotlin 应用程序中遇到了一些意外的滚动行为，该应用程序具有滚动的“突出的顶部应用程序栏”。所需的行为是针对内部片段的全部内容（布局在 fragment_trains.xml) 中定义，以便用户在屏幕的该部分向下滚动时立即滚动。突出的顶部应用栏立即开始按预期滚动。意外的滚动行为是内部片段内容滚动有延迟。在突出的顶部应用栏完成滚动并达到“压缩”的较小尺寸之前，它们不会开始滚动。如何解决这个问题？我尝试过的解决方案包括将焦点标签添加到布局的各个部分，但未能找到与此问题相关的任何其他答案。请参阅布局 XML，以及显示该问题的屏幕录像。内部片段应立即开始滚动，而不是延迟到 "prominent top app bar” has rested in to it’s smaller position. Even if it’s not possible to provide a solution to directly fix this, I haven’t been able to find example of an app layout like this with material design with a scrolling " 突出的顶部应用栏”和底部导航栏以及介于两者之间的具有滚动行为的片段。谢谢。

activity_main.xml:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<fragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toTopOf="@id/nav_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appbar"
    app:navGraph="@navigation/mobile_navigation" />

    <com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="128dp"
    app:liftOnScroll="true"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:focusable="false"
    app:liftOnScrollTargetViewId="@id/nav_host_fragment">

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:expandedTitleMarginStart="28dp"
    app:expandedTitleMarginBottom="28dp"
    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
    app:contentScrim="?attr/colorPrimary"
    app:statusBarScrim="?attr/colorPrimaryVariant"
            app:expandedTitleTextAppearance="@style/Trains.TextAppearance.MaterialComponents.Headline6"
            app:collapsedTitleTextAppearance="@style/Trains.TextAppearance.MaterialComponents.Headline6">

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways|snap"
    android:minHeight="80dp"
    android:elevation="0dp"
    android:title="@string/app_name"
    app:layout_collapseMode="pin"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/top_app_bar"
    style="@style/Widget.MaterialComponents.Toolbar.Primary"/>

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

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

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:itemIconTint="@color/bnv_tab_item_foreground"
    app:itemTextColor="@color/bnv_tab_item_foreground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_gravity="bottom"
    app:menu="@menu/bottom_nav_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

fragment_trains.xml:

<androidx.core.widget.NestedScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toTopOf="@+id/nav_view"
    android:background="@color/colorBackground">

<LinearLayout
    android:id="@+id/temp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="128dp"
    android:orientation="vertical">

<!-- Travel info section -->

<TextView

    android:id="@+id/text_travelinfoheader"
    style="@style/TrainMediumCaption"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="29dp"
    android:layout_marginLeft="29dp"
    android:layout_marginTop="29dp"
    android:layout_marginEnd="29dp"
    android:layout_marginRight="29dp"
    android:gravity="start"
    android:textAlignment="gravity"
    app:layout_constraintEnd_toEndOf="parent"

    />

<com.google.android.material.card.MaterialCardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/travelinfocard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    android:layout_marginBottom="9dp"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    card_view:cardCornerRadius="4dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:cardElevation="1dp"
    app:layout_constraintTop_toBottomOf="@+id/text_travelinfoheader">

<TextView
    android:id="@+id/text_travelinfo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="19dp" />

</com.google.android.material.card.MaterialCardView>

<!-- Next trains section -->

<TextView
    android:id="@+id/text_nexttrainheader"
    style="@style/TrainMediumCaption"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="29dp"
    android:layout_marginLeft="29dp"
    android:layout_marginTop="9dp"
    android:layout_marginEnd="29dp"
    android:layout_marginRight="29dp"
    android:gravity="start"
    android:textAlignment="gravity"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/travelinfocard" />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/nextrains_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text_nexttrainheader" />

</LinearLayout>
</androidx.core.widget.NestedScrollView>

Answer 1

要解决此问题，使用滚动行为，此代码：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

需要从 fragment_trains.xml 文件中的 NestedScrollView 元素移动到 activity_main.xml 文件中的片段元素。以下是解决此问题的新 xml 布局文件：

新 activity_main.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"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="128dp"
        app:liftOnScroll="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:focusable="false"
        app:liftOnScrollTargetViewId="@id/nav_host_fragment"
        >

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginStart="28dp"
            app:expandedTitleMarginBottom="28dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:contentScrim="?attr/colorPrimary"
            app:statusBarScrim="?attr/colorPrimaryVariant"
            app:expandedTitleTextAppearance="@style/Train.TextAppearance.MaterialComponents.Headline6"
            app:collapsedTitleTextAppearance="@style/Train.TextAppearance.MaterialComponents.Headline6">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                android:minHeight="80dp"
                android:elevation="0dp"
                android:title="@string/app_name"
                app:layout_collapseMode="pin"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:menu="@menu/top_app_bar"
                style="@style/Widget.MaterialComponents.Toolbar.Primary"
                />

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

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

    <fragment
        android:id="@+id/nav_host_fragment"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        android:layout_marginBottom="110dp"
        app:navGraph="@navigation/mobile_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

新 fragment_trains.xml:

<?xml version="1.0" encoding="utf-8"?>

<androidx.core.widget.NestedScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground">

        <LinearLayout
            android:id="@+id/temp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
        <!-- Travel info section -->

        <TextView

            android:id="@+id/text_travelinfoheader"
            style="@style/TrainMediumCaption"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="29dp"
            android:layout_marginLeft="29dp"
            android:layout_marginTop="29dp"
            android:layout_marginEnd="29dp"
            android:layout_marginRight="29dp"
            android:gravity="start"
            android:textAlignment="gravity"
            app:layout_constraintEnd_toEndOf="parent"

             />

        <com.google.android.material.card.MaterialCardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/travelinfocard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="9dp"
            android:layout_marginBottom="9dp"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            card_view:cardCornerRadius="4dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:cardElevation="1dp"
            app:layout_constraintTop_toBottomOf="@+id/text_travelinfoheader">

            <TextView
                    android:id="@+id/text_travelinfo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="19dp" />

        </com.google.android.material.card.MaterialCardView>

        <!-- Next trains section -->

        <TextView
            android:id="@+id/text_nexttrainheader"
            style="@style/TrainMediumCaption"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="29dp"
            android:layout_marginLeft="29dp"
            android:layout_marginTop="9dp"
            android:layout_marginEnd="29dp"
            android:layout_marginRight="29dp"
            android:gravity="start"
            android:textAlignment="gravity"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/travelinfocard" />

        <androidx.recyclerview.widget.RecyclerView

            android:id="@+id/nextrains_recyclerview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="9dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/text_nexttrainheader" />

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

这是结果，具有正确的滚动行为：

Android 中滚动 "prominent top app bar" 的应用程序中的延迟滚动行为

Delayed scrolling behavior in an app with scrolling "prominent top app bar" in Android

android

android-layout

kotlin

material-design