仿拉勾首页之Behavior的学习

前言

最近在找工作，于是打开拉勾，看了看首页，交互做的还是不错的。先来看看拉勾效果

lagou.gif

然后最终实现的效果

lagou_my.gif

布局是图片直接用，所以会失真。

实现思路

首先这个是一个MD的效果，可以使用自定义Behavior来实现这个效果，仔细体验会发现，这个交互是分三部分来实现的

image.png

头部部分(比如banner之类的)，内容部分(比如TabLayout+ViewPager)，以及导航栏部分(实现渐变的效果)。这样就是自定义三个Behavior。

布局

头部部分的高度是固定的，用来算后面滑动的一个范围；导航栏部分的搜索框边距固定，用来说伸缩动画的，dimens.xml定义如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="height">400dp</dimen>
    <dimen name="search_margin_left">50dp</dimen>
    <dimen name="search_margin_right">50dp</dimen>
</resources>

接下来就是布局，详细布局用图片替换

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    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.v4.widget.NestedScrollView
        app:layout_behavior="@string/HeaderBehavior"
        android:id="@+id/fl_head"
        android:layout_width="match_parent"
        android:layout_height="@dimen/height"
        >
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/iv_head"
                android:layout_width="match_parent"
                android:layout_height="@dimen/height"
                android:scaleType="fitXY"
                android:src="@drawable/top"/>
        </FrameLayout>
    </android.support.v4.widget.NestedScrollView>
    <RelativeLayout
        android:id="@+id/rlToolBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center_vertical"
        app:layout_behavior="@string/SearchBehavior">
        <ImageView
            android:id="@+id/ivArrow"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_centerVertical="true"
            android:scaleType="fitXY"
            android:visibility="gone"
            android:src="@drawable/arrow" />
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginLeft="@dimen/search_margin_left"
            android:layout_marginRight="@dimen/search_margin_right"
            android:layout_centerVertical="true"
            app:cardBackgroundColor="@android:color/white"
            app:cardCornerRadius="15dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Android应用开发"
                android:gravity="center"/>
        </android.support.v7.widget.CardView>
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_centerVertical="true"
            android:scaleType="fitXY"
            android:src="@drawable/code"
            android:tint="@android:color/white"/>
    </RelativeLayout>
    <LinearLayout
        app:layout_behavior="@string/ContentBehavior"
        android:id="@+id/llContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="?attr/actionBarSize"
        android:orientation="vertical">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/iv_tab"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:scaleType="fitXY"
                android:src="@drawable/tab"/>
        </FrameLayout>
        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nsv"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/iv_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@drawable/content"/>
        </android.support.v4.widget.NestedScrollView>
    </LinearLayout>

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

三个部分，头部FrameLayout，导航栏RelativeLayout透明覆盖再头部部分上面，内容部分LinearLayout放置如TabLayout+ViewPager，这里用一个子FrameLayout和NestedScrollView代替。内容部分给个底部边距?attr/actionBarSize，抵消导航栏部分占用的高度。

同时这里定义了三个命名为HeaderBehavior，SearchBehavior和ContentBehavior三个Behavior，也是接下来要实现的滚动效果

Behavior

  • HeaderBehavior主要是处理往上滚动的，onNestedPreScroll里面进行translationY设置来滑动。onInterceptTouchEvent里面判断当手指松开的时候进行头部展开和关闭的操作。

  • ContentBehavior用AppBarLayout里面的内部抽象类HeaderScrollingViewBehavior来布局，放在头部部分的下面，由于HeaderScrollingViewBehavior不是公共的，所以可以自己复制一份代码出来，HeaderScrollingViewBehavior主要是onMeasureChild和layoutChild两个方法来进行大小和位置的分布。然后在Behavior的layoutDependsOn里面进行依赖头部滑动，onDependentViewChanged来处理内容部分的滚动

  • SearchBehavior和ContentBehavior同理，用DrawableCompat来处理图片颜色渐变，TransitionManager这个类来给margin伸缩一个动画

