当前位置: 首页 > 知识库问答 >
问题:

使用NestedScrollView、AppBarLayout和CoordinatorLayout平滑滚动和滑动

徐英锐
2023-03-14

我正在开发一个应用程序,其中我使用了AppBarLayout和CollapsingToolbarLayout以及NestedScrollView。我已经成功地实现了这一点,并且运行良好。

现在我想做的是,在嵌套滚动视图上滑动(快速向上滑动)时,它应该完全滚动到顶部。类似地,在向屏幕底部滑动(快速向下滑动)时,它必须平滑地滚动到底部。然而现在,它只能卡在中间,这使它看起来很丑。我已经尝试了许多可用的解决方案,但没有一个适合我。我目前的设置如下。

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:zhy="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded">

<android.support.design.widget.AppBarLayout
    android:id="@+id/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main.collapsing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/placeholder"
            android:layout_width="match_parent"
            android:layout_height="246dp"
            android:scaleType="fitXY"
            android:tint="#11000000"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.9" />


        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:padding="10dp">


            <FrameLayout
                android:id="@+id/back_frame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical"
                android:paddingBottom="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="10dp"
                android:paddingTop="5dp">

                <ImageView
                    android:id="@+id/back_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha" />
            </FrameLayout>


            <FrameLayout
                android:id="@+id/frameLayoutheart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:layout_gravity="right|center_vertical"
                android:paddingBottom="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="5dp"
                android:paddingTop="5dp">

                <ImageView
                    android:id="@+id/favbtnicon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/heart_profile" />
            </FrameLayout>


        </FrameLayout>

        <FrameLayout
            android:id="@+id/main.framelayout.title"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="bottom|center_horizontal"
            android:orientation="vertical"

            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.3">

            <LinearLayout
                android:id="@+id/main.linearlayout.title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="top"
                android:orientation="vertical">


                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"

                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/profileName"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="25dp"
                        android:inputType="textNoSuggestions"
                        android:singleLine="true"
                        android:text="Ankita arora"
                        android:textColor="@android:color/white"
                        android:textSize="25sp"
                        android:textStyle="bold" />


                    <ImageView
                        android:id="@+id/onlinestatus"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="29dp"
                        android:src="@drawable/online"
                        android:visibility="visible" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/age"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:inputType="textCapSentences"
                        android:text="asdas"
                        android:textColor="@android:color/white"
                        android:textSize="13sp" />


                    <TextView
                        android:layout_width="4dp"
                        android:layout_height="4dp"
                        android:layout_gravity="center"

                        android:layout_marginLeft="4dp"
                        android:layout_marginRight="4dp"
                        android:background="@drawable/white_dot" />

                    <TextView
                        android:id="@+id/sex"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:inputType="textCapSentences"
                        android:text="asdas"
                        android:textColor="@android:color/white"
                        android:textSize="13sp" />


                    <TextView
                        android:id="@+id/loc_point"
                        android:layout_width="4dp"
                        android:layout_height="4dp"
                        android:layout_gravity="center"

                        android:layout_marginLeft="4dp"
                        android:layout_marginRight="4dp"
                        android:background="@drawable/white_dot" />


                    <TextView
                        android:id="@+id/loc"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:inputType="textCapSentences"
                        android:text="asdas"
                        android:textColor="@android:color/white"
                        android:textSize="13sp" />

                </LinearLayout>


            </LinearLayout>
        </FrameLayout>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>


<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    app:behavior_overlapTop="10dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    >

    ------content--------------


     </android.support.v4.widget.NestedScrollView>


<android.support.v7.widget.Toolbar
    android:id="@+id/main.toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/pinkColor"
    android:visibility="invisible"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp"
    app:layout_anchor="@id/main.framelayout.title"
    app:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:title="">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/back"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_gravity="left|center_vertical"
            android:layout_marginLeft="4dp"
            android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha"
            android:visibility="invisible" />

        <Space
            android:layout_width="@dimen/image_final_width"
            android:layout_height="@dimen/image_final_width" />


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/main.textview.title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:layout_gravity="left"
                android:text="@string/quila_name2"
                android:textColor="@android:color/white"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:layout_marginTop="-4dp"
                android:text="@string/quila_name2"
                android:textColor="@android:color/white"
                android:textSize="12sp" />


        </LinearLayout>

    </LinearLayout>
</android.support.v7.widget.Toolbar>

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/profileimg"
    android:layout_width="@dimen/image_width"
    android:layout_height="@dimen/image_width"
    android:layout_gravity="center_horizontal"

    app:border_color="@android:color/white"
    app:border_width="2dp"
    app:finalHeight="@dimen/image_final_width"
    app:finalYPosition="2dp"
    app:layout_behavior="com.sdl.apps.yaarri.views.AvatarImageBehavior"
    app:startHeight="2dp"
    app:startToolbarPosition="2dp"
    app:startXPosition="2dp" />

