Toolbar滑动效果实现总结

如上面效果:顶部的带Avengers标题的Toolbar ,在下面RecyclerView下滑的过程中显示,如果将下面的RecyclerView上滑,Toolbar又自动隐藏.

实现上面的效果布局如下:

<android.support.design.widget.CoordinatorLayout

    xmlns:android=" http://schemas.android.com/apk/res/android"

    xmlns:app=" http://schemas.android.com/apk/res-auto"

    xmlns:tools=" http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    >

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

        >

        <android.support.v7.widget.Toolbar

            android:id="@+id/activity_avengers_toolbar"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:background="?attr/colorPrimary"

            android:elevation="8dp"

            android:minHeight="?attr/actionBarSize"

            app:layout_scrollFlags="scroll|enterAlways"

            app:title="Avengers"

            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView

        android:id="@+id/activity_avengers_recycler"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_behavior="@string/appbar_scrolling_view_behavior"

        />

</android.support.design.widget.CoordinatorLayout>

这里主要涉及到3个控件:CoordinatorLayout,AppBarLayout,和RecyclerView

CoordinatorLayout是一个增强型的FrameLayout。

它的作用有两个作用  

                             1.作为一个布局的跟布局  

                             2.为子视图之间相互协调手势效果的一个布局

我们来看看CoordinatorLayout是怎么来协调这两个子视图手势操作的。

1.为了达到上面效果图的手势动画效果，我们必须做如下设置，通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的

设置的layout_scrollFlags有如下几种选项：

• scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

• enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。

• enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

• exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

我们上面的布局中 给Toolbar设置了app:layout_scrollFlags属性，因此，Toolbar是可以滚动出屏幕，且向下滚动有可以出现。

2.为了使得Toolbar可以滑动，我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件。

并且给这些组件设置如下属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

总结： 为了使得Toolbar有滑动效果，必须做到如下三点：

1. CoordinatorLayout必须作为整个布局的父布局容器。
2. CoordinatorLayout包裹一个可以滑动的布局
3. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
4. 给你的可滑动的组件，也就是RecyclerView 或者 NestedScrollView 设置如下属性：

          app:layout_behavior="@string/appbar_scrolling_view_behavior"

其他相关效果可参看;http://jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html

如上面效果:顶部的带Avengers标题的Toolbar ,在下面RecyclerView下滑的过程中显示,如果将下面的RecyclerView上滑,Toolbar又自动隐藏.

实现上面的效果布局如下:

<android.support.design.widget.CoordinatorLayout

    xmlns:android=" http://schemas.android.com/apk/res/android"

    xmlns:app=" http://schemas.android.com/apk/res-auto"

    xmlns:tools=" http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    >

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

        >

        <android.support.v7.widget.Toolbar

            android:id="@+id/activity_avengers_toolbar"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:background="?attr/colorPrimary"

            android:elevation="8dp"

            android:minHeight="?attr/actionBarSize"

            app:layout_scrollFlags="scroll|enterAlways"

            app:title="Avengers"

            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView

        android:id="@+id/activity_avengers_recycler"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_behavior="@string/appbar_scrolling_view_behavior"

        />

</android.support.design.widget.CoordinatorLayout>

这里主要涉及到3个控件:CoordinatorLayout,AppBarLayout,和RecyclerView

CoordinatorLayout是一个增强型的FrameLayout。

它的作用有两个作用  

                             1.作为一个布局的跟布局  

                             2.为子视图之间相互协调手势效果的一个布局

我们来看看CoordinatorLayout是怎么来协调这两个子视图手势操作的。

1.为了达到上面效果图的手势动画效果，我们必须做如下设置，通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的

设置的layout_scrollFlags有如下几种选项：

• scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

• enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。

• enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

• exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

我们上面的布局中 给Toolbar设置了app:layout_scrollFlags属性，因此，Toolbar是可以滚动出屏幕，且向下滚动有可以出现。

2.为了使得Toolbar可以滑动，我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件。

并且给这些组件设置如下属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

总结： 为了使得Toolbar有滑动效果，必须做到如下三点：

1. CoordinatorLayout必须作为整个布局的父布局容器。
2. CoordinatorLayout包裹一个可以滑动的布局
3. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
4. 给你的可滑动的组件，也就是RecyclerView 或者 NestedScrollView 设置如下属性：

          app:layout_behavior="@string/appbar_scrolling_view_behavior"

其他相关效果可参看;http://jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html