扣丁书屋

iOS导航栏整体滑动解决方案(类似淘宝)

效果图

先上图为敬

原生效果

实现的效果

思路

UINavigationController的view视图结构:

-- UIView: frame = (0 0; 414 896);
    -- UINavigationTransitionView: frame = (0 0; 414 896);
    -- UINavigationBar: frame = (0 44; 414 44);

UINavigationTransitionViewUINavigationController 转场动画的容器视图。

UINavigationController 的所有子视图控制器 共用一个UINavigationbarUINavigationbar 的转场效果由参与转场的两个视图控制器对导航栏的设置决定。

UINavigationbar 截图添加在 UIViewcontroller 上并隐藏UINavigationbar 可做到整体转场的效果。

UINavigationControllerview 调用 sendSubviewToBack:UINavigationbar隐藏起来。

转场完成为避免有其他未知影响需调用 bringSubviewToFront:还原UINavigationbar的位置。

UIView 的截图由自身的属性设置和 bounds 大小决定。UINavigationController的根视图控制器没有转场效果,因此延迟截图到 viewDidAppear: ,可以保证此时导航栏截图的大小是正确的。

为了让该功能有全局效果,且简单易用,不需要额外的继承关系,可以使用 runtime 的方法交换对UIViewController的生命周期做功能的扩展。

Method-Swizzle 详细参考

为UIView新增一个分类方法实现截图

- (UIImage *)snapshotImage
{
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.opaque, 0);
        [self.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *snap = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return snap;
}

扩展 viewWillLayoutSubviews :

- (void)yr_viewWillLayoutSubviews
{
    [self yr_viewWillLayoutSubviews];

    if (!self.navigationController || self.navigationBarSnapshotView) {
        return;
    }

    UIViewController *rootViewController = self.navigationController.viewControllers.firstObject;
    if (self != rootViewController &&
        [self shouldGenerateNavigationBarImageView]) {
        UIImageView *navigationBarSnapshot = [[UIImageView alloc] initWithFrame:self.navigationController.navigationBar.visibleBoundry];
        navigationBarSnapshot.image = [self.navigationController.navigationBar snapshotImageClipsToBounds:NO];
        self.navigationBarSnapshotView = navigationBarSnapshot;
    }

    if (self.navigationBarSnapshotView &&
        !self.navigationBarSnapshotView.superview) {
        [self.view addSubview:self.navigationBarSnapshotView];
    }
}

根视图控制器不需要转场效果且为了得到正确的bounds大小,延迟截图到 viewDidAppear: :

- (void)yr_viewDidAppear:(BOOL)animated
{
    [self yr_viewDidAppear:animated];

    if (!self.navigationController) {
        return;
    }

    if ([self shouldGenerateNavigationBarImageView] &&
        !self.navigationBarSnapshotView) {
        UIImageView *navigationBarSnapshot = [[UIImageView alloc] initWithFrame:self.navigationController.navigationBar.visibleBoundry];
        navigationBarSnapshot.image = [self.navigationController.navigationBar snapshotImageClipsToBounds:NO];
        self.navigationBarSnapshotView = navigationBarSnapshot;
    }

    if (self.navigationBarSnapshotView.superview) {
        [self.navigationBarSnapshotView removeFromSuperview];
    }

    [self.navigationController.view bringSubviewToFront:self.navigationController.navigationBar];
}

Run起来看一下效果。

效果不正确,侧滑返回的时候,截图上面有一块留白。

查看UINavigationbar的结构:

UINavigationbar: frame = (0 44; 414 44);
    _UIBarBackground: frame = (0 -44; 414 88);
    _UINavigationBarContentView: frame = (0 0; 414 44);
    UIView: frame = (0 0; 0 0);

我们设置的 barTintColor 会作用在 _UIBarBackground

可以看到UINavigationbarframe是在状态栏之下,但_UIBarBackground的高度包含了导航栏与状态栏,超出了UINavigationbarframe

