Giter Club home page Giter Club logo

persistentcoordinatorlayout's Introduction

PersistentCoordinatorLayout

仿京东首页,整体是个长列表,内嵌子列表-商品feeds流(PersistentRecyclerView),且商品流可以左右滑动。

实现效果

点击可查看截屏视频

使用方法

  1. 外部的长列表容器使用PersistentCoordinatorLayout;
  2. 内嵌的子列表使用PersistentRecyclerView;

CoordinatorLayout和RecyclerView的使用方法跟官方一样,ViewPager和ViewPager2可随意选用,均已内部兼容;

实现方案

CoordinatorLayout已经实现了NestedScrollingParent3接口,当底部商品流列表上拉或下拉时,会自动将Fling的速率传递给AppBarLayout。而AppBarLayout上拉触底时,却无法将Fling速率传递给底部的商品流RecyclerView。所以,我们只要能改造好这一点,就能让CoordinatorLayout“更像是一个长列表”。

要实现这一点并不复杂,AppBarLayout的fling是通过behavior实现的,behavior内部会维护一个OverScroller对象,OverScroller保存了我们想要的一切,包括Fling速率和滑行时间。我们只要能在正确的时间,把正确的Fling速率传递好,就能让CoordinatorLayout实现的长列表毫无违和感!

仓库中细节代码较多,此处不再赘述,感兴趣的同学可自行Review代码即知。

另一种方案

京东App首页的长列表,整体是通过RecyclerView实现的,我也实现了一份,感兴趣的同学可以去瞅瞅:传送门

Demo下载

点击下载

persistentcoordinatorlayout's People

Contributors

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