CoordinatorLayout 自定义Behavior并不难,由简到难手把手带你撸三款!

 

先来看看最终的效果~~

这里写图片描述

嗯。。一个是头像上移的 另一个是模仿UC浏览器的。

(PД`q。)你不是说!有三款的吗,怎么只有两款!!!!

不要急嘛。。。 说了从简到难,第一款是介绍概念的啦。
关于CoordinatorLayout,以及系统预留ScrollBehavior使用网上以及有很多文章,这里就不阐述了,如果你还不了解,你可以查看[译]掌握CoordinatorLayout

基础概念

其实Behavior就是一个应用于View的观察者模式,一个View跟随者另一个View的变化而变化,或者说一个View监听另一个View。

在Behavior中,被观察View 也就是事件源被称为denpendcy,而观察View,则被称为child。

开始自定义 难度1 Button与TextView的爱恨情仇

首先在布局文件中跟布局设置为CoordinatorLayout,里面放一个Button和一个TextView。

这里我们在Activity中做一些手脚,让Button动起来(不要在意坐标这些细节)

此时,Button已经可以跟随手指移动了。

现在去自定义一个Behavior让TextView跟随Button一起动!

创建一个EasyBehavior类,继承于Behavior

注意两个方法

layoutDependsOn() 代表寻找被观察View

onDependentViewChanged() 被观察View变化的时候回调用的方法

在onDependentViewChanged中,我们让TextView跟随Button的移动而移动。代码比较简单,一看就懂。

Tip

必须重写带双参的构造器,因为从xml反射需要调用。

接下来,在xml中,给TextView设置我们的Behavior。

运行效果如下:

这里写图片描述
这样一个最简单的behavior就做好了。

##难度 2 仿UC折叠Behavior

这个效果布局嵌套比上一个例子些许复杂,如果看起来吃力,务必去补习CoordinatorLayout!!!!

先定义xml如下:

有一点值得注意的是,app:layout_anchor=”@id/frameLayout”这个属性,是附着的意思,这里我用作给了toolbar,代表toolbar附着在了frameLayout之上。会跟随frameLayout的scroll而变化Y的值。

思路分析

如何实现折叠呢,下半部分不用管了,AppBarLayout已经帮我们做好了,我们只要标注相应的scrollflags即可,所以,如上的布局,不做任何处理的话,作为标题的TextView是一直显示的,于是只要让TextView跟随Toolbar变化而变化就可以了。 接下来就创建一个Behavior类!

现在你应该可以很轻易的看懂这个Behavior的结构了。我们主要大展身手的地方其实是在onDependentViewChanged方法。

里面监听了Toolbar的Y坐标变化,然后让TextView的Y坐标也跟着变化。达到如预览图效果。
这里写图片描述

难度3 头像缩放效果

相信有了以上两个例子,这个效果对你来说不难了,不就是让imageView监听Toolbar然后跟随Toolbar的唯一变化而进行位移以及缩放么。

所以具体的解析就不说了,直接上个Behavior代码

还是说说坐标计算相关的吧。举个例子。如何让ImageView处于Toolbar中心呢,我的代码如下

为什么是这样? 上个图就明白了
这里写图片描述
怎么样,不难吧,哈 喜欢的点个赞 给个star哦~~

项目地址 https://github.com/githubwing/CustomBehavior

4 thoughts on “CoordinatorLayout 自定义Behavior并不难,由简到难手把手带你撸三款!

发表评论

电子邮件地址不会被公开。