【问题标题】:Smooth scroll and Fling with NestedScrollView,AppBarLayout and CoordinatorLayout使用 NestedScrollView、AppBarLayout 和 CoordinatorLayout 平滑滚动和 Fling
【发布时间】:2016-11-02 08:17:59
【问题描述】:

我正在开发一个将 AppBarLayout 与 CollapsingToolbarLayout 和 NestedScrollView 一起使用的应用程序。我已经成功实现了这一点,并且运行良好。

现在我想要做的是,在 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" />

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

Unable to scroll AppBarLayout and collapsing toolbar with NestedScrollView smoothly

【问题讨论】:

  • 你能详细解释一下你的要求吗?你说Nestedscrollview it should scroll completely to top and same should work towards downside smoothly but it gets stuck in between 但是什么卡住了?是你的toolbar 还是nestedScrollView 里面的内容?
  • notoolbar不在nestedScrollView里面。里面有普通视图。当我向 Nestedscrollview 投掷时,它应该完全滚动到顶部,而 Appbarlayout 应该完全折叠,但在这里它卡在中间。dat 意味着它没有完全滚动到顶部。
  • 我使用了this,它运行良好,不需要外部库;)

标签: android android-appbarlayout android-collapsingtoolbarlayout android-nestedscrollview


【解决方案1】:

使用支持库 26.0.1 版本。

这个问题已经被google从26.0.0以后的支持库中解决了

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

【讨论】:

    【解决方案2】:

    当我熬夜时,这个图书馆就像蝙蝠侠一样来了

    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.将标题添加到您的 NestedScrollView 或 RecyclerView

    这实际上使它像魅力一样工作。

    最终的设置看起来像

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

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

    【讨论】:

    • 我试过你的解决方案,但是当我删除layout_behavior时,AppBar消失了……你知道为什么吗?
    • 但是您在第 2 步中的意思是什么?你说要删除 layout_behavior
    • 哦,对不起,我错过了理解你的问题..你是在用 nestedscrollview 还是 recyclerview 使用这个......??
    • 没关系,我很高兴你甚至考虑帮助我哈哈。我正在使用嵌套滚动视图
    • 你有没有把header..添加到nestedscrollview..?正如我所提到的......如果仍然不清楚......通过给定的样本......它工作得很好......我相信你错过了一些东西...... :)
    猜你喜欢
    • 2016-12-18
    • 2016-04-04
    • 1970-01-01
    • 2017-01-16
    • 1970-01-01
    • 2015-08-28
    • 1970-01-01
    • 2016-03-19
    • 1970-01-01
    相关资源
    最近更新 更多