程序员徐公

微信公众号：程序员徐公

0%

发表于 阅读次数：
本文字数： 4.1k 阅读时长 ≈ 4 分钟

360面试心得（Android）

这次360面试，总共面试了两轮，都是视频面试。

时间:2016-08-23

转载请注明原博客地址：

闲谈：

从大二暑假的时候开始，一直想进腾讯或者阿里，在招实习生的时候，最终遗憾落选。暑假的时候为了好好准备校招，我放弃了去步步高实习的机会，继续在原来的一家公司实习。在暑假的时候找师兄师姐内推了腾讯，阿里，最终都没有通过简历筛选，没有面试。说实话，刚开始内心是挺失落的，挺难受的，但经过一两天的调整，我也意识到自己的错误，以前那种强烈想进bat的欲望渐渐淡了下来，当然并不是说不想进bat，只是不再那么注重结果，更注重这奋斗过程中个人的成长。

360一面

差不多三十五分钟

  • 介绍你做过的项目
  • 手写单例模式
  • 布局优化
  • 有没有用过什么开源框架？
  • ImagLoader的实现原理
  • OnTouchEvent事件中 down事件 和up事件的传递
  • hashMap的实现 原理
  • LinkedHashMap的实现原理
  • 内存管理及优化
  • 点九图

点九图

https://isux.tencent.com/android-ui-9-png.html

放大后可以比较明显的看到上下左右分别有一个像素的黑色线段，这里分别标注了序号。简单来说，

序号1和2标识了可以拉伸的区域，

序号3和4标识了内容区域。当设定了按钮实际应用的宽和高之后，横向会拉伸1区域的像素，纵向会拉伸2区域的像素。如下图：

这里程序设置的文字垂直居中，水平居左的对齐方式。对齐方式是没有问题的，但是对于这种大圆角同时又有些不规则边框的的图形来说，错误的标注方式会让排版看起来很混乱。所以我们需要修正内容区域的线段位置和长度。

有两点需要特别注意下：

1.最外围的一圈像素必须要么是纯黑色，要么是透明，一点点的半透明的像素都不可以有，比如说99%的黑色或者是1%的投影都不可以有;

2.文件的后缀名必须是.9.png，不能是.png或者是.9.png.png，这样的命名都会导致编译失败。

内存管理及优化

我这里答的是内存泄漏和oom
少用static静态变量

  1. 珍惜Services资源

我们知道service所在的Activity级别相对后台Activity的级别是比较 高的，一般不易被回收。
在service不再使用的时候，及时退出。最好的方法是使用IntentService

2）在UI不可见的时候释放资源

当用户切换到其它应用并且你的应用 UI不再可见时，你应该释放你的应用UI上所占用的所有内存资源。在这个时候释放UI资源可以显著的增加系统缓存进程的能力，它会对用户体验有着很直接的影响。

为了能够接收到用户离开你的UI时的通知，你需要实现Activtiy类里面的onTrimMemory()回调方法。你应该使用这个方法来监听到TRIM_MEMORY_UI_HIDDEN级别的回调，此时意味着你的UI已经隐藏，你应该释放那些仅仅被你的UI使用的资源。

请注意：你的应用仅仅会在所有UI组件的被隐藏的时候接收到onTrimMemory()的回调并带有参数TRIM_MEMORY_UI_HIDDEN。这与onStop()的回调是不同的，onStop会在activity的实例隐藏时会执行，例如当用户从你的app的某个activity跳转到另外一个activity时前面activity的onStop()会被执行。因此你应该实现onStop回调，并且在此回调里面释放activity的资源，例如释放网络连接，注销监听广播接收者。除非接收到onTrimMemory(TRIM_MEMORY_UI_HIDDEN))的回调，否者你不应该释放你的UI资源。这确保了用户从其他activity切回来时，你的UI资源仍然可用，并且可以迅速恢复activity。

  1. 当内存紧张时释放部分内存

关于onTrimMemory的介绍

在你的app生命周期的任何阶段，onTrimMemory的回调方法同样可以告诉你整个设备的内存资源已经开始紧张。你应该根据onTrimMemory回调中的内存级别来进一步决定释放哪些资源。

