カラースキーム「Swift」「iOS」-applicationを制御する方法

初心者の開発者自身（むしろ、このエッセイの設計者）でさえ、いわゆるコードがコードに存在してはならないことは秘密ではないと思います。 「ハードコードされた」値と他のあらゆる種類の「マジックナンバー」があります。 なぜ-それも、私が理解していることを願っています、そうでなければ、Web上のこのトピックに関する数十、数百の記事、そして古典的な作品があります。 「Android Studio」 （おそらくすべての場合ではありませんが、それでも）は、このトピックについて「警告」を生成し、ラインなどを提供することを好むことさえあります。 リソースファイルへ 。 「Xcode」 （まだ？）このようなヒントに甘んじることはありません。開発者は、 「コードレビュー」の後に自分自身をチェックするか、同僚の手に渡す必要があります 。



これはすべて、アプリケーションで使用される色に適用されます。

最終更新日：2019年2月16日

色定数

手始めに、多かれ少なかれ標準的な推奨事項をいくつか示したいと思います。



まず、すべての要素の色は、 「ストーリーボード」 / 「インターフェイスビルダー」 ではなく、コードですぐに設定するのが最適です。 もちろん、これは、3つの要素と1つの配色の1つの画面を備えたアプリケーションではありません。 しかし、この場合でも、将来どのように状況が変化するかは確実にわかりません。



第二に、すべての色は別のファイルで取り出される定数によって決定される必要があります。 または、対応する「表示」コードの隣の別のグループに。



第三に、色はカテゴリに分類する必要があります。 つまり 「最初の画面の2番目のボタンの色」ではなく、「メインタイプのボタンの背景色」のように操作します。



デザイナー（または自分の好みの感覚）が任意の要素の色を変更する信号を受け取った場合、長い間探す必要はありません-複数の場所で変更するだけです（アプリケーションのいずれかを忘れて、アプリケーションをiTunes Connectに送信した後、頭をつかむ） ）-2。



したがって、たとえば、次のような内容のColors.swift



ファイルがColors.swift



ます。

 import UIKit enum ButtonAppearance { static let backgroundColor = UIColor.white static let borderColor = UIColor.gray static let textColor = UIColor.black }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（率直に言って、単一のcase



ないenum



型は、定数を宣言するための私のお気に入りの型構造です。この使用により、型をインスタンス化し、通常は意図した方法以外の方法で型を使用する機能が自動的に奪われます。）



色の使用は次のようになります。

 let someButton = UIButton() someButton.backgroundColor = ButtonAppearance.backgroundColor someButton.layer.borderColor = ButtonAppearance.borderColor.cgColor
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

カラーモデル

さらに進んで、アプリケーションで使用されるさまざまな色を表すモデルを作成することをお勧めします。

 struct SchemeColor { private let color: UIColor func uiColor() -> UIColor { return color } func cgColor() -> CGColor { return color.cgColor } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

便宜上、 UIColor



extension



を記述することもできます。

 extension UIColor { func schemeColor() -> SchemeColor { return SchemeColor(color: self) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、定数は次のようになります。

 enum ButtonAppearance { static let backgroundColor = UIColor.white.schemeColor() static let borderColor = UIColor.gray.schemeColor() static let textColor = UIColor.black.schemeColor() }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードでは、色は次のように設定されます。

 let someButton = UIButton() someButton.backgroundColor = ButtonAppearance.backgroundColor.uiColor() someButton.layer.borderColor = ButtonAppearance.borderColor.cgColor()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして最後に、なぜこのような追加の困難が必要になるのか-これは...

カラースキーム

アプリケーションに2つのカラースキーム（暗い色と明るい色）を持たせたいとします。 カラースキームのリストを保存するには、 enum



定義します：

 enum ColorSchemeOption { case dark case light }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、配色モデルを「シングルトン」として表すための型を作成するのは恥ずべきことではないと思います。

 struct ColorScheme { static let shared = ColorScheme() private (set) var schemeOption: ColorSchemeOption private init() { /*    ,         option. ,    UserDefaults     ,    . */ } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

SchemeColor



内で定義してprivate



ます。



SchemeColor



自体を変更して、アプリケーションが使用するカラースキームを認識し、目的の色を返すようにする必要があります。

 struct SchemeColor { let dark: UIColor let light: UIColor func uiColor() -> UIColor { return colorWith(scheme: ColorScheme.shared.schemeOption) } func cgColor() -> CGColor { return uiColor().cgColor } private func colorWith(scheme: ColorSchemeOption) -> UIColor { switch scheme { case .dark: return dark case .light: return light } } // ColorScheme }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

色定数は次のようになります。

 enum ButtonAppearance { static let backgroundColor = SchemeColor(dark: Dark.backgroundColor, light: Light.backgroundColor) static let borderColor = SchemeColor(dark: Dark.borderColor, light: Light.borderColor) static let textColor = SchemeColor(dark: Dark.textColor, light: Light.textColor) private enum Light { static let backgroundColor = UIColor.white static let borderColor = UIColor.gray static let textColor = UIColor.black } private enum Dark { static let backgroundColor = UIColor.lightGray static let borderColor = UIColor.gray static let textColor = UIColor.black } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（ UIColor



のextension



はもう必要ないようです。）



そして、これらすべてのものの使用は同じように見えます：

 let someButton = UIButton() someButton.backgroundColor = ButtonAppearance.backgroundColor.uiColor() someButton.layer.borderColor = ButtonAppearance.borderColor.cgColor()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一部の要素の色を変更するには、対応する定数を変更するだけで十分です。 また、別のカラースキームを追加するには、カラー定数でこのカラースキームの色のセットであるColorSchemeOption



にcase



を追加し、 ColorSchemeOption



を更新するSchemeColor



ます。



もちろん、後者はまだ改善できます。 たとえば、回路の数が増えた場合、かさばる初期化子を「ビルダー」に置き換える方が便利でしょう。



おそらく今度はすべて！ 素敵なコードがあります！