Tech iOS

iOS13ダークモード対応

投稿日:2019年10月23日 更新日:

はじめに

こんにちは、nukkyです。
今回はiOS13から追加されたダークモードの対応に関して書いていこうと思います。

一時しのぎ

iOS 13 SDKでは、デフォルトでダークモードに対応している状態とみなされるみたいなので、
これについては、Info.plistでUIUserInterfaceStyleキーにlightを指定することで、アプリ内では常にライトモード扱いとなり、そもそもダークモードにしないという対応も可能そうです。
ただし、公式ドキュメントに以下の記述があります。

Supporting Dark Mode is strongly encouraged. Use the UIUserInterfaceStyle key to opt out only temporarily while you work on improvements to your app’s Dark Mode support.

「ダークモードへの対応を強く推奨します。UIUserInterfaceStyleキーは作業が完了するまでの一時しのぎに限られる」というような内容になっています。
時期ははっきりわかりませんがUIUserInterfaceStyleキーの使用でリジェクトをされる未来も十分あり得るため、アプリの更新・配信を今後も行うならダークモードへの対応は必須かと思います。

実装

上記の通り、ダークモードはiOS13からの対応になるのでXcodeは11以上を用意してください。

UI Element Colors

iOS13SDKにプリセットされている、UI Element Colors(.systemBackgroundColorなど)を使うと自動で下記の対応をしてくれます。

  • 色を指定するviewがmodalyかどうかで濃さを変えてくれる
  • iOS13以前の端末の場合、代替の色を指定してくれる(Color Set同様)
    例).systemBackgroundColor の場合、whiteなど

システムと同じ色を使うのが適当なケースではこれらを利用しましょう。
こちらのプリセットでダークモード対応に必要な機能はすでに用意してくれているのでそれを活用したほうが良い場合もあります。
https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors

Color Set

かといって、アプリ独自のカラーでライトもダークも対応したい!ということはあると思います。
その際はAssets CatalogのColor Set(iOS11~)で対応しましょう。
Color Setのメリットは以下のとおりです。

  • Storyboard Xib, codeで色が使える
  • Light, Darkの色指定が可能

カラーのタイプはここで選択します。

UI Element Colorsで用意されている色を指定することもできます。

ここを選択すると、

このように以前にはなかったカラーアセットを選択することができます。

コードで描きたい

ビューの生成時などにダークモードかどうかを判定して静的な色をセットしても、アプリ動作中にモードが切り替わったときに追随できなくなってしまいます。
モード切り替え時に追随できるようにするには、ダイナミックカラーを利用します。 UIColor にクロージャーを渡して、クロージャーの中でモードごとの色を返すようにすることで、動的な色を作れるイニシャライザが新たに導入されました。

カスタムのカラーを定義する

アプリ独自のカラーセットを UIColor のエクステンションに定義して、実際に色を指定する箇所ではこちらを利用する方法もあります。ダークモード導入以前からこのように定義しているアプリも多いと思うのでここを修正することでダークモードに対応することもできます。
またダイナミックカラーを返すようにすることで、モード切り替え時も自動的に色が置き換わるようになります。

画像をモードで動的に変更したい

このような場合はupdateViewConstraints()やviewWillLayoutSubviews()に現在のモードの判定を行い画像の更新を行いましょう。
ダークモードの判定は以下のメソッドで行えます。

 

さいごに

私のように、めんどくさがって対応を後回しにしてたり、まだ何をやったらいいかわからない方の助けになれれば幸いです。

おすすめ書籍

[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 WEB+DB PRESS plus 詳解 Swift 第4版 [改訂新版]Swiftポケットリファレンス (POCKET REFERENCE)

blog-page_footer_336




blog-page_footer_336




-Tech, iOS
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

swift

[Swift]PDFKitでPDFの表示

1 はじめに1.1 前提条件2 PDKitの概要3 実装3.1 PDFの表示4 さいごに はじめに こんにちは、nukkyです。 以前、PDFKitを使わないでPDFを表示する方法を書きましたが、今回 ...

【Swift】WKWebViewでタップしたURLを取得する。

1 はじめに2 WKWebViewについて3 WKWebViewの基本実装4 ナビゲーションにタイトルを追加5 ロングタップの禁止6 特定のリンクの場合はブラウザを起動して表示7 さいごに はじめに ...

swift

iOSアプリのチュートリアルに便利なMMPopLabel

1 はじめに2 準備3 実装3.1 Storyboard3.2 MMPopLabelの準備3.3 MMPopLabelの表示3.4 Delegate4 さいごに はじめに こんにちは、nukkyです。 ...

swift

iOSでライブラリFSCalendarをつかって簡単にカレンダー表示

1 はじめに2 準備3 実装3.1 Storyboard3.2 コード3.3 タップの取得4 さいごに はじめに こんにちは、nukkkyです。 ツール系アプリ開発時にカレンダー表示を よく使うと思い ...

swift

[Swift]UITableViewのカスタムセルをStoryboadで

1 はじめに1.1 前提条件2 実装2.1 Storyboadの準備2.2 UITableViewCellクラスの準備2.3 カスタムセルの表示3 さいごに はじめに こんにちは、nukkyです。 以 ...

フォロー

blog-page_side_responsive

2019年10月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。