🔛 ♂️ ⛩️ iOSアプリのスタイル設定：フォント、色、画像のストレッチ方法 ⛅️ 🔱 🥓

モバイルアプリケーションでの作業中、開発者はデザイナーからレイアウト、フォント、画像を受け取ります。これらの素材をコードに変換するのは退屈な作業であり、その過程で誰もが自分の自転車を発明しようと努力しています。プロジェクトをクリーンに保つために、スタイルの操作に関する単一の規則を採用しました。

配色

これがコード生成の最初の候補です。色のリストを、手で入力しやすく、UIColorカテゴリを生成するために解析しやすい形式で転送することにしました。

デザイナーは、シンプルなテキストファイル#COLOR-TITLEを組み立てます。開発者はこのファイルをプロジェクトに含め、スクリプトはコンパイル前にコードとパレットをCLR形式で生成します。このようなパレットを使用して、Interface Builderで作業できます。

#B3ED3B green #5ABBF2 blue #FD86C9 pink #FD4737 red #FEAE30 orange

ニュアンス

パレットの使用にはいくつかの問題があります。

1つ目は、[色]パネルでは、使用可能なパレットのリストとその内容が更新されないことです。 OS Xの各アプリケーションは、Colorsパネルの独自のインスタンスを持つことができ、新しく生成されたパレットをパネルに追加または更新するには、アプリケーション全体を再起動する必要があります。

そのため、Xcode用の小さなプラグインを作成しました。このプラグインは、ビルドのたびに[色]パネルのすべてのユーザーパレットを歪めます。

2番目の問題は、Interface Builderが要素の色セットを保存する形式に由来します。

 <color key="textColor" red="0.29803922772407532" green="0.85098040103912354" blue="0.39215686917304993" alpha="1" colorSpace="deviceRGB"/>

パレットの単一のヒントではなく、裸の数字-これを更新しても、すべてがxib /ストーリーボードで同じままになることを意味します。残念ながら、この問題を解決することはできませんでしたが、2つの可能なアプローチを特定しました。

パレットを使用しないでください。 すべての要素にアウトレットを掛け、コードでペイントします。 Interface Builderでの要素の無関係な表示の問題は、IBDesignableテクノロジーによって部分的に解決されます。
額にソリューションを使用します。 色を置き換える必要がある場合は、各xibまたはストーリーボードの背後にあるxmlを調べて、一致したものを新しい色に置き換えます。たとえば、 hereのように。最もエレガントなソリューションではありませんが、機能します。

UIColorカテゴリを生成するユーティリティと、GitHub- RMRColorTools-iOSの Colorsパネルのパレットのリストを再ロードするプラグインを見つけることができます。

プラグインを使用すると、すべてが簡単です。リポジトリを複製し、RMRRefreshColorPanelPluginターゲットを実行してから、Xcodeを再起動する必要があります。

[ビルドフェーズ]タブでビルドごとにUIColorを自動的に生成するには、RMRHexColorGenユーティリティ呼び出しでスクリプトフェーズの実行を追加します。

フォント

フォントを操作するためのエントリポイントが1つ必要だったため、スタイルシートに基づいてUIFontカテゴリを実装します。

 @implementation UIFont (RMRFonts) + (UIFont *)rmr_regularFontOfSize:(CGFloat)size {   return [UIFont fontWithName:@"HelveticaNeue"                          size:size]; } + (UIFont *)rmr_mediumFontOfSize:(CGFloat)size {   return [UIFont fontWithName:@"HelveticaNeue-Medium"                          size:size]; } #pragma mark - Style fonts + (UIFont *)rmr_fontA1 { return [self rmr_mediumFontOfSize:17.f]; } + (UIFont *)rmr_fontA2 { return [self rmr_regularFontOfSize:17.f]; } + (UIFont *)rmr_fontB1 { return [self rmr_regularFontOfSize:14.f]; } + (UIFont *)rmr_fontB2 { return [self rmr_regularFontOfSize:11.f]; } + (UIFont *)rmr_fontB3 { return [self rmr_mediumFontOfSize:10.f]; } @end

フォントをインストールするために各ラベルアウトレットにハングアップします-あまり聞こえません。そのため、初期化時にスタイルを設定してUILabelのサブクラスを実装しました。スタイルは特定のサブクラスで設定されます。

 @implementation RMRLabel - (void)prepareAppearance {   //      } - (instancetype)initWithFrame:(CGRect)frame {   if (self = [super initWithFrame:frame]) {       [self prepareAppearance];   }   return self; } - (void)awakeFromNib {   [self prepareAppearance]; } @end @implementation RMRLabelA1 - (void)prepareAppearance { self.font = [UIFont rmr_fontA1]; } @end