UI 进阶之拖拽排序的实现

导读

拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等。拖拽排序是一个交互体验非常好的设计,简单,方便。

今日头条的拖拽排序界面
111338042-7d5fa67d9b03b5a9

今日头条的拖拽排序界面.png
我实现的长按拖拽排序效果
121338042-fb80d87f5c5fa090

长按拖拽排序.gif
实现方案

1.给CollectionViewCell添加一个长按手势,通过协议把手势传递到collectionView所在的控制器中。

2.开始长按时对cell进行截图,并隐藏cell。

3、在手势移动的时候,移动截图视图,用遍历的方法求出截图移动到哪个cell的位置,再调用系统的api交换这个cell和隐藏cell的位置,并且数据源中的数据也需要调整顺序

4.手势停止时,移除截图的view,显示隐藏cell

其他

代码还可以进一步封装,写一个数据管理类dataTool,dataTool作为collectionView的数据源,所有的数据源方法都写到dataTool类中。手势的代理方法也在里面实现,这样控制器会简洁很多,控制器就不需要关注拖拽排序的具体逻辑了。大家有空可以自己写写看,也许你们有更好的处理方案,可以评论交流一下。
github地址:https://github.com/HelloYeah/DraggingSort

2 10 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部