Android卡片式折叠交互效果

Android卡片式折叠交互效果

今日科技快讯

近日有报道称:在互联网共享单车最早起步的上海,目前有150万辆共享单车。迅猛的增速之下,上海市交通委紧急叫停,成为继杭州、广州等城市之后,国内又一个暂停新增投放共享单车的城市。对此有关专家称:“共享单车的数量要不要控制要看有没有法律依据,目前看没有。”

作者简介

早上好,新的一周又开始了,跟高兴与大家见面!

本篇来自 Shu_Lance 的投稿, 给大家推荐了一款炫酷的卡片式列表控件, 并进行了补充说明,希望大家喜欢!

Shu_Lance 的博客地址:

http://blog.csdn.net/shu_lance

前言

最近小猿在改进之前写过的学校教务系统APP的UI界面的时候,发现了一个有趣的 Android UI——卡片式折叠交互 CardStackView,该 View 是在 GitHub 上找到的,但是该 View 的主人没有告诉我如何使用,小猿研究了半天,在此,将其简单的使用步骤阐述一下,CardStackView 的 GitHub 地址:

https://github.com/loopeer/CardStackView

先上个源博主效果图:

Android卡片式折叠交互效果

Android卡片式折叠交互效果

使用步骤

1. 在 Android studio 中 dependencies 里添加依赖

Android卡片式折叠交互效果

2. 自定义一个单个卡片的 item:

Android卡片式折叠交互效果

3. 在主布局里使用 CardStackView:

Android卡片式折叠交互效果

4. 写一个 TestStackAdapter(GitHub博主上给出了个 Adapter 的 demo,里面有卡片的三种样式:

  • ColorItemViewHolder :显示卡片正常样式

  • ColorItemLargeHeaderViewHolder :卡片的头比正常显示的大

  • ColorItemWithNoHeaderViewHolder :不显示卡片的头,只显示内容

TestStackAdapter 代码有点长,但是理解起来不难,因为它非常像 RecyclerView.Adapter<>,因为它是继承自 CardStackView.Adapter<>,我将部分主要代码讲一下:

onCreateView()加载卡片的 item 布局(三种样式可以加载):

Android卡片式折叠交互效果

getItemViewType()返回每个 item 的布局样式,在这个 Adapter 里,都返回了统一的样式:

Android卡片式折叠交互效果

onItemExpand(boolean b):在这里判断卡片是否被点击,true 就将卡片展开:

Android卡片式折叠交互效果

onBind(Integer data, int position):根据 item 的 position 来加载卡片内的内容:

Android卡片式折叠交互效果

bindView(Integer data, int position, CardStackView.ViewHolder holder):调用 onBind() 来加载布局:

Android卡片式折叠交互效果

5. 在 MainActivity 中将 CardStackView 初始化,因为我是在 Fragment 中写的,在此,附上我的 Fragment 中的代码:

Android卡片式折叠交互效果

  • 先初始化一组颜色的数组,因为 TestStackAdapter 中根据传入的颜色数组来将卡片的片头附上颜色.

  • 利用handler来进行延时更新卡片内的内容,先将CardStackView实例化,在利用 adapter.updateData() 来进行 CardStackView 的内容更新.

  • CardStackView的item展开监听事件(通过 implement CardStackView.ItemExpendListener):

CardStackView 的简单使用就到此了,如果对此有兴趣的话,可以自行研究一下源码,也可自己写个CardStackAdapter,因为源代码的TestStackAdapter是继承自CardStackView.Adapter<>的

这是小猿写的效果图: 

Android卡片式折叠交互效果

更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

Android卡片式折叠交互效果

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

Android卡片式折叠交互效果