TRIM_MEMORY_RUNNING_MODERATE：你的app正在运行并且不会被列为可杀死的。但是设备此时正运行于低内存状态下，系统开始触发杀死LRU Cache中的Process的机制。
TRIM_MEMORY_RUNNING_LOW：你的app正在运行且没有被列为可杀死的。但是设备正运行于更低内存的状态下，你应该释放不用的资源用来提升系统性能（但是这也会直接影响到你的app的性能）。
TRIM_MEMORY_RUNNING_CRITICAL：你的app仍在运行，但是系统已经把LRU Cache中的大多数进程都已经杀死，因此你应该立即释放所有非必须的资源。如果系统不能回收到足够的RAM数量，系统将会清除所有的LRU缓存中的进程，并且开始杀死那些之前被认为不应该杀死的进程，例如那个包含了一个运行态Service的进程。
同样，当你的app进程正在被cached时，你可能会接受到从onTrimMemory()中返回的下面的值之一:

TRIM_MEMORY_BACKGROUND: 系统正运行于低内存状态并且你的进程正处于LRU缓存名单中最不容易杀掉的位置。尽管你的app进程并不是处于被杀掉的高危险状态，系统可能已经开始杀掉LRU缓存中的其他进程了。你应该释放那些容易恢复的资源，以便于你的进程可以保留下来，这样当用户回退到你的app的时候才能够迅速恢复。
TRIM_MEMORY_MODERATE: 系统正运行于低内存状态并且你的进程已经已经接近LRU名单的中部位置。如果系统开始变得更加内存紧张，你的进程是有可能被杀死的。
TRIM_MEMORY_COMPLETE: 系统正运行与低内存的状态并且你的进程正处于LRU名单中最容易被杀掉的位置。你应该释放任何不影响你的app恢复状态的资源。
因为onTrimMemory()的回调是在API 14才被加进来的，对于老的版本，你可以使用onLowMemory)回调来进行兼容。onLowMemory相当与TRIM_MEMORY_COMPLETE。

Note: 当系统开始清除LRU缓存中的进程时，尽管它首先按照LRU的顺序来操作，但是它同样会考虑进程的内存使用量。因此消耗越少的进程则越容易被留下来。

  1. 避免bitmaps的浪费

当你加载一个bitmap时，仅仅需要保留适配当前屏幕设备分辨率的数据即可，如果原图高于你的设备分辨率，需要做缩小的动作。请记住，增加bitmap的尺寸会对内存呈现出2次方的增加，因为X与Y都在增加。

Note:在Android 2.3.x (API level 10)及其以下, bitmap对象的pixel data是存放在native内存中的，它不便于调试。然而，从Android 3.0(API level 11)开始，bitmap pixel data是分配在你的app的Dalvik heap中, 这提升了GC的工作效率并且更加容易Debug。因此如果你的app使用bitmap并在旧的机器上引发了一些内存问题，切换到3.0以上的机器上进行Debug。

  1. 使用优化的数据容器

利用Android Framework里面优化过的容器类，例如SparseArray, SparseBooleanArray, 与 LongSparseArray。 通常的HashMap的实现方式更加消耗内存，因为它需要一个额外的实例对象来记录Mapping操作。另外，SparseArray更加高效在于他们避免了对key与value的autobox自动装箱，并且避免了装箱后的解箱。

  1. 请注意内存开销

对你所使用的语言与库的成本与开销有所了解，从开始到结束，在设计你的app时谨记这些信息。通常，表面上看起来无关痛痒(innocuous)的事情也许实际上会导致大量的开销。例如：

Enums的内存消耗通常是static constants的2倍。你应该尽量避免在Android上使用enums。
在Java中的每一个类(包括匿名内部类)都会使用大概500 bytes。
每一个类的实例花销是12-16 bytes。
往HashMap添加一个entry需要额一个额外占用的32 bytes的entry对象。
7) 请注意代码“抽象”

通常，开发者使用抽象作为”好的编程实践”，因为抽象能够提升代码的灵活性与可维护性。然而，抽象会导致一个显著的开销：通常他们需要同等量的代码用于可执行。那些代码会被map到内存中。因此如果你的抽象没有显著的提升效率，应该尽量避免他们。

  1. 使用ProGuard来剔除不需要的代码

ProGuard能够通过移除不需要的代码，重命名类，域与方法等方对代码进行压缩，优化与混淆。使用ProGuard可以使得你的代码更加紧凑，这样能够使用更少mapped代码所需要的RAM。

  1. 对最终的APK使用zipalign

在编写完所有代码，并通过编译系统生成APK之后，你需要使用zipalign对APK进行重新校准。如果你不做这个步骤，会导致你的APK需要更多的RAM，因为一些类似图片资源的东西不能被mapped。

Notes: Google Play不接受没有经过zipalign的APK。

360二面

一面过了十多分钟以后，接着就进行二面，都是视频面试，差不多二十分钟左右

  • AsyncTak的原理及常用方法
  • APK从安装到启动的过程
  • 平时是怎样学习的？
  • 学习和实习是在怎样协调的 ？
  • 有360手机助手有什么想了解的吗？

