beautify 0.1.0

beautify 0.1.0

×

测试已测试✓
Lang语言 Obj-CObjective C
许可证 自定义
发布最新发布2014年12月

由 Chris Grant 维护。

beautify 0.1.0

beautify-ios

Beautify 强化了 Apple 的 UIKit 控件，重新渲染它们，从而让您对这些控件的视觉外观有更大的控制。

beautify-ios 框架是更大胆的一个项目的一部分，该项目将允许对经过 beautify 框架增强的应用进行实时样式设置。我们计划不久将此发布给我们的测试计划成员。

beautify-ios 目前支持以下控件； UISwitch、UISlider、UITableViewCell、UINavigationBar、UITextField、UILabel、UIButton 和 UIImageView，还有更多即将推出 …

内容

简要介绍

您只需一行代码即可将 beautify 框架添加到您的应用程序中。一旦添加，所有的 UIKit 控件都将以与原生外观和 feel（iOS 6 或 iOS 7）相匹配的样式重新渲染。beautify 提供的额外渲染功能可以通过一个 renderer 属性访问。例如，iOS 7 的 UIButton 看起来如下

UIKit Button

当您将 beautify 添加到应用程序时，按钮将看起来完全一样——这是有意为之！然而，现在您现在可以修改按钮的样式了。这些改变可以是微妙的，如下面的例子所示

// beautify the app (typically you would do this in the app-delegate)
[[BYBeautify instance] activate];

// set the border and background color
BYBorder* border = [[BYBorder alloc] initWithColor:[UIColor whiteColor] width:0.0 radius:5.0];
[self.button.renderer setBorder:border forState:UIControlStateNormal];
[self.button.renderer setBackgroundColor:[UIColor colorWithRed:0.38 green:0.78 blue:0.44 alpha:1.0]
                                forState:UIControlStateNormal];

上面的代码改变了按钮的背景颜色，并创建了一个圆角边框

Beautified button

或者，改变可以是激进的

// add a border
BYBorder* border = [[BYBorder alloc] initWithColor:UIColorFromRGB(0xebebed) width:5.0 radius:20.0];
[self.button.renderer setBorder:border forState:UIControlStateNormal];

// set the text style
BYFont* font = [[BYFont alloc] initWithName:@"AvenirNextCondensed-Heavy"];
BYText* text = [[BYText alloc] initWithFont:font color:[UIColor whiteColor]];
[self.button.renderer setTitleStyle:text forState:UIControlStateNormal];

// add a gradient
UIColor* lightGreen = UIColorFromRGB(0xcae284);
UIColor* darkGreen = UIColorFromRGB(0x9bcb53);
BYGradient* gradient = [[BYGradient alloc] initWithStops:@[
    [[BYGradientStop alloc] initWithColor:lightGreen at:0.0f],
    [[BYGradientStop alloc] initWithColor:darkGreen at:1.0f]]];
[self.button.renderer setBackgroundGradient:gradient forState:UIControlStateNormal];

// add inner shadows
UIColor* shadowColor = UIColorFromRGB(0x81a744);
NSArray* shadows = @[
    [[BYShadow alloc] initWithOffset:CGSizeMake(0.0, -2.0) radius:2.0 color:shadowColor],
    [[BYShadow alloc] initWithOffset:CGSizeMake(0.0, 2.0) radius:1.0 color:[UIColor whiteColor]],
    [[BYShadow alloc] initWithOffset:CGSizeMake(0.0, 1.0) radius:2.0 color:shadowColor]
    ];
[self.button.renderer setInnerShadows:shadows forState:UIControlStateNormal];

Beautified button

Beautify 为所有 UIKit 控件添加了边框、阴影（内和外）、渐变（径向和线性）。它还增强了 UITextField，添加了高亮状态，并允许您更改 UISwitch 控件上的文本。

上面的例子已经展示了如何改变单个控件的视觉外观。手动为您的应用程序中的每个控件显式地设置样式将是一个非常耗时的过程。因此，beautify 有一个主题的概念，它会自动应用到您的应用程序中的每个控件上。此外，您还可以将主题编码为 JSON 格式，从而减少需要编写的代码量。

构建 beautify

您必须运行两个命令：运行 git submodule init 初始化您的本地配置文件，并运行 git submodule update 以获取它所需的所有数据。

