iOS开源项目：FlatUIKit

FlatUIKit是iOS中具有扁平化风格的UI（Flat UI）组件。FlatUIKit的设计灵感来源于Flat UI和Kyle Miller。FlatUIKit中的组件是通过扩展(category)或继承iOS SDK中已有的UIKit组件来实现的，因此在程序中使用FlatUIKit非常方便。

https://github.com/Grouper/FlatUIKit

FUIButton是UIButton的子类，通过设置UIButton的一系列属性来把样式定义成扁平化的

    FUIButton *button = [[FUIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    button.buttonColor = [UIColor turquoiseColor];
    button.shadowColor = [UIColor greenSeaColor];
    button.shadowHeight = 3.0f;
    button.cornerRadius = 3.0f;
    button.titleLabel.font = [UIFont boldFlatFontOfSize:16];
    [button setTitleColor:[UIColor cloudsColor] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor cloudsColor] forState:UIControlStateHighlighted];
    [button setTitle:@"button" forState:UIControlStateNormal];
    [self.view addSubview:button];

 

FUISegmentedControl是UISegmentedControl的子类，使用上和FUIButton类似，源码也很简单，都是设置一些属性。当然属性的值是很重要的，它们是扁平化设计的关键。

    NSArray *array = [NSArray arrayWithObjects:@"one",@"two",@"three", nil];
    FUISegmentedControl *seg = [[FUISegmentedControl alloc] initWithItems:array];
    [seg setFrame:CGRectMake(0, 0, 300, 50)];
    seg.selectedFont = [UIFont boldFlatFontOfSize:16];
    seg.selectedFontColor = [UIColor cloudsColor];
    seg.deselectedFont = [UIFont flatFontOfSize:16];
    seg.deselectedFontColor = [UIColor cloudsColor];
    seg.selectedColor = [UIColor amethystColor];
    seg.deselectedColor = [UIColor silverColor];
    seg.dividerColor = [UIColor midnightBlueColor];
    seg.cornerRadius = 5.0;
    [self.view addSubview:seg];

 

FUISwitch:

    FUISwitch *switchbutton = [[FUISwitch alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    switchbutton.onColor = [UIColor turquoiseColor];
    switchbutton.offColor = [UIColor cloudsColor];
    switchbutton.onBackgroundColor = [UIColor midnightBlueColor];
    switchbutton.offBackgroundColor = [UIColor silverColor];
    switchbutton.offLabel.font = [UIFont boldFlatFontOfSize:14];
    switchbutton.onLabel.font = [UIFont boldFlatFontOfSize:14];
    [self.view addSubview:switchbutton];

通过几个例子和查看源码，可以看到设计扁平化的UI是如此的简单，主要的原理是通过设置一系列的属性来够着背景图或者背景色，然后更新到UI控件上。看来随心所欲的设计自己喜欢的扁平化风格也不是难事。