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でPDFを表示する(iOS11以前対応版)

1 はじめに1.1 前提条件2 実装3 さいごに はじめに こんにちは、nukkyです。 SwiftでPDFを表示したい場合iOS11以降ならPDFKitがありますが、自分の様にまだ11以前のOSにも ...

[Swift]忘れられがちなSFSafariViewControllerについて

1 はじめに1.1 前提条件2 SFSafariViewControllerとは2.1 SFSafariViewControllerの特徴2.2 iOS11からのCookie同期について3 SFSaf ...

[Swift] プロトコルを弱参照するために

1 はじめに2 プロトコルとは2.1 プロトコルの作成方法2.2 プロトコルを採用したクラス作成2.3 使用例3 ClassOnlyProtocolとは3.1 メリット3.2 使用例4 最後に5 おす ...

iOS13で発生するUICollectionviewのカクつきを解消する

iOS13でCollectionViewの動作が少し変わりました。 Cellの入れ替え時にデータの更新を行う際にはどのように作成すれば良いか、関係のあるデリゲートを含め説明させていただいております。 おまけとして、Xcode11.3対応を行った際に対応した内容を簡単にですが記述しております。Xcode11対応をされる方の参考になればと思います。

ReactNative入門

1 はじめに2 そもそもReact Nativeとは3 JSXとは3.1 JSXに値を埋め込む3.2 属性の値を設定する3.3 関数でJSXを作る4 コンポーネントとは4.1 再利用性4.2 新規コン ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年10月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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