iOS--一个高仿微信左滑确认删除的轮子

前言

一个需求,要求左滑点击删除后出现二次确认。和微信一样。

调研结果如下:

  • iOS11之后,可以通过对系统方法进行改造的方式实现。可以看这篇https://www.jianshu.com/p/aa6ff5d9f965
  • iOS11之前,系统在点击删除按钮之后会自动对扩展按钮进行回收。无法进行那样的改造。
于是决定自己写一个

最初参考了一个16年仿微信左滑的博客https://www.jianshu.com/p/dc57e633de51

由于16年的微信与现在的交互差异太大,所以进行了大量改造,只保留了其对于侧滑菜单的创建以及滑动判定的逻辑基础。

对其中的bug以及功能实现方式进行优化调整,基本实现了现在微信的左滑逻辑功能。


实际效果

伸手党福利,先看效果不满意直接右上角就好了。

由于我很懒...所以demo的主体结构基本没改,侧滑菜单创建的逻辑没做太多修改。

Demo在文章最后


具体到主要的代码上

我连demo的文件名都懒得改(当然Cell的名字我改了,毕竟我做了三天才做完),就更别提界面了...

下面是一些我修改了的地方,如果你想了解的点在我这找不到。可以试着查看原作者的文章https://www.jianshu.com/p/dc57e633de51

  • 新增了一个专门的侧滑容器View

原Demo就是一个VIew,上面循环的创建按钮使用。
由于新版微信需要很多复杂的交互效果(形变,反弹,确认删除等等)
我新建了一个KSSideslipContainerView的容器View。
可以很方便的进行二次操作

  • 滚动时收起侧滑菜单

原Demo中侧滑展示时,是滑动交互式关闭的。

这里我通过NSProxy对tableView的滑动代理进行拦截

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

    if (self.target.sideslip) {
        [self.target hiddenAllSideslip];
    }

    if ([self.tbDelegate respondsToSelector:@selector(scrollViewWillBeginDragging:)]) {
        [self.tbDelegate scrollViewWillBeginDragging:scrollView];
    }

}
  • 点击时收起侧滑菜单

原Demo中是在cell上添加了一个单击手势进行处理

我改为将didSelectRowAtIndexPath一起放在NSProxy代理中进行拦截了

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (self.target.sideslip) {
        [self.target hiddenAllSideslip];
    }

    if ([self.tbDelegate respondsToSelector:@selector(tableView:didSelectRowAtIndexPath:)]) {
        [self.tbDelegate tableView:tableView didSelectRowAtIndexPath:indexPath];
    }
}
  • NSProxy

刚才说的拦截器

- (void)setTarget:(UITableView *)target {
    _target = target;
    target.sideslipCellProxy = self; //这里需要让tableView强引用proxy防止释放
    self.tbDelegate = target.delegate; //保存tableView原本的delegate,进行转发
    target.delegate = self; //修改tableView.delegate拦截事件
}

这个东西会在每次侧滑容器展示时尝试绑定与tableVIew进行绑定。当然,它只会绑定一次

- (void)tryBindProxy {
    UITableView * tableView = [self tableView];
    if ([tableView isKindOfClass:[UITableView class]]) {
        if (![tableView.delegate isKindOfClass:[KTSideslipCellProxy class]]) {

            //保证一个tableView只会设置一次proxy
            KTSideslipCellProxy *proxy = [KTSideslipCellProxy alloc];
            proxy.target = tableView; //这里。proxy的target是weak属性,并不会造成循环引用
        }
    }
}
  • 侧滑容器的动画

原Demo中侧滑按钮并没有移动,一直是放在cell的最右侧

我是通过监听cell.contentView将侧滑容器粘到contentView上。

    if ([keyPath isEqualToString:@"frame"]) {

        if (self.btnContainView) {
            KS_setX(self.btnContainView, self.contentView.frame.size.width + self.contentView.frame.origin.x);
        }
    }
}

不过这里是由于另一个方案有小问题,demo里我有注释。大佬们可以研究研究

  • 阻尼效果

原Demo中不允许拖拽超过侧滑容器的长度,这和微信不太一样

