ToolBar实现滑动伸缩效果

最新推荐文章于 2022-08-11 09:20:15 发布

Key_MQL

最新推荐文章于 2022-08-11 09:20:15 发布

阅读量1.6k

点赞数

分类专栏： Android 文章标签：动画布局

本文链接：https://blog.csdn.net/Key_MQL/article/details/71436269

版权

Android 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

添加的属性只有一个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.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>

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

<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布局中添加我们想要放入主体的布局就可以了。