Coder Social home page Coder Social logo

shareelementdemo's Introduction

shareElementDemo

PS: 本来想研究“过场动画”,所以名字取成了ShareElement,其实是Behavior的Demo,不要在意这些细节。

下拉回退 Activity,layout_behavior 还能这么玩?

熟悉layout_behavior的朋友都知道,它是CoordinatorLayout的重要属性。不过,你该不会以为它只能用在NestedScrollingChild上吧?如果你真这么觉得,它可会很伤心的:人家才没有这么弱呢。 其实它的能力远远不止这些。这里和大家分享一个 Demo 和心得。

#效果图 这次仿的是“下拉回退”效果,来自 https://github.com/nickbutcher/plaid, 这个项目有必要学习一下,堪称神交互。

这里写图片描述


我的效果:

这里写图片描述


#CSDN链接 http://blog.csdn.net/a153614131/article/details/53709596

#灵感来源 ##BottomSheetBehavior

之前在掘金上发了处女作——Android 简易悬停抽屉控件 —— 仿知乎收藏夹。结果分分钟被打脸,这分明就有官方控件啊orz。百度了才知道support包里有这玩意——BottomSheetBehavior。也正感谢它,有了今天这篇博客。

它的用法是这样的: 在需要的控件上加上一行app:layout_behavior="@string/bottom_sheet_behavior"。搞定了,你的LinearLayout已经变成一个底部抽屉控件了。。。这也太屌了吧。。。 那我们的demo呢,也跟这个类似。

<android.support.design.widget.CoordinatorLayout>
    
    <LinearLayout
        app:layout_behavior="@string/bottom_sheet_behavior"/>
        ...
    </LinearLayout>

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

参考: 使用Bottom Sheet实现底部菜单

##Plaid 的“下拉回退”效果 如前面效果图所示,我主要模仿了,下拉回退过场动画两个效果。

#实现 Plaid里面是通过自定义View来实现,那我这里呢用Behavior试一下,能更好的复用。

##Behavior 的接口 从接口看,它更像是一个轻量级的 View, 有一些类似 View 的接口:

  • View 的绘制
    • onMeasureChild
    • onLayoutChild
  • View 的事件分发
    • onInterceptTouchEvent
    • onTouchEvent
  • child 间的依赖
    • layoutDependsOn
    • onDependentViewChanged
  • child 的嵌套滑动响应
    • onStartNestedScroll
    • onNestedPreScroll
    • onNestedScroll
    • onStopNestedScroll
    • ...

网上看到的资料中所介绍的更多的为NestedScroll这一块。而对于绘制事件分发避而不谈,使得Behavior少了许多应用场景。事实上,NestedScroll使用起来更有局限性,它要求应用该BehaviorView必须implement NestedScrollingChild。反观绘制分发,基于它们的Behavior可以应用在所有的View上,是自定义View的一种更轻量的实现。

##behavior 定义与使用 定义两个Behavior:

  • FollowBehavior:一个 "紧贴联动" 的 Behavior,使得 RecyclerView 移动时,ImageView 紧贴着它。这是一个典型的child 间的依赖的场景。
  • DragDismissBehavior:拖动时拦截事件,使得 RecyclerView 本体移动(而非内部 scroll)。移动到一定距离时,finish Activity。这里用到了事件分发NestedScroll两类回调。

注意RecyclerViewNestedScrollingChild,因此下拉回退很流畅。但是,事实上,DragDismissBehavior还可以用在非NestedScrollingChild上,例如ListViewScrollView等,仍然可以正常的下拉回退。只不过NestedScroll的回调不在响应,流畅度有些下降。亲们可以自己试一下。

<!-- activity_detail -->
<android.support.design.widget.CoordinatorLayout>

    <ImageView
        app:layout_behavior=".behavior.FollowBehavior"/>

    <android.support.v7.widget.RecyclerView
        app:layout_behavior=".behavior.DragDismissBehavior"/>

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

##代码实现 主要有这几块:

代码就不贴了,主要是把接口理清楚,像onMeasure()->onLayout()->onDraw()一样,挨个往里填实现就是了。 有兴趣可以看看,自认为可读性还是可以的,嘿嘿。

shareelementdemo's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.