UIKit Style Sheet

UIAppearanceへの設定を CSS(ファイルはJSON)で定義できるライブラリ。

robertwijas/UISS · GitHub

デモ


こんなコードを

[[UIButton appearance] setTitleColor:[[UIColor whiteColor] colorWithAlphaComponent:0.800]
                            forState:UIControlStateNormal];
[[UIButton appearance] setTitleColor:[UIColor whiteColor]
                            forState:UIControlStateHighlighted];
[[UIButton appearance] setBackgroundImage:[[UIImage imageNamed:@"button-background-normal"]
              resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0)]
                                 forState:UIControlStateNormal];
[[UIButton appearance] setBackgroundImage:[[UIImage imageNamed:@"button-background-highlighted"]
              resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0)]
                                 forState:UIControlStateHighlighted];
[[UILabel appearanceWhenContainedIn:[UIButton class], nil] setFont:[UIFont fontWithName:@"Copperplate-Bold" size:18.0]];
[[UIButton appearance] setTitleEdgeInsets:UIEdgeInsetsMake(1.0, 0.0, 0.0, 0.0)];

こんな感じでファイルに定義しておける。

{
    "UIButton":{
        "titleColor:normal":["white", 0.8],
        "titleColor:highlighted":"white",
        "backgroundImage:normal": ["button-background-normal", [0,10,0,10]],
        "backgroundImage:highlighted": ["button-background-highlighted", [0,10,0,10]],
        "titleEdgeInsets": [1,0,0,0],
        "UILabel":{
            "font":["Copperplate-Bold", 18]
        }
    }
}

CSSファイルは uiss.json を作り、コードで

と書くだけ。
リモートにも置けて、その場合はこう。リリース後でも外観を返ることができそう。

self.uiss = [UISS configureWithURL:[NSURL URLWithString:@"http://localhost/uiss.json"]];

ライブアップデートにも対応している。

uiss.autoReloadEnabled = YES;
uiss.autoReloadTimeInterval = 1;

iOSアプリのUIをCSSで定義するアイディアは有料サービスのPixateが先行してあった。アピアランス限定とはいえオープンソースでもCSSを使う実装が出てきたのはうれしい。