对360手机助手有什么想了解的？

这里我提问的是省流量升级是怎样实现的？
后面追问是不是利用动态加载技术。面试官解释的是不是你，是对比版本之间的二进制文件差异。

面试总结

题外话

两轮面试面试官人都挺好的，都面带笑容个，感觉很好说话，当天晚上我加了面试官的微信，问他多久会出结果，面试官问我说后面有没有接到电话，我说没有，然后面试官说应该被刷了。

个人心得

可能是第一次视频面试，感觉个人太紧张了，有好多原理性的东西讲着讲着就忘记讲了，面试的时候真的是太紧张了，发挥不太好，平时一定要多总结，不然面试的时候一下子总结地不太好，发挥不出应有的水平。

转载请注明原博客地址：

发表于 阅读次数：
本文字数： 22k 阅读时长 ≈ 20 分钟

使用CoordinatorLayout打造各种炫酷的效果

自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示

前段时间写了一篇博客使用CoordinatorLayout打造各种炫酷的效果,主要介绍了APPBarLayout和CollapsingToolbarLayout的基本用法，AppBarLayout主要用来实现在滚动的时候ToolBar的 隐藏于展示，CollapsingToolbarLayout主要用来实现parallax和pin等效果。如果你对CoordinatorLayout还不了解的话，请先阅读这篇文章。

写作思路

  • CoordinatorLayout Behavior 简介
  • 怎样自定义 Behavior
  • 仿知乎效果 自定义 Behavior 的实现
  • 自定义 Behavior 两种方法的 对比
  • FloatActionButton 自定义 Behavior 效果的实现
  • 题外话

今天就来讲解怎样通过自定义behavior来实现各种炫酷的效果 ，效果图如下

下面让我们一起来看一下怎样实现仿知乎的效果

老规矩，先看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/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:id="@+id/index_app_bar"
        theme="@style/AppTheme.AppBarOverlay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">


            <ImageView
                android:id="@+id/search"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:src="@drawable/search"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/search"
                android:text="搜索话题、问题或人"
                android:textSize="16sp"/>

        </RelativeLayout>


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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v7.widget.RecyclerView>


    <!--使用RadioGroup来实现tab的切换-->
    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/bg_tab"
        android:orientation="horizontal"
        app:layout_behavior="@string/behavior_footer"
        >

        <RadioButton
            android:id="@+id/rb_home"
            style="@style/bottom_tab"
            android:drawableTop="@drawable/sel_home"
            android:text="Home"/>

        <RadioButton
            android:id="@+id/rb_course"
            style="@style/bottom_tab"
            android:drawableTop="@drawable/sel_course"
            android:text="course"/>

        <RadioButton
            android:id="@+id/rb_direct_seeding"
            style="@style/bottom_tab"
            android:drawableTop="@drawable/sel_direct_seeding"
            android:text="direct"/>

        <RadioButton
            android:id="@+id/rb_me"
            style="@style/bottom_tab"
            android:drawableTop="@drawable/sel_me"
            android:text="me"/>

    </RadioGroup>


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style name="bottom_tab">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:text">0dp</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@drawable/sel_bottom_tab_text</item>
    <item name="android:padding">10dp</item>
    <item name="android:button">@null</item>
</style>
<style name="bottom_tab">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:text">0dp</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@drawable/sel_bottom_tab_text</item>
    <item name="android:padding">10dp</item>
    <item name="android:button">@null</item>
</style>


思路分析

根据动态如可以看到，主要有两个效果

  • 上面的AppBarLayout 向上滑动的时候会隐藏，向下滑动的时候会展示，说白了就是给APPLayout的子View Relativelayout 设置 app:layout_scrollFlags=”scroll|enterAlways”，核心代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<android.support.design.widget.AppBarLayout
    android:id="@+id/index_app_bar"
    theme="@style/AppTheme.AppBarOverlay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways">
        
        
      ----

    </RelativeLayout>
 </android.support.design.widget.AppBarLayout>
  • 下面的 RadioGroup ，我们可以看到，向上 滑动的时候会隐藏，向下滑动的时候会显示，其实我们只是给其设置了 behavior 而已 app:layout_behavior=”@string/behavior_footer”，那这个behavior_footer是什么东西，别急 ，下面就是介绍了
1
<string name="behavior_footer">com.xujun.contralayout.behavior.FooterBehavior</string>

Behavior简介

Behavior是CoordinatorLayout里面的一个内部类，通过它我们可以与 CoordinatorLayout的一个或者多个子View进行交互，包括 drag，swipes, flings等手势动作。