if (frame.origin.x + point.x <= -(self.btnContainView.totalWidth)) {
    //超过最大距离,加阻尼
    CGFloat hindrance = (point.x/5);
    if (frame.origin.x + hindrance <= -(self.btnContainView.totalWidth)) {
        frame.origin.x += hindrance;
        cframe.size.width += -hindrance;
        cframe.origin.x += hindrance;
    }else {
        //这里修复了一个当滑动过快时,导致最初减速时闪动的bug
        frame.origin.x = - self.btnContainView.totalWidth;
        cframe.origin.x = self.contentView.frame.size.width - self.btnContainView.totalWidth;
    }
}else {
    //未到最大距离,正常拖拽
    frame.origin.x += point.x;
    cframe.origin.x += point.x;
}
  • 抽屉效果与过度拉伸的形变

侧滑容器以及其上的子View会根据最终宽度,自动调整布局比例

- (void)scaleToWidth:(CGFloat)width {
    CGFloat needExpandWidth = width - self.totalWidth;
    NSUInteger count = _originSubViews.count;
    CGFloat currentX = 0;
    for (int i = 0; i < count; i++) {
        UIView *s = _originSubViews[i];
        CGRect sframe = s.frame;
        sframe.origin.x = currentX;
        CGFloat sneedExpandWidth = (needExpandWidth * [_originWidths[i] floatValue]/_totalWidth);
        sframe.size.width = [_originWidths[i] floatValue] + sneedExpandWidth;
        s.frame = sframe;

        //下一个X起点为上一个起点+上一个宽度
        currentX += sframe.size.width;
    }
}
  • 确认删除按钮的实现

在点击侧滑按钮的代理事件中,允许传递一个View回来。如果传递回了一个View,我会将其放到侧滑容器上,并进行布局的适配。

if ([self.delegate respondsToSelector:@selector(sideslipCell:rowAtIndexPath:didSelectedAtIndex:)]) {
    _nextShowView = [self.delegate sideslipCell:self rowAtIndexPath:self.indexPath didSelectedAtIndex:btn.tag];

    /**
        如果有需要继续展示的View--一般是确认删除?
        这里会将其覆盖到侧滑容器上,并且重新以新的View作为基础进行布局
     */
    if (_nextShowView) {
        [_btnContainView addSubview:_nextShowView];
        CGRect frame = CGRectMake(0, 0, _nextShowView.frame.size.width, self.contentView.frame.size.height);

        _nextShowView.frame = CGRectMake(self.btnContainView.originSubViews.lastObject.frame.origin.x, 0, _nextShowView.frame.size.width, self.contentView.frame.size.height);
        _nextShowView.hidden = YES;

        [UIView animateWithDuration:0.7 delay:0 usingSpringWithDamping:0.7 initialSpringVelocity:1 options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionAllowUserInteraction animations:^{
            _nextShowView.frame = frame;
            _btnContainView.frame = frame;
            _nextShowView.hidden = NO;
            [_btnContainView.subButtons setValue:@(YES) forKeyPath:@"hidden"];
            KS_setX(self.contentView, -KS_getW(_nextShowView));
            [self.btnContainView scaleToWidth:_nextShowView.frame.size.width];
        } completion:^(BOOL finished) {
            [_btnContainView.subButtons setValue:@(NO) forKeyPath:@"hidden"];
        }];
    }
}
  • 修改了原Demo内存泄漏的问题

问题出在这

    if (!_tableView) {
        id view = self.superview;
        while (view && [view isKindOfClass:[UITableView class]] == NO) {
            view = [view superview];
        }
        _tableView = (UITableView *)view;
        _tableViewPan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(tableViewPan:)];
        _tableViewPan.delegate = self;
        [_tableView addGestureRecognizer:_tableViewPan];
    }
    return _tableView;
}

修改后

- (UITableView *)tableView {
    id view = self.superview;
    while (view && [view isKindOfClass:[UITableView class]] == NO) {
        view = [view superview];
    }
    if ([view isKindOfClass:[UITableView class]]) {
        return view;
    }else {
        return nil;
    }
}

最后

这个需求整整搞了我三天,还是在修改别人Demo的基础上,没成想这么复杂...
不过好在总算是弄完了

Demo可以自取

当然,如果能点个赞或者给个star我也算没白忙活

作者:kirito_song
链接:https://www.jianshu.com/p/a08b6db47014

iOS14:再见了,“流氓”APP!