CALayerrenderInContext: 只会绘制自身 size 大小的内容。

现在要解决的问题是绘制UIView时要包含超出自身 size 的内容。

UIView扩展一个属性 visibleBoundry 返回视图的可视frame(包含子视图超出自身frame的内容)。

如图视图A包含一个子视图B,视图B的内容超出了A,视图A的 visibleBoundry 就为虚线框起来的大小。

递归遍历视图的 subviews 得到子视图相对自身父视图的 frame 并取两个frame的合集就就得到 visibleBoundry

- (void)_caculateVisibleBoundry:(UIView *)view
{
    if (view.subviews.count == 0) {
        CGRect subRect = [self.superview convertRect:view.bounds fromView:view];
        self.p_visibleBoundry = CGRectUnion(self.p_visibleBoundry, subRect);
    }
    for (UIView *subView in view.subviews) {
        [self _caculateVisibleBoundry:subView];
    }
}

得到 visibleBoundry 后由于绘制区域大小的变化还需要对绘制坐标做个平移才能得到正确的绘制内容。
更改截图方法为 - (UIImage *)snapshotImageClipsToBounds:(BOOL)clipsToBounds

clipsToBoundsYES绘制自身 bounds 大小的内容,clipsToBoundsNO保留超出自身 bounds内容。代码如下:

- (UIImage *)snapshotImageClipsToBounds:(BOOL)clipsToBounds
{
    if (clipsToBounds) {
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.opaque, 0);
        [self.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *snap = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return snap;
    } else {
        UIGraphicsBeginImageContextWithOptions(self.visibleBoundry.size, self.opaque, 0);
        CGContextRef context = UIGraphicsGetCurrentContext();
        self.p_visibleBoundry = self.frame;
        [self _caculateVisibleBoundry:self];
        CGContextTranslateCTM(context, self.frame.origin.x - self.p_visibleBoundry.origin.x, self.frame.origin.y - self.p_visibleBoundry.origin.y);
        [self.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *snap = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return snap;
    }
}

导航栏隐藏后系统侧滑返回手势将不可用,为UINavigationController添加 UIPanGestureRecognizer来处理侧滑,代码如下:

最终效果:

iOS导航栏整体侧滑我已经做成了pod库。可以直接导入使用 YRNavigationBarPure https://github.com/zongmumask/YRNavigationBarPure

目前已经有其他iOS导航栏整体侧滑的方案,但看过实现后,这种实现是最轻量级的,无需继承,处理逻辑比较简单,不容易出现bug。

YRNavigationBarPureUIViewControllerUINavigationController新增了扩展属性。通过 runtime做到了无感知,无需继承,使用方便。


https://mp.weixin.qq.com/s/r3I2gbVTPJg_l_UEBtrnjA

最多阅读

快速配置 Sign In with Apple 1年以前  |  4261次阅读
使用 GPUImage 实现一个简单相机 2年以前  |  2954次阅读
APP适配iOS11 2年以前  |  2880次阅读
开篇 关于iOS越狱开发 2年以前  |  2818次阅读
在越狱的iPhone设置上使用lldb调试 2年以前  |  2747次阅读
给数组NSMutableArray排序 2年以前  |  2712次阅读
App Store 审核指南[2017年最新版本] 2年以前  |  2705次阅读
所有iPhone设备尺寸汇总 2年以前  |  2633次阅读
UITableViewCell高亮效果实现 2年以前  |  2524次阅读
使用ssh访问越狱iPhone的两种方式 2年以前  |  2488次阅读
关于Xcode不能打印崩溃日志 2年以前  |  2360次阅读
使用ssh 访问越狱iPhone的两种方式 2年以前  |  2246次阅读
为对象添加一个释放时触发的block 2年以前  |  2003次阅读
UIDevice的简单使用 2年以前  |  1994次阅读
使用最高权限操作iPhone手机 2年以前  |  1994次阅读