首页 雷火电竞官网正文

夕,立刻App详情页滑动作用,SlideLayout双列表页面完成-csgo雷火电竞

admin 雷火电竞官网 2019-11-12 159 0

立刻跟着圈子详情页的内容越来越丰厚,之前的页面结构现已不能满意咱们的需求,需求一个新的布局计划承载各种圈子元素并满意咱们的自界说交互。

改版前

改版前的结构比较简略,头部显现圈子的基本信息比方图片、标题和简介等信息,底部展现圈子内的音讯列表,向上滑动可折叠头部区域让用户愈加专心地阅读音讯列表,结构如下:

CoordinatorLayout 作为容器担任两部分的布局和联动滑动,AppBarLayout 担任展现头部信息,底部经过 ViewPager 和Fragment 完成多 tab 页面,Fragment 内部经过 RecyclerView 完成音讯列表。

改版后:

改版后头部新增了一些元素比方插件、创立者,原有的元素展现区域扩展,导致头部高度增大。使得用户刚进入圈子页时简直看不到音讯列表区域,为了处理这个问题咱们需求页面支撑快速地在头部和列表之间切换,并且当头部超越一屏时也能够滑动。简略总结下咱们的需求:

1、当头部信息较少,即没有到达一屏时体现和原有完成共同,头部随列表滑动能够折叠。

2、当头部信息较多,即超越一屏时除了头部跟着列表滑动折叠外,还能够在头部和列表之间快速切换。

处理计划

第一条需求原有的 CoordinatorLayout 就能够支撑,问题是第二条中的快速切换怎么完成,终究咱们的产品搭档给出的处理计划如下:

从这个截图看上去如同和本来的将头部折叠相同,其实不然。将头部折叠需求先将头部滑到界面外,而这儿头部其实没有滑动,列表是盖在头部上面,当想检查头部时再将列表滑下去。

有人或许会说,这和本来的有什么区别,都需求滑动。这种完成的优点首要有三点:

  • 列表只会存在打开和躲藏两种状况,不会存在显现一半的状况,当将列表拖到屏幕中心松手时会主动滑动到打开或躲藏,下降头部和列表切换的难度。
  • 当列表滑动几屏后,此刻依然能够拖动 scroll bar 将列表滑出展现头部,不需求将列表滑到最顶部再拉出头部。
  • 当头部很长时,头部内容滑动在任何方位都能够拖动 scrollbar 滑出列表,不需求将头部滑到最底部。

这儿的 scrollbar 是个辅佐组件,后边会讲到,这儿先不打开。原有的 CoordinatorLayout 不能满意上述需求,所以咱们需求完成一个自界说组件,因为这个组件的首要功用便是将页面底部滑出滑进,所以咱们将这个组件命名为SlideLayout。

思路胪陈嵌套翻滚

不管是原有逻辑仍是新增的,都归于一对嵌套组件的联动交互,不难看出需求用到嵌套翻滚机制来完成。首要咱们简略了解下嵌套翻滚的机制:

图中 Parent 表明完成了 NestedScrollingParent 接口的组件,Child 表明完成了 NestedScrollingChild 接口的组件,Parent 承受 Child 分发的翻滚事情,并且他们不直接相关。

SlideLayout 结构

如上图在 SlideLayout 中当下拉出改写动画时能够看到三个组件:refresh、header 和 slider,它们的意义如下:

  • refresh:当用户下拉改写页面时 refresh 担任展现加载动画。
  • header:担任页面头部,需求包括完成 NestedScrollingChild 的组件然后向 SlideLayout 分发翻滚事情。
  • slider:担任列表区域,也需求包括完成 NestedScrollingChild的组件,原因同 header。

完成 NestedScrollingChild 的组件有NestedScrollView、RecyclerView 等,就圈子详情页这个页面来说,NestedScrollView完成了页面头部,RecyclerView 完成了音讯 列表。

操作状况

在处理 SlideLayout 中的翻滚事情时,咱们用一个枚举类型界说了三个状况:

enumclassSlideGesture{SCROLL, SLIDE, REFRESH }

SCROLL

slider 和 header 处于衔接的状况,即 header 的底边连着 slider 的顶边没有堆叠。此状况时需求和老版别保持共同,即头部跟着列表的翻滚而翻滚。如下图:

SLIDE

slider 盖在 header 上面,slider 此刻有或许展现也有或许躲藏,首要作业是将 slider 滑出或许躲藏。如下图:

REFRESH

展现改写动画,即改写动画部分高度大于0。下图只展现了从 Scroll 状况转化而来的状况,其实从 Slide 状况也能够进入 Refresh 状况,和这个相似会在头部上面呈现一个改写动画展现区域,这儿就不列出了。

三个状况的互相转化联系如下图:

确认了状况界说后剩余的作业基本就分为两部分:状况辨认和翻滚处理。

状况辨认

依据前面讲的状况界说可得出状况判别逻辑如下:

咱们将 Refresh 状况的优先级设为最高,先判别改写区域的高度是否大于 0来检查是不是 Refresh 状况。因为 Slide 的界说是 slider 和 header 有堆叠,而 slider 在 SlideLayout 中是经过 sliderTop 来表明方位的,所以咱们能够经过 sliderTop < headerHeight 来判别是不是 Slide 状况。终究两个条件都不满意的话便是 Scroll 状况了。

翻滚处理

针对不同状况,对翻滚事情界说了不同的处理规矩,然后完成咱们需求的交互作用。详细的处理逻辑见下表:

横向表明三种状况,竖向表明两种翻滚事情类型,组合出六种不同的 case。这儿给出的逻辑处理比较简略,实践完成时会遇到许多需求特别处理的状况,这儿就不一一列出了,感兴趣的同学能够检查项目源码,项目地址会在终究给出。

运用实例

咱们经过动图来看看终究完成的作用,第一种是头部没超越屏幕的状况:

然后再看看头部超越屏幕的状况:

页面布局结构如下:

<SlideLayout>

<!-- header -->

<FrameLayout>

<androidx.core.widget.NestedScrollView>

<!-- header content here -->

</androidx.core.widget.NestedScrollView>

</FrameLayout>

<!-- slider -->

<FrameLayout>

<LinearLayout>

<SlideBarLayout>

<!-- slide bar content here -->

</SlideBarLayout>

<androidx.recyclerview.widget.RecyclerView/>

</LinearLayout>

</FrameLayout>

<!-- refresh -->

<RefreshViewLayout/>

</SlideLayout>

  • SlideBarLayout:上面 gif 图里的 scroll bar,参阅 AppBarLayout完成的滑动条组件,咱们开源的项目中有源码,感兴趣的同学能够前去检查。
  • RefreshViewLayout:用于寄存改写动画组件的容器,能够经过完成 RefreshView 接口创立自界说的改写动画,并设置给RefreshViewLayout 的 refreshInterface 来收效。
  • 更多的运用方法能够拜访 SlideLayout 项目主页检查。

本文介绍了为什么需求 SlideLayout,并简略论述了规划思路和完成机制,期望给读者有所启示和协助。作为嵌套翻滚机制的一种详细完成,在开发过程中让我殷切感受到这套接口功用的强壮,界说尽管简略,但却简直能完成各种页面联动作用。因为自己水平有限,文章或许代码如果有任何问题实属不免,欢迎谈论纠正或许提 issue。

SlideLayout 项目地址:

https://github.com/iftechio/iftech-android-slide-layout

雷火电竞版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

最近发表

    csgo雷火电竞_雷火电竞平台_雷火电竞亚洲

    http://www.dramaq.net/

    |

    Powered By

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    雷火电竞出品