最近和苹果有关的重大消息可能就是从8月1日开始,AppStore中国区火速下架未获版号的游戏APP,数量超过30000款,之前小智就和大家说过,这未必不是一件好事,众多低质和“流氓”APP将被最大限度隔绝在iOS系统之外。

发布于:3天以前  |  38次阅读  |  详细内容 »

iOS 14 苹果对 Objective-C Runtime 的优化

Objective-C 是一门古老的语言,诞生于 1984 年,跟随 Apple 一路浮沉,见证了乔布斯创建了 NeXT,也见证了乔布斯重回 Apple 重创辉煌,它用它特立独行的语法,堆砌了 UIKit,AppKit, Foundation 等一个个基石,时间来到 2020 年,面对汹涌的"后浪" Swift,"老前辈" Objective-C 也在发挥着自己的余热,即使面对越来越多阵地失守,唯有“老兵不死,只会慢慢凋亡"才能体现的悲壮。今年,Apple 给 Objective-C Runtime 带来了新的优化,接下来,让我们深入理解这些变化。

发布于:24天以前  |  169次阅读  |  详细内容 »

iOS14 隐私适配及部分解决方案

在刚刚结束的线上 WWDC 2020 发布会上苹果向我们展示了新的 iOS14 系统。iOS14 的适配,很重要的一环就集中在用户隐私和安全方面。 在 iOS13 及以前,当用户首次访问应用程序时,会被要求开放大量权限,比如相册、定位、联系人,实际上该应用可能仅仅需要一个选择图片功能,却被要求开放整个照片库的权限,这确实是不合理的。对于相册,在 iOS14 中引入了 “LimitedPhotos Library” 的概念,用户可以授予应用访问其一部分的照片,对于应用来说,仅能读取到用户选择让应用来读取的照片,让我们看到了 Apple 对于用户隐私的尊重。这仅仅是一部分,在iOS14 中,可以看到诸多类似的保护用户隐私的措施,也需要我们升级适配。 最近在调研 iOS14的适配方案,本文主要分享一下 iOS14 上对于隐私授权的变更和部分适配方案,欢迎补充指正。

发布于:1月以前  |  208次阅读  |  详细内容 »

Metal新特性:大幅度提升iOS端性能

Metal 是一个和 OpenGL ES 类似的面向底层的图形编程接口,通过使用相关的 api 可以直接操作 GPU ,最早在 2014 年的 WWDC 的时候发布。Metal 是 iOS 平台独有的,意味着它不能像 OpenGL ES 那样支持跨平台,但是它能最大的挖掘苹果移动设备的 GPU 能力,进行复杂的运算,像 Unity 等游戏引擎都通过 Metal 对 3D 能力进行了优化, App Store 还有相应的运用 Metal 技术的游戏专题。 闲鱼团队是比较早在客户端侧选择Flutter方案的技术团队,当前的闲鱼工程里也是一个较为复杂的Native-Flutter混合工程。作为一个2C的应用,性能和用户体验一直是闲鱼技术团队在开发中比较关注的点。而Metal这样的直接操作GPU的底层接口无疑会给闲鱼技术团队突破性能瓶颈提供一些新的思路。 下面会详细阐述一下这次大会Metal相关的新特性,以及对于闲鱼技术和整个淘系技术来说,这些新特性带来了哪些技术启发与思考。

发布于:1月以前  |  158次阅读  |  详细内容 »

Core Image:iOS图像处理技术追踪

Core Image是苹果官方提供的图像处理框架,通过丰富的built-in(内置)或自定义Filter(过滤器)高效处理静态图片、动态图片或视频。开发者还可以通过构造Filter链或自定义Core Image Kernel来实现更丰富的效果。 在WWDC20中,苹果官方针对Core Image技术在以下三方面做了优化:Core Image对视频/动图的支持、基于Metal构建Core Image (CI) Kernel以及Core Image的Debug支持。 这三方面会在下文逐一提到,文末笔者也会浅谈Core Image在手淘图片库中的应用可能以及对Core Image技术的展望。

发布于:1月以前  |  172次阅读  |  详细内容 »

闲鱼如何解决iOS环境搭建与APP打包速度问题

随着Flutter等跨端框架的出现,业务开发同学经常需要在Android/IOS上跨端进行业务开发,问题定位等。新的不熟悉的环境的搭建总会遇到各种各样的问题,导致搭建失败,特别是IOS开发环境,是最复杂的,不仅环境搭建繁琐,而且切分支后的打包速度很慢,所以我们设计实现了两个工具,用于优化闲鱼IOS开发体验。

