FlatUIKit 1.6.2

FlatUIKit 1.6.2

×

测试测试结果✗
语言语言 Obj-CObjective C
许可证 MIT
发布最后发布2015年6月

由Jack Flintermann，Jamie Matthews维护。

FlatUIKit 1.6.2

  • 作者
  • Jamie Matthews

背景

FlatUIKit最初在2013年3月由Jack Flintermann编写，当时iOS7还没推出。想法是为一些原生iOS组件提供漂亮扁平的外观。然后iOS7问世，并引入了足够的API来完成大部分任务。

然而，为了向后兼容，我们将尝试维护iOS6的兼容性，只要可行就尽可能。如果找到理由放弃iOS6的仅支持iOS7，我们将为剩余的iOS6支持留下分支，并向前进。

FlatUIKit

FlatUIKit是我们开发Grouper for iPhone时创建的一系列使用“Flat UI”美学风格的iOS组件的集合。其设计灵感来源于Flat UI和Kyle Miller。样式通过替换现有的UIKit组件的category来实现，所以集成到项目中非常简单。

安装

FlatUIKit可以通过CocoaPods进行安装。只需将下述内容添加到您的Podfile中：

pod 'FlatUIKit'

如果您不使用CocoaPods，您可以欢迎使用git子模块，或者简单地下载并将其手动包含到项目中。

请注意，FlatUIKit需要CoreText框架以及iOS > 6.0。

组件

按钮

FUIButton是UIButton的phantom子类别，公开了buttonColor、shadowColor、cornerRadius和shadowHeight等附加属性。请注意，如果您设置了这些中的任何一个，您必须设置所有这些。

myButton.buttonColor = [UIColor turquoiseColor];
myButton.shadowColor = [UIColor greenSeaColor];
myButton.shadowHeight = 3.0f;
myButton.cornerRadius = 6.0f;
myButton.titleLabel.font = [UIFont boldFlatFontOfSize:16];
[myButton setTitleColor:[UIColor cloudsColor] forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor cloudsColor] forState:UIControlStateHighlighted];

FUIButton

文本框

FUITextField是UITextField的幻影子类别，公开了edgeInsets、textFieldColor、borderColor、borderWidth和cornerRadius等附加属性。请注意，如果您设置了这些中的任何一个，您必须设置所有这些。

myTextField.font = [UIFont flatFontOfSize:16];
myTextField.backgroundColor = [UIColor clearColor];
myTextField.edgeInsets = UIEdgeInsetsMake(4.0f, 15.0f, 4.0f, 15.0f);
myTextField.textFieldColor = [UIColor whiteColor];
myTextField.borderColor = [UIColor turquoiseColor];
myTextField.borderWidth = 2.0f;
myTextField.cornerRadius = 3.0f;

FUITextField

分段控制器

FUISegmentedControl 是 UISegmentedControl 的子类，它提供了额外的属性，如 selectedColor、deselectedColor、selectedFont、deselectedFont、selectedFontColor、deselectedFontColor、dividerColor 和 cornerRadius。请注意，如果设置了其中任何一项，建议将所有相关属性都设置完整。

mySegmentedControl.selectedFont = [UIFont boldFlatFontOfSize:16];
mySegmentedControl.selectedFontColor = [UIColor cloudsColor];
mySegmentedControl.deselectedFont = [UIFont flatFontOfSize:16];
mySegmentedControl.deselectedFontColor = [UIColor cloudsColor];
mySegmentedControl.selectedColor = [UIColor amethystColor];
mySegmentedControl.deselectedColor = [UIColor silverColor];
mySegmentedControl.dividerColor = [UIColor midnightBlueColor];
mySegmentedControl.cornerRadius = 5.0;

开关

FUISwitch 并不是 UISwitch 的子类（UISwitch 的灵活性使其难以进行子类化），而是一个重写的实现，它公开了 UISwitch 的所有方法。此外，它还提供了访问其底层的开关的 UILabel 和其他子视图。

mySwitch.onColor = [UIColor turquoiseColor];
mySwitch.offColor = [UIColor cloudsColor];
mySwitch.onBackgroundColor = [UIColor midnightBlueColor];
mySwitch.offBackgroundColor = [UIColor silverColor];
mySwitch.offLabel.font = [UIFont boldFlatFontOfSize:14];
mySwitch.onLabel.font = [UIFont boldFlatFontOfSize:14];

FUISwitch

警告视图

与 FUISwitch 类似，FUIAlertView 是 UIAlertView 的重写实现，它公开了 UIAlertView 的所有方法（以及使用 FUIAlertViewDelegate 协议的代理方法），但是在 UI 定制方面有更大的灵活性。它可以任意定制所有子 UILabel、UIView 和 FUIButton。

FUIAlertView *alertView = [[FUIAlertView alloc] initWithTitle:@"Hello"
                                                      message:@"This is an alert view"
                                                     delegate:nil cancelButtonTitle:@"Dismiss"
                                            otherButtonTitles:@"Do Something", nil];