在写各个Behavior之前，会发现头部部分和内容部分滚动的速度和范围是不一样的，所以这里先定义下滚动的范围

object Utils{
  //内容部分在头部滚动的范围
    fun getScrollHeight(ctx: Context):Float{
       val  mHeight = ctx.resources.getDimension(R.dimen.height).toInt()
       val actionBarSize = getActionBarHeight(ctx)
      //如果上面内嵌到了状态栏，还要减去状态栏高度，同时内容部分底部边距也是状态栏高度+导航栏高度
        return (mHeight - actionBarSize)/getScrollFriction()
    }
  //给定内容部分和头部滚动位移的一个倍数，
    fun getScrollFriction():Float = 1.5f
    fun getActionBarHeight(ctx: Context): Int {
        var actionBarHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50f, ctx.resources.displayMetrics).toInt()
        val tv = TypedValue()
        if (ctx.theme.resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
            actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, ctx.resources.displayMetrics)
        }
        return actionBarHeight
    }
    fun getStatusBarHeight(ctx: Context):Int{
        var result = 0
        val resourceId = ctx.resources.getIdentifier("status_bar_height", "dimen", "android")
        if (resourceId > 0) {
            result = ctx.resources.getDimensionPixelSize(resourceId)
        }
        return result
    }
    fun range(min:Float,max:Float,value:Float):Float{
        return Math.min(Math.max(min,value),max)
    }
}

基本的关系定义好后，接下来就是实现Behavior

HeaderBehavior的代码：

class HeaderBehavior: CoordinatorLayout.Behavior<View> {
    //滚动的View
    private var mChildView: View? =null
    //过了头部滑动高度后，重新调用onStartNestedScroll的时候用
    private var axes:Int = ViewCompat.SCROLL_AXIS_VERTICAL
    private var type:Int = 0
    
    //手指松开后，通过`Scroller`类来实现头部的展示和关闭的操作
    private var mScroller: Scroller
    //滚动的高度
    private var mHeight:Float = 0f
    private var mScrollRunnable:ScrollerRunnable?= null
    //是不是一开始头部就隐藏了
    private var mStartHeaderHidden:Boolean = true 
    //滑动速度
    private var velocityY:Float = 0f
    constructor(ctx: Context,attributeSet: AttributeSet):super(ctx,attributeSet){
        mScroller = Scroller(ctx)
        mHeight = Utils.getScrollHeight(ctx)
    }
    //什么方向可以滚动,并且滑动到了头部高度就不拦截
    override fun onStartNestedScroll(coordinatorLayout: CoordinatorLayout, child: View, directTargetChild: View, target: View, axes: Int, type: Int): Boolean {
        this.mChildView = child
        this.axes = axes
        this.type = type
        return (axes == ViewCompat.SCROLL_AXIS_VERTICAL) && !isClose()
    }
    //滚动监听
    override fun onNestedPreScroll(coordinatorLayout: CoordinatorLayout, child: View, target: View, dx: Int, dy: Int, consumed: IntArray, type: Int) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type)
        //降低移动距离，防止抖动,ScrollFriction太大还是会有抖动。。。。
        val tempDy = dy.toFloat()/(Utils.getScrollFriction()*2)
        child.translationY = Utils.range(-mHeight,0f,child.translationY - tempDy)
        consumed[1] = dy

    }
    //当头部关闭了，就不拦截事件了
    override fun onNestedPreFling(coordinatorLayout: CoordinatorLayout, child: View, target: View, velocityX: Float, velocityY: Float): Boolean {
        this.velocityY = velocityY
        return !isClose()
    }
    override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: View, ev: MotionEvent): Boolean {
        when(ev.action){
            MotionEvent.ACTION_DOWN -> {
                mStartHeaderHidden = isClose()
            }
            MotionEvent.ACTION_MOVE -> {
              //如果滑动中到了头部关闭之后就重新给事件分发下去
                if(isClose()&&!mStartHeaderHidden) parent.onStartNestedScroll(parent,child,axes,type)
            }
            MotionEvent.ACTION_UP -> {
              //手指松开的处理
                handlerActionUp()
            }
        }
        return super.onInterceptTouchEvent(parent, child, ev)
    }

    private fun createRunnable(){
        if(mScrollRunnable==null) mScrollRunnable = ScrollerRunnable(mScroller,mChildView!!,(mHeight+0.5f).toInt())
    }
    private fun handlerActionUp(){
        createRunnable()
        if(velocityY > 10000){
            mScrollRunnable?.scrollToClose()
            return
        }
        if(Math.abs(mChildView!!.translationY) < (mHeight /2)){
            mScrollRunnable?.scrollToOpen()
        }else{
            mScrollRunnable?.scrollToClose()
        }
    }
    open fun isClose():Boolean{
        return mChildView!=null && mChildView!!.translationY.toInt() <= - mHeight.toInt()
    }
    open fun scrollToOpen(){
        createRunnable()
        mScrollRunnable?.scrollToOpen()
    }
}