今天 我们主要着重介绍里面的几个方法

方法解释
boolean layoutDependsOn(CoordinatorLayout parent, V child, View dependency)确定child View 是否有一个特定的兄弟View作为布局的依赖（即dependency）
boolean onDependentViewChanged(CoordinatorLayout parent, V child, View dependency)当child View 的 dependent view 发生变化的时候，这个方法会调用
boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, V child, View directTargetChild, View target, int nestedScrollAxes)当CoordinatorLayout 的直接或者非直接子View开始准备嵌套滑动的时候会调用
void onNestedScroll(CoordinatorLayout coordinatorLayout, V child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed)当嵌套滑动的 时候，target尝试滑动或者正在滑动的 时候会调用

关于更多方法，请参考官网文档说明

怎样自定义Behavior

前面已经说到，今天主要介绍四个方法，这里我们把它分为两组。

第一组

1
2
3
4
5
// 决定child 依赖于把一个 dependency
boolean	layoutDependsOn(CoordinatorLayout parent, V child, View dependency)

// 当 dependency View 改变的时候 child 要做出怎样的响应
boolean	onDependentViewChanged(CoordinatorLayout parent, V child, View dependency)

第二组

1
2
3
4
5
// 当CoordinatorLayout的直接或者非直接子View开始嵌套滑动的时候，会调用这个方法
boolean	onStartNestedScroll(CoordinatorLayout coordinatorLayout, V child, View directTargetChild, View target, int nestedScrollAxes)

// 当嵌套滑动的时候，target 尝试滑动或者正在滑动会调用这个方法
onNestedScroll(CoordinatorLayout coordinatorLayout, V child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed)

首先我们先看第一组是怎样实现的？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * 知乎效果底部behavior 依赖于 AppBarLayout
 *
 * @author xujun  on 2016/11/30.
 * @email gdutxiaoxu@163.com
 */

public class FooterBehaviorDependAppBar extends CoordinatorLayout.Behavior<View> {

    public static final String TAG = "xujun";

    public FooterBehaviorDependAppBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //当 dependency instanceof AppBarLayout 返回TRUE，将会调用onDependentViewChanged（）方法
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return   dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        //根据dependency top值的变化改变 child 的 translationY
        float translationY = Math.abs(dependency.getTop());
        child.setTranslationY(translationY);
        Log.i(TAG, "onDependentViewChanged: " + translationY);
        return true;

    }
}

思路分析

这里我们要分清两个概念，child 和 dependency ，child 是我们要改变的坐标的view，而 dependency 是child 的 附属 ，即child 会随着 dependency 坐标的改变而改变。

比如上面的例子：当我们把 app:layout_behavior=”com.xujun.contralayout.behavior.FooterBehaviorDependAppBar” 设置给 RadioGroup 的时候，这时候 child 就是 RadioGroup ，而 dependency 就是 APPBarLayout ，因为我们在 layoutDependsOn 方法里面 ，返回 dependency instanceof AppBarLayout ，即当 dependency 是 AppBarLayout 或者 AppBarLayout的子类的时候返回TRUE。

1
2
3
4
5
//当 dependency instanceof AppBarLayout 返回TRUE，将会调用onDependentViewChanged（）方法
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return   dependency instanceof AppBarLayout;
    }

而之所以 RadioGroup 在向上滑动的时候会隐藏，向下滑动的时候会显示，是因为我们在 onDependentViewChanged 方法的时候 动态地根据 dependency 的 top 值改变 RadioGroup 的 translationY 值，核心 代码如下

1
2
3
4
5
6
7
8
9
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
    //根据dependency top值的变化改变 child 的 translationY
    float translationY = Math.abs(dependency.getTop());
    child.setTranslationY(translationY);
    Log.i(TAG, "onDependentViewChanged: " + translationY);
    return true;

}

到此第一种思路分析为止

第二种思路

主要是根据 onStartNestedScroll（） 和 onNestedPreScroll()方法 来实现的，

  • 当我们开始滑动的时候，我们判断是否是垂直滑动，如果是返回TRUE，否则返回 FALSE，返回TRUE，会接着调用onNestedPreScroll（）等一系列方法。
