在 Android 中滚动“突出的顶部应用栏”的应用中的延迟滚动行为

Posted

技术标签:

【中文标题】在 Android 中滚动“突出的顶部应用栏”的应用中的延迟滚动行为【英文标题】：Delayed scrolling behavior in an app with scrolling "prominent top app bar" in Android 【发布时间】：2020-08-18 01:08:16 【问题描述】：

当前的意外行为：

必需的滚动行为：

我在一个带有滚动“突出的顶部应用栏”的 Android Kotlin 应用程序中遇到了一些意外的滚动行为。所需的行为是针对内部片段的全部内容（在 fragment_trains.xml 中定义的布局）用户在屏幕的该部分向下滚动时立即滚动。 突出的顶部应用栏按预期立即开始滚动。意外的滚动行为是内部片段内容滚动存在延迟。在突出的顶部应用栏完成滚动并达到其“压缩”较小尺寸之前，它们不会开始滚动。如何解决这个问题？我尝试过的解决方案包括将焦点标签添加到布局的各个部分，但无法找到与此问题相关的任何其他答案。 请参阅布局 XML 和显示问题的屏幕录像。内部片段应该立即开始滚动，而不是延迟到“突出的顶部应用栏”静止到它的较小位置。即使无法提供直接解决此问题的解决方案，我也找不到像这样的应用程序布局示例，材料设计具有滚动的“突出的顶部应用程序栏”和底部导航栏，以及介于两者之间的具有滚动行为的片段。谢谢。

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_
    android:layout_>

<fragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    app:layout_constraintBottom_toTopOf="@+id/nav_view"
    android:background="@color/colorBackground">

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

<!-- Travel info section -->

<TextView

    android:id="@+id/text_travelinfoheader"
    style="@style/TrainMediumCaption"
    android:layout_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    android:layout_margin="19dp" />

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

<!-- Next trains section -->

<TextView
    android:id="@+id/text_nexttrainheader"
    style="@style/TrainMediumCaption"
    android:layout_
    android:layout_
    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_
    android:layout_
    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>

【问题讨论】：

【参考方案1】：

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

app:layout_behavior="@string/appbar_scrolling_view_behavior"

需要从 fragment_trains.xml 文件中的 NestedScrollView 元素移动到 activity_main.xml 文件中的 fragment 元素。以下是修复此问题的新 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_
    android:layout_>

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        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_
            android:layout_
            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_
                android:layout_
                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_
        android:layout_
        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_
        android:layout_
        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_
    android:layout_
    android:background="@color/colorBackground">

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

        <TextView

            android:id="@+id/text_travelinfoheader"
            style="@style/TrainMediumCaption"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
                    android:layout_
                    android:layout_margin="19dp" />

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

        <!-- Next trains section -->

        <TextView
            android:id="@+id/text_nexttrainheader"
            style="@style/TrainMediumCaption"
            android:layout_
            android:layout_
            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_
            android:layout_
            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 中滚动“突出的顶部应用栏”的应用中的延迟滚动行为的主要内容，如果未能解决你的问题，请参考以下文章

滚动视图内的文本视图，但它不在键盘顶部

如何使滚动视图像 Apple AppStore “特色页面”？

Android - 在 ListView 中滚动时滚动出/折叠元素

android中怎样隐藏滚动条

android 怎么在类中添加滚动条

Android在滚动时修复了滚动视图中的背景图像