发布于:1月以前  |  307次阅读  |  详细内容 »

iOS14 隐私适配及部分解决方案

在刚刚结束的线上 WWDC 2020 发布会上苹果向我们展示了新的 iOS14 系统。iOS14 的适配,很重要的一环就集中在用户隐私和安全方面。 在 iOS13 及以前,当用户首次访问应用程序时,会被要求开放大量权限,比如相册、定位、联系人,实际上该应用可能仅仅需要一个选择图片功能,却被要求开放整个照片库的权限,这确实是不合理的。对于相册,在 iOS14 中引入了 “LimitedPhotos Library” 的概念,用户可以授予应用访问其一部分的照片,对于应用来说,仅能读取到用户选择让应用来读取的照片,让我们看到了 Apple 对于用户隐私的尊重。这仅仅是一部分,在iOS14 中,可以看到诸多类似的保护用户隐私的措施,也需要我们升级适配。 最近在调研 iOS14的适配方案,本文主要分享一下 iOS14 上对于隐私授权的变更和部分适配方案,欢迎补充指正。

发布于:1月以前  |  396次阅读  |  详细内容 »

iOS 隐形水印之 LSB 实现

在音视频的领域里,其涵盖的知识点繁多,学习方向也很多。而本篇就是一篇比较入门的文章它简单地介绍如何在 iOS 上读取图片 RGB 数据,并通过修改最后一位 bit 来记录数字水印的信息下面就介绍《隐形水印之 iOS 实现》

发布于:3月以前  |  437次阅读  |  详细内容 »

声明式 UIKit 在有赞美业的实践

随着 Flutter 的出现,UI 开发形式也越来越趋向相同,Flutter,SwiftUI,RN,Weex 等新兴UI框架无一意外都使用了声明式的 UI 开发模式,和支持了FlexBox的布局系统。

发布于:3月以前  |  416次阅读  |  详细内容 »

iOS 架构谈:剖析 Uber 的 RIB 架构

加入 UBER 是我的 iOS 工程师职业的新篇章,所有这一切都始于称为 RIB 的新架构。该架构背后的主要思想是,应用程序应由业务逻辑而不是视图驱动。展示 RIB 的最佳方法是一棵树:每个 RIB 都是一个节点,并且它可以不包含子节点,也可以包括一个或多个子节点。

发布于:3月以前  |  385次阅读  |  详细内容 »

如何调试支付宝(iOS)

最近在做的一件事情,从代码层面分析下各家小程序(微信、头条、支付宝、百度)的启动性能,探究各家小程序的实现细节和差异。

发布于:3月以前  |  407次阅读  |  详细内容 »

iOS GPUImage源码解读(一)

最近在不断学习、使用的过程中,有了更深刻的理解,特来写一篇源码解读的文章详细介绍下核心代码的具体实现。至于括号里的“一”,主要是觉得GPUImage还有很多值得深入学习和分享的内容,后续的学习和使用过程中有新的心得体会还会继续给大家分享。

发布于:3月以前  |  461次阅读  |  详细内容 »

最多阅读

快速配置 Sign In with Apple 1年以前  |  3018次阅读
给数组NSMutableArray排序 1年以前  |  2270次阅读
开篇 关于iOS越狱开发 1年以前  |  2239次阅读
在越狱的iPhone设置上使用lldb调试 1年以前  |  2162次阅读
APP适配iOS11 1年以前  |  2152次阅读
UITableViewCell高亮效果实现 1年以前  |  2107次阅读
App Store 审核指南[2017年最新版本] 1年以前  |  1974次阅读
使用 GPUImage 实现一个简单相机 1年以前  |  1945次阅读
所有iPhone设备尺寸汇总 1年以前  |  1921次阅读
关于Xcode不能打印崩溃日志 1年以前  |  1854次阅读
使用ssh访问越狱iPhone的两种方式 1年以前  |  1827次阅读
使用ssh 访问越狱iPhone的两种方式 1年以前  |  1720次阅读
UIDevice的简单使用 1年以前  |  1608次阅读
为对象添加一个释放时触发的block 1年以前  |  1560次阅读
使用最高权限操作iPhone手机 1年以前  |  1495次阅读