1
2
3
4
5
6
//1.判断滑动的方向 我们需要垂直滑动
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child,
                                   View directTargetChild, View target, int nestedScrollAxes) {
    return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
}
  • 在 onNestedPreScroll（） 方法里面，我们根据我们的逻辑来决定是否显示 target ， 在这里我们是向上上滑动的时候，如果我们滑动的距离超过 target 的高度 并且 当前是可见的状态下，我们执行动画，隐藏 target，当我们向下滑动的时候，并且 View 是不可见的情况下，我们执行动画 ，显示target
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//2.根据滑动的距离显示和隐藏footer view
  @Override
  public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child,
                                View target, int dx, int dy, int[] consumed) {
      if (dy > 0 && sinceDirectionChange < 0 || dy < 0 && sinceDirectionChange > 0) {
          child.animate().cancel();
          sinceDirectionChange = 0;
      }
      sinceDirectionChange += dy;
      int visibility = child.getVisibility();
      if (sinceDirectionChange > child.getHeight() && visibility == View.VISIBLE) {
          hide(child);
      } else {
          if (sinceDirectionChange < 0 && (visibility == View.GONE || visibility == View
                  .INVISIBLE)) {
              show(child);
          }
      }
  }

全部代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
 * 知乎效果底部 behavior
 *
 * @author xujun  on 2016/11/30.
 * @email gdutxiaoxu@163.com
 */

public class FooterBehavior extends CoordinatorLayout.Behavior<View> {

    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();

    private int sinceDirectionChange;

    public FooterBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //1.判断滑动的方向 我们需要垂直滑动
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child,
                                       View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    //2.根据滑动的距离显示和隐藏footer view
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child,
                                  View target, int dx, int dy, int[] consumed) {
        if (dy > 0 && sinceDirectionChange < 0 || dy < 0 && sinceDirectionChange > 0) {
            child.animate().cancel();
            sinceDirectionChange = 0;
        }
        sinceDirectionChange += dy;
        int visibility = child.getVisibility();
        if (sinceDirectionChange > child.getHeight() && visibility == View.VISIBLE) {
            hide(child);
        } else {
            if (sinceDirectionChange < 0 && (visibility == View.GONE || visibility == View
                    .INVISIBLE)) {
                show(child);
            }
        }
    }

    private void hide(final View view) {
        ViewPropertyAnimator animator = view.animate().translationY(view.getHeight()).
                setInterpolator(INTERPOLATOR).setDuration(200);
        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                view.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                show(view);
            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        animator.start();
    }

    private void show(final View view) {
        ViewPropertyAnimator animator = view.animate().translationY(0).
                setInterpolator(INTERPOLATOR).
                setDuration(200);
        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                view.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                hide(view);
            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        animator.start();

    }
}

两种实现方法的对比和总结

  • 我们知道第一种方法我们主要是重写layoutDependsOn 和 onDependentViewChanged 这两个方法，这个方法在 layoutDependsOn 判断 dependency 是否是 APpBarLayout 的实现类，所以 会导致 child 依赖于 AppBarLayout，灵活性不是太强

  • 而第二种方法，我们主要是重写 onStartNestedScroll 和 onNestedPreScroll 这两个方法，判断是否是垂直滑动，是的话就进行处理，灵活性大大增强，推荐使用这一种方法

  • 需要注意的是不管是第一种方法，还是第二种方法，我们都需要重写带两个构造方法的函数，因为底层机制会采用反射的形式获得该对象

1
2
3
public FooterBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
}

自定义 Behavior 实现 FloatingActionButton 的显示与隐藏

效果图如下

缩放隐藏的

向上向下隐藏的

布局代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/activity_floating_action_button"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.xujun.contralayout.UI.FloatingActionButtonActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/index_app_bar"
        theme="@style/AppTheme.AppBarOverlay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">


            <ImageView
                android:id="@+id/search"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:src="@drawable/search"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/search"
                android:text="搜索话题、问题或人"
                android:textSize="16sp"/>

        </RelativeLayout>


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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:layout_marginBottom="40dp"
        android:layout_marginRight="25dp"
        android:background="@android:color/holo_green_light"
        android:src="@drawable/add"
        app:layout_behavior="@string/behavior_my_fab_scale"/>

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

如果想使用不同的效果，只需要给 FloatingActionButton 制定不同的 bevaior 即可

1
app:layout_behavior="com.xujun.contralayout.behavior.MyFabBehavior"

自定义behavior 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/**
 *  FloatingActionButton behavior 向上向下隐藏的
 * @author xujun  on 2016/12/1.
 * @email gdutxiaoxu@163.com
 */

public class MyFabBehavior extends CoordinatorLayout.Behavior<View> {

    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();

    private float viewY;//控件距离coordinatorLayout底部距离
    private boolean isAnimate;//动画是否在进行

