在具有滚动“突出的顶部应用栏"的应用中，延迟了滚动行为.在Android中 [英] Delayed scrolling behavior in an app with scrolling "prominent top app bar" in Android

问题描述

当前意外行为:

所需的滚动行为:

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

I’m experiencing some unexpected scrolling behaviour in an Android Kotlin app with a scrolling "prominent top app bar". The desired behavior is for the whole contents of the inner fragment (with layout defined in fragment_trains.xml) to scroll as soon as the user scrolls down on that part of the screen. The prominent top app bar starts scrolling immediately as intended. The unexpected scrolling behaviour is that there is a delay in the inner fragment contents scrolling. They don’t start scrolling until the prominent top app bar has completed scrolling and reached it’s "condensed" smaller size. How is it possible to resolve this issue? Solutions I have tried include adding focus tags to various parts of the layout, but haven’t been able to find any other answers related to this issue. See layout XML, and screen recording showing the issue. The inner fragment should begin to scroll immediately rather than be delayed until the "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 "prominent top app bar" and bottom navigation bar and a fragment in between with a scrolling behaviour. Thanks.

activity_main.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_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:

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>

推荐答案

要解决此问题，请使用以下滚动代码:

To fix this issue, with the scrolling behaviour, this code:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

需要从fragment_trains.xml文件中的NestedScrollView元素移动到activity_main.xml文件中的fragment元素.这是解决此问题的新xml布局文件:

needs to be moved from the NestedScrollView element in the fragment_trains.xml file, to the fragment element in the activity_main.xml file. Here are the new xml layout files to fix this issue:

新的activity_main.xml:

New 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:

New 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>

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

Here is the result, with the correct scrolling behaviour:

这篇关于在具有滚动“突出的顶部应用栏"的应用中，延迟了滚动行为.在Android中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！