android - 在Android中使用 “prominent top app bar”滚动的应用程序中延迟的滚动行为

标签 android android-layout kotlin material-design

当前的意外行为:
Current unexpected behaviour

所需的滚动行为:
Required scrolling behaviour

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


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>

最佳答案

要解决此问题,请使用以下滚动行为:

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

结果是正确的滚动行为:

Correct scrolling behaviour

关于android - 在Android中使用 “prominent top app bar”滚动的应用程序中延迟的滚动行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61578135/

相关文章:

java - Android 无法转换为 JSONObject 错误

android - 通过静态实例方法发送的参数丢失在 fragment 中

java - 如何在 Android 的菜单选项中添加带有文本的图像?

java - 如何通过单击 fragment 内的线性布局从 fragment 类开始新 Activity ?下面是我的代码,但这不起作用

android - 我想在 android 中制作一个微调器,使其充当下拉菜单而不是弹出

java - 依次使用不同的请求正文发出多个 API 请求

android - 来自 Android Java 代码的 ionic 电容器处理事件

安卓 kotlin.TypeCastException : null cannot be cast to non-null type com. google.android.gms.maps.SupportMapFragment

gradle - 应用插件的不同方法? (Gradle Kotlin DSL)

java - 检查从哪个线程调用方法