    public MyFabBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //在嵌套滑动开始前回调
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {

        if(child.getVisibility() == View.VISIBLE&&viewY==0){
            //获取控件距离父布局（coordinatorLayout）底部距离
            viewY=coordinatorLayout.getHeight()-child.getY();
        }

        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;//判断是否竖直滚动
    }

    //在嵌套滑动进行时，对象消费滚动距离前回调
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        //dy大于0是向上滚动 小于0是向下滚动

        if (dy >=0&&!isAnimate&&child.getVisibility()==View.VISIBLE) {
            hide(child);
        } else if (dy <0&&!isAnimate&&child.getVisibility()==View.GONE) {
            show(child);
        }
    }

    //隐藏时的动画
    private void hide(final View view) {
        ViewPropertyAnimator animator = view.animate().translationY(viewY).setInterpolator(INTERPOLATOR).setDuration(200);

        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                isAnimate=true;
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                view.setVisibility(View.GONE);
                isAnimate=false;
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                show(view);
            }

            @Override
            public void onAnimationRepeat(Animator animator) {
            }
        });
        animator.start();
    }

    //显示时的动画
    private void show(final View view) {
        ViewPropertyAnimator animator = view.animate().translationY(0).setInterpolator(INTERPOLATOR).setDuration(200);
        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                view.setVisibility(View.VISIBLE);
                isAnimate=true;
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                isAnimate=false;
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                hide(view);
            }

            @Override
            public void onAnimationRepeat(Animator animator) {
            }
        });
        animator.start();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/**
 * <p>下拉时显示FAB，上拉隐藏，留出更多位置给用户。</p>
 * Created on 2016/12/1.
 *
 * @author xujun
 */
public class ScaleDownShowBehavior extends FloatingActionButton.Behavior {
    /**
     * 退出动画是否正在执行。
     */
    private boolean isAnimatingOut = false;

    private OnStateChangedListener mOnStateChangedListener;

    public ScaleDownShowBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        if ((dyConsumed > 0 || dyUnconsumed > 0) && !isAnimatingOut && child.getVisibility() == View.VISIBLE) {//往下滑
            AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);
            if (mOnStateChangedListener != null) {
                mOnStateChangedListener.onChanged(false);
            }
        } else if ((dyConsumed < 0 || dyUnconsumed < 0) && child.getVisibility() != View.VISIBLE) {
            AnimatorUtil.scaleShow(child, null);
            if (mOnStateChangedListener != null) {
                mOnStateChangedListener.onChanged(true);
            }
        }
    }

    public void setOnStateChangedListener(OnStateChangedListener mOnStateChangedListener) {
        this.mOnStateChangedListener = mOnStateChangedListener;
    }

    // 外部监听显示和隐藏。
    public interface OnStateChangedListener {
        void onChanged(boolean isShow);
    }

    public static <V extends View> ScaleDownShowBehavior from(V view) {
        ViewGroup.LayoutParams params = view.getLayoutParams();
        if (!(params instanceof CoordinatorLayout.LayoutParams)) {
            throw new IllegalArgumentException("The view is not a child of CoordinatorLayout");
        }
        CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) params).getBehavior();
        if (!(behavior instanceof ScaleDownShowBehavior)) {
            throw new IllegalArgumentException("The view is not associated with ScaleDownShowBehavior");
        }
        return (ScaleDownShowBehavior) behavior;
    }

    private ViewPropertyAnimatorListener viewPropertyAnimatorListener = new ViewPropertyAnimatorListener() {

        @Override
        public void onAnimationStart(View view) {
            isAnimatingOut = true;
        }

        @Override
        public void onAnimationEnd(View view) {
            isAnimatingOut = false;
            view.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationCancel(View arg0) {
            isAnimatingOut = false;
        }
    };
}

思路这里就不详细展开了，因为前面在讲解 仿知乎效果的时候已经讲过了，大概就是根据不同的滑动行为执行不同的动画 而已

题外话

  • 通过这篇博客，熟悉 CoordinatorLayout 的 各种用法，同时也初步理解了自定义Behavior的思路
  • 同时复习了动画的相关知识
  • 如果你觉得效果还不错，欢迎到我的github上面star，github地址

文章首发地址CSDN：http://blog.csdn.net/gdutxiaoxu/article/details/53453958

源码下载地址：https://github.com/gdutxiaoxu/CoordinatorLayoutExample.git

发表于 更新于 阅读次数：
本文字数： 13k 阅读时长 ≈ 12 分钟

使用CoordinatorLayout打造各种炫酷的效果

自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示

NestedScrolling 机制深入解析

一步步带你读懂 CoordinatorLayout 源码

自定义 Behavior -仿新浪微博发现页的实现

