卡片式折叠交互效果

郭霖

Android技术分享平台,每天都有优质技术文章推送.你还可以向公众号投稿,将自己总结的技术心得分享给大家....

Android卡片式折叠交互效果

640?wx_fmt=png

今日科技快讯

近日有报道称:在互联网共享单车最早起步的上海,目前有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

先上个源博主效果图:

640?wx_fmt=gif

640?wx_fmt=gif

使用步骤

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

640?wx_fmt=png

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

640?wx_fmt=png

3. 在主布局里使用 CardStackView:

640?wx_fmt=png

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

  • ColorItemViewHolder :显示卡片正常样式

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

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

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

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

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

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

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

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

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

这是小猿写的效果图: 

640?wx_fmt=png

更多

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

640?wx_fmt=gif

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

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

640?wx_fmt=jpeg

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/c10WTiybQ1Ye3/article/details/78098476
海参的功效,北京人不知道海参有这些功效!沈阳盛鼎 · 顶新
2017工业皮带新报价!!1博奥 · 顶新

滑动卡片式效果

test

u012455213 u012455213

2015-04-30 14:45:56

阅读数:1403

一行代码实现ViewPager卡片效果

2017年08月02日 33.9MB 下载

android 简洁的卡片风格UI例子

2014年04月22日 2.08MB 下载

android使用ViewPage实现卡片式画廊效果

2017年10月27日 583KB 下载

个人资料

原创
413
粉丝
216
喜欢
55
评论
41
等级:
访问:
10万+
积分:
4702
排名:
8018
勋章:

最新评论

展开阅读全文

没有更多推荐了,返回首页