iOS:一用就上瘾的BottomSheetView

栏目: IOS · 发布时间: 7年前

内容简介:项目中有类似于外卖软件的已点菜品列表,类似于下图:可以看到列表的显示与隐藏,都只能通过按钮触发。不能通过手势驱动。不能设置最小可显示范围。针对以上问题,就有了这个项目。其实以上的需求核心问题就一个,如何优雅的解决:当内容还未到最大可显示范围时,列表里的内容不能滚动;当内容显示到最大的时候,如何不断开当前滚动手势,继续滚动列表里的内容。

项目中有类似于外卖软件的已点菜品列表,类似于下图:

iOS:一用就上瘾的BottomSheetView

可以看到列表的显示与隐藏,都只能通过按钮触发。不能通过手势驱动。不能设置最小可显示范围。针对以上问题,就有了这个项目。

其实以上的需求核心问题就一个,如何优雅的解决:当内容还未到最大可显示范围时,列表里的内容不能滚动;当内容显示到最大的时候,如何不断开当前滚动手势,继续滚动列表里的内容。

之前写了一个类似的底部列表滚动视图,地址:https://github.com/pujiaxin33/JXBottomSheetTableView 里面的实现方案还是挺有趣的,对外完全封装了里面的滚动控制细节,且以UITableView的子类实现。无奈越骚的操作越容易翻车。里面的应用场景比较狭窄,需求一变动就GG了。 所以重新写了这个库,使用场景更大,使用更方便,交互更友善,好了,不说了,快上车吧!

原理

JXBottomSheetView 添加一个 UIPanGestureRecognizer ,成为其 delegate ,并让 shouldRecognizeSimultaneouslyWithOtherGestureRecognizer 方法返回true; 如此一来,内容承载视图与列表视图的滚动手势可以同时响应了。接着,我们需要处理好当内容承载视图未显示到最大值时,列表视图(UITableView、UICollectionView)的 contentOffset.y 会被强制设置为0,营造一种列表内容未滚动的假象; 当内容承载视图滚动到最大的时候,就放开对列表视图的滚动限制。 其他一些细节可以参看源码了解;

Github地址

github.com/pujiaxin33/…

特性

  • 支持长距离滚动,不断手势:当列表视图滚动到规定的最高点时,停止视图移动,转而滚动里面的内容;
  • 内容自适应:当列表的数据源发生变动时,会根据最新的 contentSize 调整布局;
  • 切换流畅:最大、最小的手势切换,借鉴了系统 UIScrollViewPagingEnabled 切换效果;

预览

  • 普通短距离滚动
iOS:一用就上瘾的BottomSheetView
  • 长距离滚动,手势没有停掉。滚动到顶部的时候,继续滚动里面的内容
iOS:一用就上瘾的BottomSheetView
  • 内容自适应,根据 contentViewcontentSize 自动调整布局
iOS:一用就上瘾的BottomSheetView

属性/方法

属性/方法 描述
defaultMininumDisplayHeight 默认最小内容高度,当contentSize.height更小时,会更新mininumDisplayHeight值。
defaultMaxinumDisplayHeight 默认最大内容高度,当contentSize.height更小时,会更新maxinumDisplayHeight值。
displayState 当前展示状态,最大或最小
triggerDistance 滚动多少距离,可以触发展开和收缩状态切换。
triggerVelocity 触发状态切换的滚动速度,points/second
contentView: UIScrollView 用于承载内容的视图,UITableView、UICollectionView皆可。
displayMax() 显示最大内容
displayMin() 显示最小内容

使用

tableView = UITableView.init(frame: CGRect.zero, style: .plain)
        
        let bottomSheet = JXBottomSheetView(contentView: tableView)
        bottomSheet.defaultMininumDisplayHeight = 100
        bottomSheet.defaultMaxinumDisplayHeight = 300
        bottomSheet.displayState = .minDisplay
        bottomSheet.frame = self.view.bounds
        view.addSubview(bottomSheet)
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人类思维如何与互联网共同进化

人类思维如何与互联网共同进化

[美] 约翰·布罗克曼 / 付晓光 / 浙江人民出版社 / 2017-3 / 79.90元

➢人类是否因互联网的诞生进入了公平竞争的场域? “黑天鹅事件”频频发生,我们的预测能力是否正在退化? 智人的第四阶段有哪些特征? 全球脑会使人类成为“超级英雄”吗? 虚拟现实技术会不会灭绝人类的真实体验? 还有更多不可预知答案的问题,你将在本书中找到属于自己的答案! ➢ 我们的心智正和互联网发生着永无止境的共振,人类思维会因此产生怎样的进化效应?本书编者约翰•布......一起来看看 《人类思维如何与互联网共同进化》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具