「 iOS知识小集 」2018 · 第 38 期

3,502 阅读6分钟

原文链接

更新:前两周我们发了一条小集《Xcode 10.1 并没有修复由于 Assets 引起的在 iOS 9 上的崩溃问题》,根据最新消息,苹果已经在服务器端解决了这个问题,开发者通过 Xcode 10.1 打的 ipa 包在上传到苹果后台,苹果在处理包的过程中会自动修复。小伙伴们已亲自验证,不会在 iOS 9 上 Crash 啦~

上周公众号发布的以下文章:

本期知识小集的主要内容包括:

  • 研究 wkwebview 的子 view 和 的关系
  • 如何使 UIImagePickerController 支持横屏
  • 句子拆分
  • Safe Area 的一些零散点

研究 WKWebview 的子 view 和 的关系

作者: hite和落雁

这个问题来自需求:当 webview 下拉 bounce 的时候,在漏出的部分显示自定义的 view。类似在微信打开一个公众号后显示的“此页面由 **** 提供”,这样的交互。

中间经过若干测试,实现此功能有三个关键点;

  1. 设置 webview.scrollView.backgroundColor = [UIColor clearColor]; 目的为了下拉整个页面时,能够漏出我们自定义 view。(这里需要指出的是,下拉页面出现 bounce 效果时,漏出的 是 wkscrollview;为什么这样,我猜测是因为 Safari 渲染的时候,bounce 效果是出在 wkscrollview上,可参看这个测试页面,请在 Safari 里打开)
  2. 结合 1,将这个自定义 view,放在 WKWebviewWKScrollView 之间(猜测,webview.scrollViewWKScrollView 的代理对象,而 WKScrollView 是 的代理元素,是否真的这样需要看看源码)。
  3. 添加自定义 view 到 WKScrollView 里的时机是 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView, 而不是 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation 因为不同页面书写方式,导致有些样式会生效时机不同,页面加载完毕并不是个很好的时机。

在生成 webview 的时候,设置 webview.scrollView.backgroundColor = [UIColor clearColor];特别的需要说明下,当 h5 在 body 上写内联样式 <body style="background-color:red">; 或者写 style 样式;或者外联 <link rel="stylesheet" href> 三种写法,去设置 body 的颜色,是否生效看不同的情况;

  1. 当设置的 body 颜色是 #ffffff 白色时,不论什么时候去设置 body 颜色都不会覆盖 webview.scrollView.backgroundColor 的颜色。
  2. 当设置的颜色是非白色时,会覆盖 webview.scrollView.backgroundColor

通过对照 HTML 的 DOM 层级和 WKWebview 的层级,

有以下发现;

  1. html 里下拉时, bounce 效果后面的背景元素是 WKScrollView,所以设置 body 颜色会设置到 WKScrollView 的背景色。
  2. html 里其他元素全部由 WKContentView 嵌套。当整个页面是长页面需要分页时,会分多个 WKCompositingView 逐个显示;

使用上述方案实现下拉时显示自定义元素有个问题;

  1. 在开始滑动 scrollView 时候,设置 webview.scrollView.backgroundColor 的颜色,会将 h5 自己设置的背景色覆盖,所以 h5 要尽量不要依赖 body 的背景色做滑动背景;
  2. 某些页面,如测试页面2, 头部有个 fixed 元素,下拉时也会漏出 bounce 背景色。此时如果背景色设置透明后出现一个很奇怪的 漏出,这时候不应该漏出。如果解决这个问题呢,如果真的要解决这个问题,可能需要去读 html 的样式,这样就比较麻烦了。
  3. 对问题 2 ,有个讨巧的方案就是将漏出的自定义元素放在 fixed 元素的后面,如微信那样。具体样式可以将 测试页面2 放到微信里看效果。

如果真正要解决问题 2 ,目前还需要再找找方案,希望看到 webkit2 的源码后能有方案。

如何使 UIImagePickerController 支持横屏

作者: halohily

很多同学在开发横屏应用时,使用系统的 UIImagePickerController 会发现它默认只支持竖屏。笔者也遇到了这个问题,经过一番探究,如下的方式效果是最佳的:

