iOS13简单适配

iOS13的beta5版本已经出来了,APP适配也应该提上日程了,本文记录下自己在适配时做的一些工作。

Note:iOS13 UI 更新请放到主线程中

Q:我不想让用户使用DarkMode,可不可以?
A:当然可以,请往下看

在iOS13,为UIViewControllerUIView扩展了一个新的API-overrideUserInterfaceStyle,使用方法,官方文档大致是这么说的:

通过设置overrideUserInterfaceStyle属性以使该视图及其子视图具有特定的UIUserInterfaceStyle。但如果想要获取当前的UIUserInterfaceStyle,需要改用traitCollection.userInterfaceStyle

尽可能使用UIViewController上的overrideUserInterfaceStyle属性。仅在以下时间使用此属性:

  • 在单个视图或小视图层次结构上局部使用特定样式。
  • 您希望在整个UIWindow及其视图控制器和模态弹出的ViewController上使用特定样式,且不希望强制更改整个应用程序具有样式。 (如果您确实希望整个应用程序具有某种样式,请不要使用它,而是在Info.plist中设置UIUserInterfaceStyle键。)
  1. 当设置在普通的UIView上时:
  • 此属性仅影响此视图及其子视图的特征。
  • 它不会影响任何视图控制器或其他视图控制器的子视图。
  1. UIWindow上设置时:
  • 此属性会影响rootViewController,从而影响整个视图控制器和视图层次结构。
  • 它还会影响该window模态出来的界面。

由此可见,overrideUserInterfaceStyle不仅会影响自己,还会影响自己的子视图,换做window就会影响整个window中的所有视图及视图控制器,包括模态跳转出来的视图控制器。
而且,文档中也特别强调了,你可以设置整个应用程序只是用某种样式,具体方法可以通过代码,也可以通过info.plist配置键User Interface Style,对应的Value为Light/Dark

// 此方法只会影响该window及其所有子视图控制器和子视图,不会影响别的window
if #available(iOS 13.0, *) {
    window?.overrideUserInterfaceStyle = .light;
}
info.plist 会影响整个程序

适配主要涉及的方面:

  • 模拟器调试(simulator debug)
  • 图片(assets)
  • 颜色(color)
  • 状态栏(status bar)
  • 模态跳转(modal present)-2019.10.9更新
  • ...
模拟器调试
  1. 运行项目
  2. 点击Xcode底部调试栏中Environment Overrides
  3. 开启Interface Style,就可以切换了。
效果图adaptImage.gif
模拟器打开darkmode.png
图片适配

图片适配,主要是我们本地图片资源适配,网络图片的话,还是比较繁琐的,目前我们还没做,只做下本地图片适配。
图片适配比较方便的就是通过Assets.xcassets进行图片管理:

  1. 添加一个image set,重命名如"adaptimage",选中该image set;
  2. 选中Attributes Inspector;
  3. 将Appearances由"None"改为"Any,Dark";
  4. 不同模式下设置不同图片即可,mode 改变会自动选择不同的图片
Assets.png

当然图片适配,你也可以直接使用判断当前系统mode的方式进行区分,就我个人而言不是很喜欢这种方式,因为还需要监听系统模式的变化,重写UITraitEnvironment协议方法traitCollectionDidChange(_:),我们先看下协议方法:

/** Trait environments expose a trait collection that describes their environment. */
public protocol UITraitEnvironment : NSObjectProtocol {

    @available(iOS 8.0, *)
    var traitCollection: UITraitCollection { get }

    /** To be overridden as needed to provide custom behavior when the environment's traits change. */
    @available(iOS 8.0, *)
    func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
}

所以,我们只需要在改变系统mode的时候,重写代理:


func updateImageView() {
    let image = traitCollection.userInterfaceStyle == .light ? UIImage(named: "dark-ios") : UIImage(named: "white-ios")
    imageView.image = image
}

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    updateImageView()
}

代码适配图片,还有一种简单的方式,这种方式也需要在Assets.xcassets中同时添加Dark/Any两种模式下图片,就如图片适配这部分开始设置adapzimage图片一样。

let image = UIImage(named: "ios")?.imageAsset?.image(with: traitCollection)
imageView.image = image
颜色适配

像图片适配一样,颜色适配有三种方式。
方法一:是通过Assets.xcassets添加一个Color Set,目前系统支持≥iOS11.0

extension UIColor {
    @available(iOS 11.0, *)
    public /*not inherited*/ init?(named name: String) // load from main bundle

    @available(iOS 11.0, *)
    public /*not inherited*/ init?(named name: String, in bundle: Bundle?, compatibleWith traitCollection: UITraitCollection?)
}
colorset.png

方法二:代码创建动态颜色init(dynamicProvider: @escaping (UITraitCollection) -> UIColor),目前系统支持≥iOS 13.0

// 方法二
let titleColor = UIColor.init(dynamicProvider: { (trait) -> UIColor in
    return trait.userInterfaceStyle == .light ? UIColor.black : UIColor.white
})
btn.setTitleColor(titleColor, for: .normal)

方法三:像图片一样,监听模式转变,重写traitCollectionDidChange(_:)方法,不推荐

状态栏(StatusBar)

目前状态栏也增加了一种模式,由之前的两种,变成了三种, 其中default由之前的黑色内容,变成了会根据系统模式,自动选择当前展示lightContent还是darkContent

public enum UIStatusBarStyle : Int {
    case `default` // Automatically chooses light or dark content based on the user interface style

    @available(iOS 7.0, *)
    case lightContent // Light content, for use on dark backgrounds

    @available(iOS 13.0, *)
    case darkContent // Dark content, for use on light backgrounds
}

我们在使用的时候,就可以重写preferredStatusBarStyleget方法:

override var preferredStatusBarStyle: UIStatusBarStyle{
    get{
        return .lightContent
    }
}
模态跳转(modal present)

iOS13模态跳转出来的界面,不再像之前版本是全屏的了,什么意思呢?我们看下官方的注释:

Defines the presentation style that will be used for this view controller when it is presented modally. Set this property on the view controller to be presented, not the presenter.
If this property has been set to UIModalPresentationAutomatic, reading it will always return a concrete presentation style. By default UIViewController resolves UIModalPresentationAutomatic to UIModalPresentationPageSheet, but system-provided subclasses may resolve UIModalPresentationAutomatic to other concrete presentation styles. Participation in the resolution of UIModalPresentationAutomatic is reserved for system-provided view controllers.
Defaults to UIModalPresentationAutomatic on iOS starting in iOS 13.0, and UIModalPresentationFullScreen on previous versions. Defaults to UIModalPresentationFullScreen on all other platforms.

大致意思是,如果将此属性设置为UIModalPresentationAutomatic,则读取该属性将始终返回具体的呈现样式。 默认情况下,UIViewControllerUIModalPresentationAutomatic解析为UIModalPresentationPageSheet,但是系统提供的子类可以将UIModalPresentationAutomatic解析为其他具体的呈现样式。 保留UIModalPresentationAutomatic的分辨率供系统提供的视图控制器使用。从iOS 13.0开始,在iOS上默认为UIModalPresentationAutomatic,在以前的版本上默认为UIModalPresentationFullScreen。 在所有其他平台上,默认为UIModalPresentationFullScreen
UIModalPresentationPageSheet就是下面的样子:

UIModalPresentationPageSheet

知道了原因,我们做适配也简单了,就是设置下属性的事:

let second = SecondViewController()
second.modalPresentationStyle = .fullScreen
present(second, animated: true, completion: nil)

目前我们iOS的适配只做了这些,后续如果有其他需要适配的地方,再更新文章。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343