alertView.titleLabel.textColor = [UIColor cloudsColor];
alertView.titleLabel.font = [UIFont boldFlatFontOfSize:16];
alertView.messageLabel.textColor = [UIColor cloudsColor];
alertView.messageLabel.font = [UIFont flatFontOfSize:14];
alertView.backgroundOverlay.backgroundColor = [[UIColor cloudsColor] colorWithAlphaComponent:0.8];
alertView.alertContainer.backgroundColor = [UIColor midnightBlueColor];
alertView.defaultButtonColor = [UIColor cloudsColor];
alertView.defaultButtonShadowColor = [UIColor asbestosColor];
alertView.defaultButtonFont = [UIFont boldFlatFontOfSize:16];
alertView.defaultButtonTitleColor = [UIColor asbestosColor];
[alertView show];

注意：在 Swift 中创建 FUIAlertView 实例，请使用默认初始化器 s

let alertView = FUIAlertView()

FUIAlertView

滑块/步进器/进度视图

为了提供扁平化的 UISliders、UIProgressViews 和 UISteppers，我们仅仅提供了 UISlider/ProgressView/UIStepper 的类别，以自动配置其外观并使用适当的颜色/圆角。这使得与现有项目的集成无摩擦。

[mySlider configureFlatSliderWithTrackColor:[UIColor silverColor]
                              progressColor:[UIColor alizarinColor]
                                 thumbColor:[UIColor pomegranateColor]];

FUISlider

[myProgressView configureFlatProgressViewWithTrackColor:[UIColor silverColor]
                              progressColor:[UIColor alizarinColor]];

[myStepper configureFlatStepperWithColor:[UIColor wisteriaColor]
                        highlightedColor:[UIColor wisteriaColor]
                           disabledColor:[UIColor amethystColor]
                               iconColor:[UIColor cloudsColor]];

FUIStepper

工具栏按钮项

为了定制应用程序中的所有工具栏按钮项（包括后退按钮），UIBarButtonItem+FlatUI 提供了一个类方法，它使用 UIBarButtonItem 外观代理以一次性完成这项任务。

[UIBarButtonItem configureFlatButtonsWithColor:[UIColor peterRiverColor]
                              highlightedColor:[UIColor belizeHoleColor]
                                  cornerRadius:3];

FUINavBar

然而，这可能会导致来自动作表、分享表单或网页链接的推进控制器出现渲染问题。为了防止这种行为，请将定制的工具栏按钮项的作用域限定在控制器上。

[UIBarButtonItem configureFlatButtonsWithColor:[UIColor peterRiverColor]
                              highlightedColor:[UIColor belizeHoleColor]
                                  cornerRadius:3
                               whenContainedIn:[YourViewController class]];

导航栏

如上所述，我们对 UINavigationBar 提供了一个类别，可以将其配置为单色以实现扁平化。

[self.navigationController.navigationBar configureFlatNavigationBarWithColor:[UIColor midnightBlueColor]];

表格视图单元格

您可以修改 UITableViewCell 的 backgroundColor 和 selectedBackgroundColor，而不会失去圆形边角。单元格将复制 UITableView 的 separator 颜色。separator 的高度以 separatorHeight 属性公开，半径以 cornerRadius 属性公开。

UITableViewCell *cell = ...;
[cell configureFlatCellWithColor:[UIColor greenSeaColor]
                   selectedColor:[UIColor cloudsColor]
                 roundingCorners:corners];

cell.cornerRadius = 5.0f; // optional
cell.separatorHeight = 2.0f; // optional

FUITableViewCell

弹出视图

对于 iPad 上的一些其他扁平化组件，我们提供了类别来自动配置弹出视图的外观，只需设置一个背景颜色即可。

popover = [[UIPopoverController alloc] initWithContentViewController:nc];
[popover configureFlatPopoverWithBackgroundColor: [UIColor midnightBlueColor] cornerRadius:3];
popover.delegate = self;
[popover presentPopoverFromRect:button.frame inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];

Popover

颜色

为了方便起见，FlatUIKit 包括在 Flat UI 颜色 中定义的颜色。您可以在上面的代码/组件中查看这些颜色的示例。使用它们的方法非常简单，如下所示

#import <FlatUIKit/UIColor+FlatUI.h>
UIColor *myColor = [UIColor turquoiseColor];

字体

FlatUIKit 随带 Lato 字体，这是一种干净、美观的开源字体。关于 Lato 的更多信息可以在 这里 找到。它在 FlatUIKit 中自动包含；您可以使用它，如下所示

#import "UIFont+FlatUI.h"
UIFont *myFont = [UIFont flatFontOfSize:16];

图标

您现在可以在应用程序中使用 FlatUIKit 提供的出色图标。最简单的使用方法是用标签，但我将添加支持使用它们在按钮、ImageView 和其他便捷之处。

#import "NSString+Icons.h"
UILabel *label = [...]
label.font = [UIFont iconFontWithSize:16];
label.text = [NSString iconStringForEnum:FUIHeart];

图标遵循与 FlatUI 类似的大致命名方案，但您可以在 NSString+Icons.h 中查找枚举。

贡献

热烈欢迎贡献。我们将审查所有拉取请求，如果您发送给我们一份好的/感兴趣，我们将很乐意向您提供仓库的推送访问权限。