首先,在 present 这里的 UIImagePickerController 对象 picker 之前,设置 picker 的 modalPresentationStyleUIModalPresentationOverCurrentContext,这时运行会发现横屏时它也可以正常弹出了,只是旋转设备时它不能跟随设备方向正常转动。

接下来,为 UIImagePickerController 添加一个 category,重写 shouldAutorotate 方法返回 true,重写 supportedInterfaceOrientations 方法返回 UIInterfaceOrientationMaskAll。这时再运行会发现不仅可以横屏弹出,也可以正常旋转了。

句子拆分

作者: Lefe_x

把下面这段话拆分成句子,你会用什么方案呢?

知识小集是由几位志同道合的伙伴组成。你了解这个团队吗?我们在一起相处了 1 年多的时光!我想说:“我们是最棒的!”

我想到的方案有:正则表达式;使用 NSScanner ;使用 componentsSeparatedByCharactersInSet: ;但这几种方案都比较麻烦,后来不经意间发现了下面这个方法。

代码如下:

NSString *text = @"知识小集是由几位志同道合的伙伴组成。你了解这个团队吗?我们在一起相处了 1 年多的时光!我想说:“我们是最棒的!”";
[text enumerateSubstringsInRange:NSMakeRange(0, [text length]) options:NSStringEnumerationBySentences usingBlock:^(NSString * _Nullable substring, NSRange substringRange, NSRange enclosingRange, BOOL * _Nonnull stop) {
    NSLog(@"sentence: %@ range: %@", substring, NSStringFromRange(substringRange));
}];

运行结果如下:

sentence: 知识小集是由几位志同道合的伙伴组成。 range: {0, 18}
sentence: 你了解这个团队吗? range: {18, 9}
sentence: 我们在一起相处了 1 年多的时光! range: {27, 17}
sentence: 我想说:“我们是最棒的!” range: {44, 13}

Safe Area 的一些零散点

作者: 这个汤圆没有馅weibo.com/u/660346950…

先看图一尺寸图。

我们都知道,iOS 11 引入了 Safe Area 这个概念。在 xib 或者 storyboard 上添加 subview,都是会添加在 Safe Area 上的。例如:在 vc 上添加一个 view,上下左右约束分别为 0,在 iPhone X 和 iPhone 6 上展示不一样,如下图。纯代码创建的时候不会出现这个问题,因为 subview 是直接添加在 self.view 上面。

很明显,在 iPhone X 上底下会有一个 34pt 高度的留白区。分别打印一下两个机型的 self.view.safeAreaInsets,如下图。

那么假使现在,我希望在 iPhone X 机型上,底下不要留白。页面展示效果跟 iPhone 6 一样。然而 safeAreaInsets 是只读属性,无法通过修改值达到目的。

第一种方法,Align Bottom to:Safe Area 的值改为-34。但是如果后期出了新的机型,那么这个值就不再适配,因为不推荐。

第二种方法,在 bottom 的约束上,直接以superView为参照,如下图。

另外补充几点:

  • - additionalSafeAreaInsets:controller 可以扩展安全区域,如果我们设置 self.additionalSafeAreaInsets = UIEdgeInsetsMake(20, 0, 0, 20); 意思就是在原有的 safeAreaInsets 值中增加对应的边距值。如果原来的是 {10, 0, 0, 10} , 则最后得出的边距是 {30, 0, 0, 30}。
  • - (void)viewSafeAreaInsetsDidChange: 当视图的安全区域发生变更时会触发该方法,可以通过该方法来处理安全区域变更时的UI布局。
  • - insetsLayoutMarginsFromSafeArea: 默认值是YES,如果设置为 NO,所有的视图布局将会忽略 safeAreaInsets 这个属性了。这个只对纯代码布局视图有效,如果是 xib 或者 storyboard 布局的话不起作用。一般用于 tableView 居多。

关注我们

欢迎关注我们的公众号:iOS-Tips,也欢迎加入我们的群组讨论问题。可以公众号留言 iosflutter 等关键词获取入群方式。