iOS仿微信左滑删除效果

作者: 10m每秒滑行 | 来源:发表于2018-01-17 15:05 被阅读2573次

微信的UI和操作一值是简明风格,但细节处理一直很到位,模仿一个微信左滑出删除操作的交互。

因为iOS8之后,iOS原生支持左滑出现多个操作按钮,而且微信的左滑出现的两个操作按钮和原生UI一致,于是用原生的方法写了一下demo,
实现tableview的代理方法:

- (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath

返回两个 UITableViewRowAction实例,title,背景色,都可自定义。

写完之后发现UI果然一致,交互也很流畅,但是晚了一会后,发现微信的删除还有一步确认操作,动画覆盖前两个操作按钮和取消。系统代理是不能够支持这种交互小动画的。


微信删除二次确认.gif

那么微信的左滑删除就不是系统代理实现的,不敢确定微信是不是自定义滑动手势实现,突然记起,早些时候,微信有一个版本,可以右滑拉伸一点点,现在的版本,不能右滑拉伸了,那应该是优化过。原来可以左滑,也可以右滑一点,还带点弹簧效果。猜想可能是 scrollView 实现。将 cell 的 contentView 作为 scrollView 的 subview ,左滑出的删除,取消按钮和cell的contentView平级作为 scrollView 的 subview。按照这种思路,去写了demo。

写完demo后,对照微信的交互,一点一点地细化demo的手势效果,


demo删除.gif

demo示例:GitHub - WXDelete: 模仿微信左滑小动画

相关文章

网友评论

    本文标题:iOS仿微信左滑删除效果

    本文链接:https://www.haomeiwen.com/subject/mvcuoxtx.html