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
    
    //       
    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("     ")
    }
    色に関する相性
  • の異なるモードの適応は、主に色と画像の両方の適応に関する。
  • には、関連する背景色とフォント色が含まれている色が適応されています。
  • システムモードが切り替わる時、私達はどのように操作する必要がありません。システムは自動的にページをレンダリングします。異なるモードの色と画像を作るだけでいいです。
  • UICColor
    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);
    
  • 上記の方法は、1つのブロック
  • を受け入れる。
  • システムがLightModeとDarkModeの間で切り替わると自動的にこのフィードバックをトリガします。
  • は、UITrait Collectionを返します。変更対象によって、そのようなモード
  • であると判断されます。
    
    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
  • UICColorは背景色と文字色のクラスだけを設定し、動的に設定することができます。
  • しかし、枠の色などの属性を設定する必要がある場合は、どうすればいいですか?
  • 上記のフレーム属性を設定するには、CGColorクラスを使用する必要がありますが、iOS 13では、CGColorはダイナミックカラー値ではなく、一つの色しか表現できません。
  • は、傍受モードの変更方法において、tritCollection DidChangeを処理し、異なるモードに従って処理する。
    
    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
  • は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に変えてください。
    
    @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の暗い色モードの内容は以前の文章を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。