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


関連記事

【iOS14】他のアプリを簡単に紹介できるSKOverlay

1 はじめに2 SKOverlayとは3 実装3.1 表示位置3.2 非表示3.3 delegate4 さいごに5 おすすめ書籍 はじめに 今回はiOS14から使用できるようになった、SKOverla ...

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

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

swift

[Swift]Schemaを使用してURLの接続先を切り替える

1 はじめに2 XCodeのBuildConfigurationとは3 スキーマとは4 スキーマの追加方法5 スキーマの設定変更6 開発と本番で異なる通信の接続先を設定する7 さいごに はじめに はじ ...

祝!iOS15でハーフモーダルが追加

1 はじめに2 早速使ってみる2.1 準備2.2 実装2.3 detents2.4 コードでの高さ切り替え2.5 モーダル内のスクロール許可2.6 グラバーの表示2.7 角丸2.8 親Viewとの併用 ...

【Unity】URP対応のAssetのPrefabがピンク色になる件

1 はじめに2 レンダリングパイプラインとは2.1 ビルトインレンダリングパイプライン2.2 ユニバーサルレンダリングパイプライン3 URPの設定手順3.1 URPのインストール3.2 URPのアセッ ...

フォロー

blog-page_side_responsive

2019年10月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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