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)

page_footer_responsive




-Tech, iOS
-,

執筆者:


comment

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

CAPTCHA


関連記事

【Swift】XCUITestでScrollViewのテストをしてみる

1 はじめに2 XCUITestとは3 導入方法3.1 オブジェクトの配置3.2 UISCrollView3.3 ラベルとボタン4 テストのための設定4.1 ラベル5 テストコード5.1 SetUp5 ...

swift

[Swift]ObjectMapperで簡単にJSONを読み込む

1 はじめに2 準備3 実装3.1 基本的な使い方3.2 ネスト配列に対応してみよう4 さいごに はじめに こんにちは、onukiです。 私はSwiftでJSONを取り扱う際に、 ObjectMapp ...

[Unity]Terrain(地形)を使ってみた その2

1 はじめに2 Paint Trees3 Paint Details4 おまけ5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。前回に引き続きTerrainの機能を紹介していきます。 ...

[Swift]AlertControllerでメモリリークが起きた!便利なMemory Graph

1 はじめに2 今回の問題2.1 deinitの調査2.2 原因の調査3 解決策4 Memory Graphについて5 さいごに6 おすすめ書籍 はじめに こんにちは、suzukiです。この記事の結論 ...

swift

UITableViewでTableViewCell(Xib)を使ってみた

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX ...

フォロー

follow us in feedly

blog-page_side_responsive

東京改造計画(NewsPicks Book)
2019年10月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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