open class ScrollerRunnable(private var scroller:Scroller,
                       private var childView:View,
                       private var height:Int):Runnable{
    open fun scrollToOpen(){
        val scrollY = childView.translationY.toInt()
        scroller.startScroll(0,scrollY,0,-scrollY)
        startScroll()
    }
    open fun scrollToClose(){
        val currY = childView.translationY.toInt()
        val scrollY = height - Math.abs(currY)
        scroller.startScroll(0,currY,0,-scrollY)
        startScroll()
    }
    private fun startScroll(){
        if(scroller.computeScrollOffset()){
            childView.postDelayed(this,16)
        }
    }
    override fun run() {
        if(scroller.computeScrollOffset()){
            childView.translationY = scroller.currY.toFloat()
            childView.postDelayed(this,16)
        }
    }
}

ContentBehavior的代码：

class ContentBehavior:HeaderScrollingViewBehavior {
    constructor(ctx: Context, attrs: AttributeSet): super(ctx,attrs)
    //依赖头部部分的滚动上面
    override fun layoutDependsOn(parent: CoordinatorLayout?, child: View?, dependency: View): Boolean {
        return dependency.id == R.id.fl_head
    }
   //HeaderScrollingViewBehavior里面的onMeasureChild使用
    override fun findFirstDependency(views: MutableList<View>): View? {
        for (i in views.indices) {
            val view = views[i]
            if (view.id == R.id.fl_head) {
                return view
            }
        }
        return null
    }
  //结合依赖进行监听
    override fun onDependentViewChanged(parent: CoordinatorLayout?, child: View?, dependency: View?): Boolean {
        offsetChild(child!!, dependency!!)
        return super.onDependentViewChanged(parent, child, dependency)
    }

    private fun offsetChild(child: View, dependency: View) {
        //-0.5f滑动慢，最后一下没监听到
        child.translationY = (dependency.translationY - 0.5f)  * Utils.getScrollFriction()
    }
}

SearchBehavior的代码如下：

class SearchBehavior:CoordinatorLayout.Behavior<View> {
    private val mMarginLeft:Int
    private val mMarginRight:Int
    private var mHeight:Float
    private var mExpend:Boolean = true
    private var mContext:Context
    private var mSet: AutoTransition
    private val mAnimDuration:Long = 300
    constructor(ctx: Context, attributeSet: AttributeSet):super(ctx,attributeSet){
        this.mMarginLeft = ctx.resources.getDimension(R.dimen.search_margin_left).toInt()
        this.mMarginRight = ctx.resources.getDimension(R.dimen.search_margin_right).toInt()
        this.mHeight = Utils.getScrollHeight(ctx)
        mContext = ctx
        mSet = AutoTransition()
        mSet.duration = mAnimDuration
    }