ViewPager，ScrollView 嵌套ViewPager滑动冲突解决

自定义 behavior - 完美仿 QQ 浏览器首页，美团商家详情页

CoordinatorLayout简介

CoordinatorLayout是在 Google IO/15 大会发布的，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果

CoordinatorLayout简介通常用来 干什么

Google官方地址

CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout

As a container for a specific interaction with one or more child views

简单来说就是

  • 作为最上层的View
  • 作为一个 容器与一个或者多个子View进行交互

下面我们一起先来看一下我们实现的效果图

动态图

结合ToolBar

结合ViewPager

ViewPager

结合ViewPager的视觉特差

AppBarLayout

它是继承与LinearLayout的，默认 的 方向 是Vertical

类型说明
int SCROLL_FLAG_ENTER_ALWAYSWhen entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling.
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSEDAn additional flag for ‘enterAlways’ which modifies the returning view to only initially scroll back to it’s collapsed height.
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSEDWhen exiting (scrolling off screen) the view will be scrolled until it is ‘collapsed’.
int SCROLL_FLAG_SCROLLThe view will be scroll in direct relation to scroll events.
int SCROLL_FLAG_SNAPUpon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it’s closest edge.
类型说明
int SCROLL_FLAG_ENTER_ALWAYSW((entering) / (scrolling on screen))下拉的时候，这个View也会跟着滑出。
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED另一种enterAlways，但是只显示折叠后的高度。
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED((exiting) / (scrolling off screen))上拉的时候，这个View会跟着滑动直到折叠。
int SCROLL_FLAG_SCROLL这个View将会响应Scroll事件
int SCROLL_FLAG_SNAP在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置

我们可以通过两种 方法设置这个Flag

  • 方法一
1
setScrollFlags(int)
  • 方法二
1
app:layout_scrollFlags="scroll|enterAlways"

注意事项

AppBarLayout必须作为CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，如layout_scrollFlags等。

首先我们先来看一下我们 效果图一是怎样实现的

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.design.widget.AppBarLayout
        android:id="@+id/appbar"
        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/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

       .


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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

思路 分析

从图中我们可以知道 layout_scrollFlags=”scroll|enterAlways，
前面已经说到layout_scrollFlags=scroll的时候，这个View会 跟着 滚动 事件响应，
layout_scrollFlags=“enterAlways”的时候 这个View会响应下拉事件
所以呈现出来的结果应该是我们在上拉的时候toolBar 会隐藏，下拉的时候toolBar会出来

那如果当我们的toolBar 等于 app:layout_scrollFlags=”scroll|snap”的时候 ，
layout_scrollFlags=scroll的时候，这个View会 跟着 滚动 事件响应，
layout_scrollFlags=“snap”的时候 在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置。
综上呈现的效果如下，代码见ToolBarSampleSnar的布局文件

结合ViewPager

布局代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp">


        <ImageView android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:background="?attr/colorPrimary"
                   android:scaleType="fitXY"
                   android:src="@drawable/tangyan"
                   app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>

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


    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

思路分析

其实相对于前 一个例子，只是把 摆放RecyclerView 的位置替换成ViewPager而已，为了有页面导航器的效果，再使用 TabLayout而已，而TabLayout 在我们滑动的时候最终会停靠在 最顶部，是因为我们没有设置其layout_scrollFlags，即TabLayout是静态的

运行以后，即可看到以下的结果

ViewPager

下面我们一起来看一下 TabLayout是怎样结合ViewPager直线 导航器的效果的

代码注释 里面已经解释地很清楚了 ，这里我就不解释了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
public class ViewPagerSample extends AppCompatActivity {

    ViewPager mViewPager;
    List<Fragment> mFragments;

    String[] mTitles = new String[]{
            "主页", "微博", "相册"
    };
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        // 第一步，初始化ViewPager和TabLayout
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        setupViewPager();
    }

    private void setupViewPager() {

        mFragments = new ArrayList<>();
        for (int i = 0; i < mTitles.length; i++) {
            ListFragment listFragment = ListFragment.newInstance(mTitles[i]);
            mFragments.add(listFragment);
        }
        // 第二步：为ViewPager设置适配器
        BaseFragmentAdapter adapter =
                new BaseFragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);

        mViewPager.setAdapter(adapter);
        //  第三步：将ViewPager与TableLayout 绑定在一起
        mTabLayout.setupWithViewPager(mViewPager);
    }


}

如果我们想更改Indicator的相关样式，我们可以在布局文件里面使用

