ToolBar实现滑动伸缩效果

男娘i 2022-06-16 06:53 279阅读 0赞

> 致力于用最简洁的语言描述最复杂的技术

有时候我们看TitleBar可以随着下面的内容的滑动而伸缩，这个是怎么实现的呢（我居然不会发那种动画，有没有大神在留言区教一下怎么发那种动画），这种效果肯定不是默认的TitleBar实现的，是由Toolbar实现的。  
其实只是一个布局而已，看似功能强大，但强大的功能却并不难实现。  
我们在使用Toolbar之前别忘了添加依赖：

compile 'com.android.support:design:25.0.0'

还有，因为我们要用Toolbar替代默认的TitleBar，所以使用Toolbar之前先将TitleBar去掉，这里有我一篇博客讲如何去除TitleBar：[传送门][Link 1]

那么接下来进入主题，我们先看看整体布局的嵌套吧：

<android.support.design.widget.CoordinatorLayout>
      <android.support.design.widget.AppBarLayout>
        <android.support.design.widget.CollapsingToolbarLayout>
            <android.support.v7.widget.Toolbar/>
        </android.support.design.widget.CollapsingToolbarLayout>
      </android.support.design.widget.AppBarLayout>
      <android.support.v4.widget.NestedScrollView>
      </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

这就是整体布局的嵌套原则了，我们看到Toolbar被三层布局包围着，分别是CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout。

> CoordinatorLayout必须被作为根布局，它嵌套两个布局：AppBarLayout、NestedScrollView。  
> AppBarLayout里面就是标题栏了  
> NestedScrollView里面是toolbar下面的空间，可以由程序员自由写，这个布局可以使用RecycleView代替

现在布局里面并没有属性，我们现在给他们加上属性：

添加的属性只有一个android:fitsSystemWindows=”true”这个可能大家不明白，这个属性说白了就是防止标题栏里面的内容跑到状态栏里去。  
我们继续添加属性：

新添加的这些属性也不需要说，继续添加属性：

<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:fitsSystemWindows="true">
      <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <android.support.v7.widget.Toolbar/>
        </android.support.design.widget.CollapsingToolbarLayout>
      </android.support.design.widget.AppBarLayout>
      <android.support.v4.widget.NestedScrollView>
      </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

又出来一个新属性：app:layout\_scrollFlags=”scroll|exitUntilCollapsed”  
这个属性的值有多个：  
1. scroll：Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点：第一点，如果使用了其他值，必定要使用这个值才能起作用；第二点：如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用。  
2. enterAlways：快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比 scroll 和 scroll | enterAlways 设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动。  
3. enterAlwaysCollapsed：enterAlways的附加值。这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。  
4. exitUntilCollapsed：这里也涉及到最小高度。发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。  
5. snap：简单理解，就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动。

继续添加属性：

<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:fitsSystemWindows="true">
      <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toobar"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
      </android.support.design.widget.AppBarLayout>
      <android.support.v4.widget.NestedScrollView>
      </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

新添加的属性又有一个新属性：app:layout\_collapseMode=”pin”  
这里的值也有多个：  
1. app:layout\_collapseMode=”none”默认效果，随父控件一起滑动；  
2. app:layout\_collapseMode=”pin”缩放模式，在滚动的时候Toolbar不跟着走；  
3. app:layout\_collapseMode=”parallax”视察效果，随父控件进行高度缩放

继续添加新属性：

<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:fitsSystemWindows="true">
      <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toobar"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                app:layout_collapseMode="pin"/>
        </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
      </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

这里又出现了新属性：app:layout\_behavior=”@string/appbar\_scrolling\_view\_behavior”  
这个string值不需要我们定义，直接拿来用就可以  
这个属性的意思就是当我们滑动这个布局时，将滑动事件传递给上面的Toolbar。

这样Toolbar部分已经写完了，我们只需要在NestedScrollView布局中添加我们想要放入主体的布局就可以了。

[Link 1]: http://blog.csdn.net/key_mql/article/details/71374270