执行完这些操作后，您现在可以构建美化功能了。打开 Beautify.xcodeproj 并选择“Beautify”方案。点击构建，然后将 Beautify.framework 目标构建并部署到您的 DerivedData 目录。要找到生成的框架，在“产品”组中右键点击 Beautify.framework 产品，然后选择 在Finder中显示。

Beautify Products

使用方法

添加框架

要将自己的项目添加美化功能，将 Beautify.framework 从您的 DerivedData 目录复制到您自己项目中的“框架”组。为了确保框架已正确链接，请检查 Beautify.framework 是否出现在目标构建阶段中的“链接二进制与库”部分。

Binary Links

启用美化

启用美化只需要一行代码

[[BYBeautify instance] activate];

将以下代码放入您的应用程序代理的 didFinishLaunchingWithOptions: 方法顶部，您的应用程序中的所有控件都将使用美化进行渲染。您可能不会立即注意到变化。控件默认状态已被调整以匹配苹果的默认风格。当您想要修改控件外观时，您有三个选项

  1. 通过美化添加到控件中的 renderer 属性按控件逐个修改外观。
  2. 在全球范围内以代码创建一个主题，美化将将其应用到所有UI控件中。
  3. 创建一个JSON主题，该主题将以全局主题为准应用。

您也可以将这三种方法结合起来，应用全局主题，同时修改单个控件的外观。

以下详细描述了这三种方法

在代码中构建主题

首先创建一个新的 BYTheme 对象。该对象包含了您为样式化应用程序所需的全部属性。主题包含了许多与UIKit控件相关联的样式属性，您可以使用它们改变视觉外观，如以下示例所示

BYTheme *theme = [BYTheme new];
theme.switchStyle.border = [[BYBorder alloc] initWithColor:[UIColor blueColor]
                                                     width:2.0f radius:0.0f];

这将提供一个带有2px蓝色边框的开关，其余外观默认。

一旦您使用代码构建了主题，应用它很简单。只需在AppDelegate中激活行下面放置以下代码，即可将您刚刚构建的主题应用到应用程序的所有控件中

[[BYThemeManager instance] theme];

从JSON文件中加载主题

您也可以在JSON中构建主题，然后将其传递到应用程序中。JSON文件的结构应与BYTheme对象的结构相匹配。
颜色值应定义为十六进制字符串，8字符的十六进制字符串也可用于支持alpha值，例如 RRGGBBAA。

要查看示例JSON文件，请查看示例应用程序束中的 demoStyle.json 文件。

一旦构造了JSON文件，只需将AppDelegate中的 [[BYBeautify instance] activate] 调用替换为以下行

[[BYBeautify instance] activateWithStyle:@"myJSONStyleFile"];

请注意，您不需要传递文件名中的 ".json" 部分 —— 内部会处理。

特定控件的样式

在通过代码或JSON文件应用主题后，您可能会发现需要为应用程序中部分控件指定不同的样式。

假设您的应用中有许多按钮，但您想通过围绕其中一个按钮添加红色边框来强调它。您只需使用与该按钮实例关联的渲染器，并设置要其显示的任何状态下的边框属性。

UIButton *redBorderedButton;

// Set up the button as usual…

BYButtonRenderer *buttonRenderer = redBorderedButton.renderer;
BYBorder *redBorder = [[BYBorder alloc] initWithColor:[UIColor redColor] width:5.0f radius:0];
[buttonRenderer setBorder:redBorder forState:UIControlStateNormal];

就是这样！redBorderedButton将现在在UIControlStateNormal状态下拥有一条红色、5px的边框。

排除控件

有时您可能希望某些控件不参与美化渲染并保持其默认样式。要这样做，只需将任何控件上的isImmuneToBeautify属性设置为YES。所有控件的isImmuneToBeautify的默认值均为NO，除了UIImageView控件。

UIImageView通常用作其他控件的组件部分，并且在应用中经常被使用。鉴于您不太可能想美化应用程序中的每一个图像视图，我们决定将UIImageView上isImmuneToBeautify的默认值设置为YES。如果您想美化一个UIImageView，只需将其设置为NO。

许可证

beautify-ios使用Apache v2许可证