1
2
3
4
5
6
7
8
9
10
11
12
<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="?attr/colorPrimary"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabIndicatorHeight="4dp"
    app:tabSelectedTextColor="#000"
    app:tabTextColor="#fff"/>


如果你不想使用Google 帮我们 封装好的控件的话，你也可以自己自定义一个控件，你可以参考我的这一篇博客仿网易新闻的顶部导航指示器

在看例子结合ViewPager的视觉特差之前 ，我们需要先了解CollapsingToolbarLayout这个控件

CollapsingToolbarLayout

CollapsingToolbarLayout继承与FrameLayout，官网地址,请自备梯子。

简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。主要实现以下功能

  • Collapsing title（可以折叠 的 标题 ）
  • Content scrim（内容装饰），当我们滑动的位置 到达一定阀值的时候，内容 装饰将会被显示或者隐藏
  • Status bar scrim（状态栏布）
  • Parallax scrolling children，滑动的时候孩子呈现视觉特差效果
  • Pinned position children，固定位置的 孩子

下面我们一起来看一下几个常量

常量解释说明
int COLLAPSE_MODE_OFFThe view will act as normal with no collapsing behavior.(这个 View将会 呈现正常的结果，不会表现出折叠效果）
int COLLAPSE_MODE_PARALLAXThe view will scroll in a parallax fashion. See setParallaxMultiplier(float) to change the multiplier used.（在滑动的时候这个View 会呈现 出 视觉特差效果 ）
int COLLAPSE_MODE_PINThe view will pin in place until it reaches the bottom of the CollapsingToolbarLayout.（当这个View到达 CollapsingToolbarLayout的底部的时候，这个View 将会被放置，即代替整个CollapsingToolbarLayout）

我们有两种方法可以设置这个常量,

方法一：在代码中使用这个方法

1
setCollapseMode(int collapseMode)

方法 二：在布局文件中使用自定义属性

1
app:layout_collapseMode="pin"

到此 ，CollapsingToolbarLayout的一些重要属性已经讲解完毕，下面我们一起来看一下我们是怎样结合ViewPager实现视差效果的

结合ViewPager的视觉特差

布局代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<?xml version="1.0" encoding="utf-8"?>

<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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        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="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                app:layout_collapseMode="parallax"
            />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

效果图如下

思路解析

  • 结构图如图片所示，先说明CollapsingToolbarLayout的变化

    CollapsingToolbarLayout里面 包含ImageView 和ToolBar，ImageView的app:layout_collapseMode=”parallax”，表示视差效果，ToolBar的 app:layout_collapseMode=”pin”，当这个TooBar到达 CollapsingToolbarLayout的底部的时候，会代替整个CollapsingToolbarLayout显示

  • 接着说明TabLayout的变化

    从前面的描述我们已经知道当 没有指定app:layout_scrollFlags的时候，最终TabLayout会静止，不会随着滑动的 时候消失不见

拓展

如果我们仅仅 改变CollapsingToolbarLayout的app:layout_scrollFlags=”scroll|exitUntilCollapsed|snap”的时候，其它代码不变，运行以后，我们将可以看到如下效果图

总结

这篇博客主要讲解了CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout的一些相关属性。

  • 对于AppBarLayout，我们主要 讲解了这个属性app:layout_scrollFlags，设置不同 的属性我们可以在滚动的时候显示不同 的效果
  • 对于CollapsingToolbarLayout，我们主要讲解了app:layout_collapseMode这个属性，设置不同的值，我们可以让其子View呈现不同的 炫酷效果，如parallax和pin等

CoordinatorLayout的相关用法还有很多，有兴趣 了解的请自行阅读: 官方文档地址

题外话

CoordinatorLayout这个控件真的很强大，使用它可以实现各种炫酷的效果，简化了开发者的许多工作，有能力的话可以去研究一下源码 ，看是怎样实现的？

参考文章：android-[译]掌握CoordinatorLayout

源码下载地址：https://github.com/gdutxiaoxu/CoordinatorLayoutExample.git

找到我

我是站在巨人的肩膀上成长起来的，同样，我也希望成为你们的巨人。觉得不错的话可以关注一下我的微信公众号程序员徐公，在此感谢各位大佬们。主要分享

1.Android 开发相关知识：包括 java，kotlin， Android 技术。
2.面试相关分享：包括常见的面试题目，大厂面试真题、面试经验套路分享。
3.算法相关学习笔记：比如怎么学习算法，leetcode 常见算法总结，跟大家一起学习算法。
4.时事点评：主要是关于互联网的，比如小米高管屌丝事件，拼多多女员工猝死事件等

希望我们可以成为朋友，成长路上的忠实伙伴！