    override fun layoutDependsOn(parent: CoordinatorLayout?, child: View?, dependency: View): Boolean {
        return dependency.id == R.id.fl_head
    }
    override fun onDependentViewChanged(parent: CoordinatorLayout?, child: View?, dependency: View): Boolean {
        if(child is ViewGroup){
            //-0.5f滑动慢，最后一下没监听到
            val currY = dependency.translationY- 0.5f
            val alpha = Utils.range(0f,1f,Math.abs(currY)/mHeight*2)
            //背景颜色
            child.setBackgroundColor(Color.argb(alpha.toInt()*255,255,255,255))
            //二维码图标变化
            if(child.getChildAt(2) is ImageView){
                val ivCode = (child.getChildAt(2) as ImageView)
                val codeDrawable = ivCode.drawable
                DrawableCompat.setTint(codeDrawable,
                        if(alpha <= 0.2f) Color.WHITE else Color.argb(alpha.toInt()*255,144,144,144))
                ivCode.setImageDrawable(codeDrawable)
            }
            val expend = Math.abs(currY) >= mHeight
            //箭头展示,动画结束后显示
            val ivArrow = child.getChildAt(0)
            if(!expend){
                ivArrow.visibility = View.GONE
            }else{
              //动画结束后再显示
                ivArrow.postDelayed({ivArrow.visibility = View.VISIBLE },mAnimDuration)
            }
            //根据margin做伸缩变化
            toggle(child,expend,false)
        }
        return super.onDependentViewChanged(parent, child, dependency)
    }

    fun toggle(targetView: ViewGroup, expend:Boolean, force:Boolean){
        if(expend != mExpend||force){
            this.mExpend = expend
            val height = targetView.height
            if(height == 0 && !force){
                targetView.viewTreeObserver.addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener{
                    override fun onPreDraw(): Boolean {
                        targetView.viewTreeObserver.removeOnPreDrawListener(this)
                        toggle(targetView,expend,true)
                        return true
                    }
                })
            }
            if(expend) expand(targetView.getChildAt(1) as CardView) else reduce(targetView.getChildAt(1) as CardView)
        }
    }
    private fun expand(targetView: ViewGroup){
        val layoutParams = targetView.layoutParams as RelativeLayout.LayoutParams
        layoutParams.width = RelativeLayout.LayoutParams.MATCH_PARENT
        layoutParams.setMargins(mMarginLeft, 0, mMarginRight, 0)
        targetView.layoutParams = layoutParams
        beginDelayedTransition(targetView)
    }

    private fun reduce(targetView: ViewGroup) {
        val layoutParams = targetView.layoutParams as RelativeLayout.LayoutParams
        layoutParams.width = RelativeLayout.LayoutParams.MATCH_PARENT
        layoutParams.setMargins(mMarginLeft - mMarginLeft*2/3,0, mMarginRight, 0)
        targetView.layoutParams = layoutParams
        beginDelayedTransition(targetView)
    }
    private fun beginDelayedTransition(view: ViewGroup) {
        TransitionManager.beginDelayedTransition(view, mSet)
    }
}

最终的实现效果如上，详细代码MDStudy-Github

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,445评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,889评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,047评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,760评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,745评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,638评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,011评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,669评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,923评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,406评论 4赞 320
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,995评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2赞 342

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_x阅读 15,967评论 3赞 119
  • 无题
    孝是中华传统文化提倡的行为，指儿女的行为不应该违背父母、家里的长辈以及先人的心意，是一种稳定伦常关系的表现。所谓「...
    兰陵笑笑生666阅读 674评论 0赞 0
  • 从别人的电影故事收获自己的成长是最大的成长
    观看电影是从别人的故事中成长的最好方式。选出十部电影推荐给大家！想到要选取十部电影，这其实是个让我非常头疼的事情，...
    子墨观翠阅读 207评论 0赞 0
  • vue 项目总结一组件开发
    上一篇文章http://www.jianshu.com/p/674e75b41642介绍了项目里文件夹的作用分类和...
    威少_吴阅读 1,240评论 0赞 4
  • 和你们一起走走，停停
    （一）昨天 晚上，和哥哥、妈妈一起去河边散散，顺便哥哥也完成他每天的健身五千步（为他点赞）。妈妈把被加微信和"被搭...
    P静鸿阅读 232评论 0赞 0