下面显示的最被接受的答案之一对我也不起作用。

无法使用NestedScrollView平滑滚动AppBarLayout和折叠工具栏

共有2个答案

石正卿
2023-03-14

使用支持库26.0.1版本。

此问题已由Google从版本26.0.0之后的支持库中解决

https://developer . Android . com/topic/libraries/support-library/revisions . html # 26-0-1

子车安和
2023-03-14

当我开夜车的时候图书馆就像蝙蝠侠一样来了

https://github.com/henrytao-me/smooth-app-bar-layout

根据该步骤,可以通过执行以下步骤来改进行为:

1.变化

 android.support.design.widget.AppBarLayout

 me.henrytao.smoothappbarlayout.SmoothAppBarLayout and set android:id

2.删除

 app:layout_behavior="@string/appbar_scrolling_view_behavior"

3.将标题添加到嵌套滚动视图或回收器视图

这实际上让它像魅力一样发挥作用。

最终设置看起来像

                <android.support.design.widget.CoordinatorLayout 
                 xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:app="http://schemas.android.com/apk/res-auto"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent">

                  <android.support.v4.widget.NestedScrollView
                    android:id="@+id/nested_scroll_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <LinearLayout
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:orientation="vertical"
                      android:paddingLeft="16dp"
                      android:paddingRight="16dp"
                      android:paddingTop="@dimen/app_bar_height">

                      <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="16dp"
                        android:layout_marginTop="16dp"
                        android:text="@string/text_short" />

                      <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="16dp"
                        android:text="@string/text_long" />
                    </LinearLayout>
                  </android.support.v4.widget.NestedScrollView>

                  <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
                    android:id="@+id/smooth_app_bar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/app_bar_height">

                    <android.support.design.widget.CollapsingToolbarLayout
                      android:id="@+id/collapsing_toolbar_layout"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
                      app:layout_scrollFlags="scroll|exitUntilCollapsed">

                      <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar"
                        app:layout_collapseMode="pin"
                        app:navigationIcon="@drawable/ic_menu_arrow_back"
                        style="@style/AppStyle.MdToolbar" />
                    </android.support.design.widget.CollapsingToolbarLayout>
                  </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
                </android.support.design.widget.CoordinatorLayout> 

如果您在实施此问题时仍面临任何问题,请在此处询问,如果此答案有帮助,我很乐意提供帮助并标记此问题。

 类似资料:
  • 我想实现像Google Play App一样的平滑滚动行为。我尝试过这里提到的解决方案: 解决方案1 解决方案2 解决方案3 但所有上述解决方案都没有像在Google Play应用程序中那样给出预期的结果。以下是xml代码: 如何实现平滑滚动? 编辑:以下是recyclerview适配器 }

  • 我正在开发一个Android应用程序,其中我使用、和来使用折叠工具栏功能。 我在布局中使用在相同的布局中展开和折叠。当我试图从屏幕中心向上滚动时,它不起作用,但当我试图从屏幕右角向上滚动屏幕时,它会平滑滚动。 下面提到的是我的 xml 文件 layout.xml 理想的结果是,当我尝试从屏幕中心向上滚动时,它应该像我从手机右角向上滚动一样工作。 请观看下面提到的视频,以便更清楚地了解问题 http

  • 我的应用程序中的CoordinatorLayout中的平滑滚动有问题。 我试图做到这一点:http://wstaw.org/m/2015/10/02/google-scroll.gif 但我最好的结果是:http://wstaw.org/m/2015/10/02/my-scroll.gif 我做错了什么?提前感谢。

  • 我有以下布局: 当我尝试向上滚动时,它无法正常工作,而且会滞后和卡住,而向下滚动似乎很好。我不明白为什么。我找了很多,做了很多改变,但仍然没有效果。 以下是我的活动内容

  • 嵌套滚动视图在向下滚动时滚动流畅,但在向上滚动时滚动缓慢。向上滚动时折叠工具栏(带有图像视图和框架布局)不会呈现其内容(保持空白)。我已经尝试了折叠工具栏中的每个标志。

  • 当我试图滚动它触摸AppBarLayout部分时,滚动折叠AppBar有问题。而且有时滚动不流畅。 这是一个短视频(1米30秒)的问题:https://www.youtube.com/watch?v=n32N9Z4S3SA 这是指向简单项目的链接(仅在 github 上出现此问题):https://github.com/yozhik/Reviews/tree/master/app/src/main