iOS 13は、ダークモード(Dark Mode)の実装に適応しています。
一年前かもしれませんが、Mac OSシステムがダークモードの外観を発表しています。見ていてとても刺激的です。今でもさわやかな毎日を送っています。
ついに、iPhone 11などの新しい携帯電話の発売に伴い、iOS 13のシステムも正式に発表されました。携帯版の濃い色のモードに伴って、公衆の視野にも現れました。
私達のこれらのiOSのプログラムの猿もしたことがあって、元のプロジェクトはiOS 13システムに適応して、Dark Modeの暗い色のモードに適応します。
現在は強制的にDark Modeに適合するように要求されていませんが、DarKは適格です。
Apps on iOS 13 are expected to support dark mode Use system colors and materials Create your own dynamic colors and image freex ible infrastucture
現在のモードを取得
携帯電話の現在の外観モードを設定する2つの方法を提供します。設定-->表示と輝度 制御センター、長押し輝度調整ボタン 現在のモードを取得
現在どのようなモードであるかを選択して取得する必要があります。様々なモードに応じて適応され、iOS 13に現在のモードを取得するAPIが追加されました。
Swift
iOS 13システムでは、UIView Controllerは、2つのプロトコルに従っている:の異なるモードの適応は、主に色と画像の両方の適応に関する。
には、関連する背景色とフォント色が含まれている色が適応されています。
システムモードが切り替わる時、私達はどのように操作する必要がありません。システムは自動的にページをレンダリングします。異なるモードの色と画像を作るだけでいいです。
UICColor
iOS 13の前にUICColorは一つの色しか表現できません。iOS 13からUICColorはダイナミックな色です。異なるモードではそれぞれ異なる色を表すことができます。
以下はiOS 13システムが提供するダイナミックカラーの種類です。以下の色の値を使ってモード切り替えをする場合、特殊な処理は必要ありません。
システムも私たちのために色をカスタマイズする方法を提供します。上記の方法は、1つのブロック を受け入れる。システムがLightModeとDarkModeの間で切り替わると自動的にこのフィードバックをトリガします。 は、UITrait Collectionを返します。変更対象によって、そのようなモード であると判断されます。 UICColorは背景色と文字色のクラスだけを設定し、動的に設定することができます。 しかし、枠の色などの属性を設定する必要がある場合は、どうすればいいですか? 上記のフレーム属性を設定するには、CGColorクラスを使用する必要がありますが、iOS 13では、CGColorはダイナミックカラー値ではなく、一つの色しか表現できません。 は、傍受モードの変更方法において、tritCollection DidChangeを処理し、異なるモードに従って処理する。
iOSでは、画像は基本的にAsssets.xcassetsの中にあるので、画像の相性がいいです。私たちはちょっと面倒です。
通常は次のような処理です。
異なるモードに適合する必要がある場合は、2つの異なる画像を必要とし、次のように設定します。
Apparancesを設定する時、私達はAnyを選んで、Darkはいいです。
関連付け
現在のページモード
元のプロジェクトでもしDark Modeにマッチしていなかったら、Dark Modeに切り替えたら、一部のページの色が自動的に似合うようになっています。
背景色やテキスト色のセットが設定されていません。Dark Modeモードでは黒です。
ここでは私達は本当にこの単独アプリにLight Modeモードを強制的に設定する必要があります。
このような方法は、あるページに対してのみ変更できます。プロジェクト全体に対してはDarkモードを無効にする必要があります。
windowのoverrideUser InterfaceStyle属性を修正することで
Xcode 11が作成したプロジェクトの中で、windowはAppDelegateからSceneDelegateに移行し、次のコードを追加すると、グローバルに表示モードを修正することができます。
最終案
info.plistファイルにUser Interface Styleプロファイルを追加し、Lightに設定する必要があります。
Sttus Bar更新
iOS 13ではアップルもStatus Barの一部を修正しました。iOS 13の前に
上のコードにはdark-contentモードが設定されていますが、iOSの生コードではdark-contentは実際に
ファイル
アップル登録
Sign In with Apple will be available for beta testing this summer.It will be required as an option for users in apport third-party sign-in when it commerically available latter is.
もしAPPが三者登録(Facebook、Google、WeChat、QQ、Alipayなど)をサポートするなら、必ずアップル登録をサポートして、しかも前に置くべきです。
Apple登録ボタンのスタイルについては、Appleで提供されたボタンのスタイルをサポートすることを提案します。各種のデバイスに適合しています。Sign In with Appleを参照してください。
LaunchImage
廃棄されそうなLaunchImage はiOS 8の時から、アップルがLaunchScreenを導入しました。LaunchScreenをスタートページとして設定できます。 今はLaunchImageを使って起動図を設定することもできますが、アップルのサイズが多くなるにつれて、適応は明らかに面倒くさいです。 はLaunchScreenを使うと、状況が簡単になります。LaunchScreenはAutoLayoutとSizerClassをサポートしていますので、各種のスクリーンに適合しています。 ⚠️2020年4月から、すべてのアプリはLaunchScreenを提供しなければならないが、LaunchImageはまもなく歴史舞台から退出します。
UICWebView
'UICWebView'was deprecated in iOS 12.0:No longer supported;please adopt WKWebView.
iOS 13からUICWebViewコントロールがサポートされなくなりました。早くWKWebViewに変えてください。
ついに、iPhone 11などの新しい携帯電話の発売に伴い、iOS 13のシステムも正式に発表されました。携帯版の濃い色のモードに伴って、公衆の視野にも現れました。
私達のこれらのiOSのプログラムの猿もしたことがあって、元のプロジェクトはiOS 13システムに適応して、Dark Modeの暗い色のモードに適応します。
現在は強制的にDark Modeに適合するように要求されていませんが、DarKは適格です。
Apps on iOS 13 are expected to support dark mode Use system colors and materials Create your own dynamic colors and image freex ible infrastucture
現在のモードを取得
携帯電話の現在の外観モードを設定する2つの方法を提供します。
現在どのようなモードであるかを選択して取得する必要があります。様々なモードに応じて適応され、iOS 13に現在のモードを取得するAPIが追加されました。
Swift
//
let currentMode = UITraitCollection.current.userInterfaceStyle
if (currentMode == .dark) {
print(" ")
} else if (currentMode == .light) {
print(" ")
} else {
print(" ")
}
open var userInterfaceStyle: UIUserInterfaceStyle { get }
//
public enum UIUserInterfaceStyle : Int {
//
case unspecified
//
case light
//
case dark
}
OC言語
if (@available(iOS 13.0, *)) {
UIUserInterfaceStyle mode = UITraitCollection.currentTraitCollection.userInterfaceStyle;
if (mode == UIUserInterfaceStyleDark) {
NSLog(@" ");
} else if (mode == UIUserInterfaceStyleLight) {
NSLog(@" ");
} else {
NSLog(@" ");
}
}
//
typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {
UIUserInterfaceStyleUnspecified,
UIUserInterfaceStyleLight,
UIUserInterfaceStyleDark,
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);
モニターシステムモードの変化iOS 13システムでは、UIView Controllerは、2つのプロトコルに従っている:
UITraitEnvironment
およびUIContentContainer
プロトコル。UITraitEnvironment
プロトコルでは、現在のモード変化を監視する方法を提供してくれた。
@protocol UITraitEnvironment <NSObject>
//
@property (nonatomic, readonly) UITraitCollection *traitCollection API_AVAILABLE(ios(8.0));
//
- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));
@end
public protocol UITraitEnvironment : NSObjectProtocol {
//
@available(iOS 8.0, *)
var traitCollection: UITraitCollection { get }
//
@available(iOS 8.0, *)
func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
}
//
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
// ,
print(" ")
}
色に関する相性iOS 13の前にUICColorは一つの色しか表現できません。iOS 13からUICColorはダイナミックな色です。異なるモードではそれぞれ異なる色を表すことができます。
以下はiOS 13システムが提供するダイナミックカラーの種類です。以下の色の値を使ってモード切り替えをする場合、特殊な処理は必要ありません。
@interface UIColor (UIColorSystemColors)
#pragma mark System colors
@property (class, nonatomic, readonly) UIColor *systemRedColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemGreenColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemBlueColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemOrangeColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemYellowColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemPinkColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemPurpleColor API_AVAILABLE(ios(9.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemTealColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemIndigoColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// , Light , systemGray6Color
@property (class, nonatomic, readonly) UIColor *systemGrayColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemGray2Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray3Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray4Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray5Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGray6Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
#pragma mark Foreground colors
@property (class, nonatomic, readonly) UIColor *labelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *secondaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *tertiaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *quaternaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
//
@property (class, nonatomic, readonly) UIColor *linkColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
//
@property (class, nonatomic, readonly) UIColor *placeholderTextColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
//
@property (class, nonatomic, readonly) UIColor *separatorColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
#pragma mark Background colors
@property (class, nonatomic, readonly) UIColor *systemBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
#pragma mark Fill colors
@property (class, nonatomic, readonly) UIColor *systemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
#pragma mark Other colors
//
@property(class, nonatomic, readonly) UIColor *lightTextColor API_UNAVAILABLE(tvos); // for a dark background
@property(class, nonatomic, readonly) UIColor *darkTextColor API_UNAVAILABLE(tvos); // for a light background
@property(class, nonatomic, readonly) UIColor *groupTableViewBackgroundColor API_DEPRECATED_WITH_REPLACEMENT("systemGroupedBackgroundColor", ios(2.0, 13.0), tvos(13.0, 13.0));
@property(class, nonatomic, readonly) UIColor *viewFlipsideBackgroundColor API_DEPRECATED("", ios(2.0, 7.0)) API_UNAVAILABLE(tvos);
@property(class, nonatomic, readonly) UIColor *scrollViewTexturedBackgroundColor API_DEPRECATED("", ios(3.2, 7.0)) API_UNAVAILABLE(tvos);
@property(class, nonatomic, readonly) UIColor *underPageBackgroundColor API_DEPRECATED("", ios(5.0, 7.0)) API_UNAVAILABLE(tvos);
@end
上のシステムが提供しているこれらの色の種類は、私達の正常な開発の必要性を満たすことができません。ほとんどの色の値もカスタムです。システムも私たちのために色をカスタマイズする方法を提供します。
@available(iOS 13.0, *)
public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)
OCにおいて
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
fileprivate func getColor() -> UIColor {
return UIColor { (collection) -> UIColor in
if (collection.userInterfaceStyle == .dark) {
return UIColor.red
}
return UIColor.green
}
}
上記の2つの方法に加えて、UICColorは、例示的な方法を追加した。
// traitCollection UIColor
@available(iOS 13.0, *)
open func resolvedColor(with traitCollection: UITraitCollection) -> UIColor
CGColor
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
// ,
if (previousTraitCollection?.userInterfaceStyle == .dark) {
redView.layer.borderColor = UIColor.red.cgColor
} else {
redView.layer.borderColor = UIColor.green.cgColor
}
}
写真が似合うiOSでは、画像は基本的にAsssets.xcassetsの中にあるので、画像の相性がいいです。私たちはちょっと面倒です。
通常は次のような処理です。
異なるモードに適合する必要がある場合は、2つの異なる画像を必要とし、次のように設定します。
Apparancesを設定する時、私達はAnyを選んで、Darkはいいです。
関連付け
現在のページモード
元のプロジェクトでもしDark Modeにマッチしていなかったら、Dark Modeに切り替えたら、一部のページの色が自動的に似合うようになっています。
背景色やテキスト色のセットが設定されていません。Dark Modeモードでは黒です。
ここでは私達は本当にこの単独アプリにLight Modeモードを強制的に設定する必要があります。
// , , controller present controller
@available(iOS 13.0, *)
open var overrideUserInterfaceStyle: UIUserInterfaceStyle
//
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
// ,
if (previousTraitCollection?.userInterfaceStyle == .dark) {
// Dark , Light
overrideUserInterfaceStyle = .light
}
}
強制項目の表示モードこのような方法は、あるページに対してのみ変更できます。プロジェクト全体に対してはDarkモードを無効にする必要があります。
windowのoverrideUser InterfaceStyle属性を修正することで
Xcode 11が作成したプロジェクトの中で、windowはAppDelegateからSceneDelegateに移行し、次のコードを追加すると、グローバルに表示モードを修正することができます。
let scene = UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate
scene?.window?.overrideUserInterfaceStyle = .light
前の項目では、AppDelegateに下記のコードを設定できます。
window.overrideUserInterfaceStyle = .light
簡単なプロジェクトを作成しました。上のコードは確かに現在のモードを強制的に変更しますが、ステータスバーの表示は変更されません。何が漏れているか分かりません。最終案
info.plistファイルにUser Interface Styleプロファイルを追加し、Lightに設定する必要があります。
<key>UIUserInterfaceStyle</key>
<string>Light</string>
また問題が来ました。上の修正をしても、React Nativeでは、ステータスバーの色が異なるパターンによって表示されます。どうすればいいですか?Sttus Bar更新
iOS 13ではアップルもStatus Barの一部を修正しました。iOS 13の前に
public enum UIStatusBarStyle : Int {
case `default` //
@available(iOS 7.0, *)
case lightContent //
}
iOS 13からUStatus BarStyleは全部で三つの状態があります。
public enum UIStatusBarStyle : Int {
case `default` //
@available(iOS 7.0, *)
case lightContent //
@available(iOS 13.0, *)
case darkContent //
}
React Nativeのコードでは、ステータスバーの色を黒に設定します。コードは以下の通りです。
<StatusBar barStyle={'dark-content'} />
上記のコードはiOS 13システムの携帯電話では無効です。上のコードにはdark-contentモードが設定されていますが、iOSの生コードではdark-contentは実際に
UIStatusBarStyleDefault
です。ファイル
RCTStatusBarManager
.mに
RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
@"default": @(UIStatusBarStyleDefault),
@"light-content": @(UIStatusBarStyleLightContent),
@"dark-content": @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);
上のコードを修正すればいいです。
@"dark-content": @(@available(iOS 13.0, *) ? UIStatusBarStyleDarkContent : UIStatusBarStyleDefault),
iOS 13の他の更新アップル登録
Sign In with Apple will be available for beta testing this summer.It will be required as an option for users in apport third-party sign-in when it commerically available latter is.
もしAPPが三者登録(Facebook、Google、WeChat、QQ、Alipayなど)をサポートするなら、必ずアップル登録をサポートして、しかも前に置くべきです。
Apple登録ボタンのスタイルについては、Appleで提供されたボタンのスタイルをサポートすることを提案します。各種のデバイスに適合しています。Sign In with Appleを参照してください。
LaunchImage
廃棄されそうなLaunchImage
'UICWebView'was deprecated in iOS 12.0:No longer supported;please adopt WKWebView.
iOS 13からUICWebViewコントロールがサポートされなくなりました。早くWKWebViewに変えてください。
@available(iOS, introduced: 2.0, deprecated: 12.0, message: "No longer supported; please adopt WKWebView.")
open class UIWebView : UIView, NSCoding, UIScrollViewDelegate { }
ここでiOS 13の濃い色モードに適応した文章を紹介します。もっと関連するiOS 13の暗い色モードの内容は以前の文章を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。