机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

自然用户界面

使用样式表为 iOS 应用设置样式，类似于 CSS

描述

NUI 是一个适用于 iOS 的即插即用 UI 工具包，它允许你使用样式表来设置 UI 元素的样式，类似于 CSS。它可以让你在几分钟内为整个应用程序设置样式。

开箱即用时，样式如下所示：

不过它很容易修改。例如，上面的样式是这样声明的 like this。这里有其他主题的示例，它们定义在 here：

样式使用类似 CSS 的语法声明，并支持变量：

@primaryFontName: HelveticaNeue;
@secondaryFontName: HelveticaNeue-Light;
@primaryFontColor: #333333;
@primaryBackgroundColor: #E6E6E6;

Button {
    background-color: @primaryBackgroundColor;
    border-color: #A2A2A2;
    border-width: @primaryBorderWidth;
    font-color: @primaryFontColor;
    font-color-highlighted: #999999;
    font-name: @primaryFontName;
    font-size: 18;
    corner-radius: 7;
}
NavigationBar {
    background-tint-color: @primaryBackgroundColor;
    font-name: @secondaryFontName;
    font-size: 20;
    font-color: @primaryFontColor;
    text-shadow-color: #666666;
    text-shadow-offset: 1,1;
}

NUI 让你可以：

• 在几分钟内更新整个应用程序的视觉外观
• 保存主题以在多个应用程序中使用
• 使用简单规则设置 UI 元素的样式，比如设置 Button { border-color: #CCCCCC; }
• 定义变量，如 @primaryFontName 或 @myBackgroundColor（类似 Sass/LESS）
• 无需翻阅文档就能找到如何更改特定 UI 元素的样式
• 快速创建自定义样式类
• 在应用程序运行时修改其样式

一些令人兴奋的功能即将推出，非常鼓励贡献。请参阅 FAQ。

安装

CocoaPods

NUI 最容易通过 CocoaPods 安装。它的 Pod 名称是 “NUI”。安装之后，将 [NUISettings init]; 添加到 AppDelegate.m 中的 application:didFinishLaunchingWithOptions（像 这样）。当作为框架安装时，NUI 可以在 Swift 中原生导入。只需将 import NUI 添加到文件顶部。

不使用 CocoaPods

如果你选择不使用 CocoaPods，可以按如下步骤安装 NUI：

1. 将 NUI 目录复制到你的应用程序中
2. 如果尚未添加，将 CoreImage 和 QuartzCore 框架添加到你的应用程序中（像 这样）
3. 将 NUIParse 作为子项目添加，将其 iOSNUIParse 目标设置为你的目标的依赖项，并将 libNUIParse.a 添加到你的链接库。
4. 将 [NUISettings init]; 添加到 AppDelegate.m 中的 application:didFinishLaunchingWithOptions（像 这样）
5. 在 Swift 中使用 NUI，需要将 #import <NUI/NUISettings.h> 添加到你的桥接头文件中。

示例使用 CocoaPods，因此你需要 安装 CocoaPods，在 Demo 目录下运行 pod install，然后打开 .xcworkspace 来打开项目。

用法

Here's a walkthrough on how to get up and running with NUI.

在引入 NUI 后，你可以通过简单地编辑 NUIStyle.nss 来修改应用的样式。如果你想避免修改 NUI 的文件，可以将 NUIStyle.nss 复制到你的应用中，重命名（例如 MyTheme.nss），然后将 [NUISettings init] 替换为 [NUISettings initWithStylesheet:@"MyTheme"];（安装步骤中的第 4 步）。

由于 UIKit 在更复杂的 UI 组件中使用简单 UI 组件的性质，NUI 在极少数情况下不会为某些 UIKit 组件应用样式。如果你需要为这些情况应用样式，可以直接使用 NUIRenderer：

[NUIRenderer renderButton:myButton];

这将使用“按钮”样式。你也可以指定自定义类：

[NUIRenderer renderButton:myButton withClass:@"LargeButton"]

注意：以前 NUI 需要你让你的元素继承自 NUI 类，但现在已经不再需要。详细信息请参阅下文“从子类迁移到类别”。

编辑样式规则

NUIStyle.nss 包含所有的样式规则。例如，像 Button { font-name: Helvetica; } 这样的规则会修改每个 UIButton 的字体名称。

格式应该不言自明，但这里有一些说明：

• 样式变量定义在顶部，但你可以根据需要添加/修改/删除它们。
• 你可以让一个元素继承多个样式类（见下文创建自定义样式类）。

要查看所有可用属性和值，请参阅下文的样式类和样式值类型列表。

创建自定义样式类

你可以给元素分配自定义样式类（例如 LargeButton），并通过使用 Button:LargeButton 的形式让这些类继承自一个或多个其他样式类。若要绕过 NUI 对某个元素的样式设置，可将其类设置为 none。你可以在 Interface Builder 或通过编程方式设置元素的样式类：

在 Interface Builder 中设置元素样式类

为此，你需要为元素设置运行时属性（在 Identity Inspector > 用户定义的运行时属性，点击 +）。将 Key Path 设置为 nuiClass，Type 设置为 String，Value 设置为 LargeButton（或 Button:MyButton）：

通过编程方式设置元素样式类

为此，你需要导入该元素的 NUI 类别。如果你要为 UIButton 设置样式，则需要导入：

#import "UIButton+NUI.h"

然后你可以在你的元素上设置 nuiClass：

myButton.nuiClass = @"LargeButton";

注意：一个样式类可以继承无限数量的样式规则，所以如果你想创建样式规则组，你可以将 nuiClass 设置为类似 @"MyStyleGroup1:MyStyleGroup2:MyButton" 的内容。

从 NUI 的样式中排除视图

如果你想阻止特定视图类被应用样式（例如已经有样式的第三方 UI 元素），可以在 NSS 中指定它们：

Button {
    exclude-views: UIAlertButton;
    exclude-subviews: UITableViewCell,TDBadgedCell,UITextField;
}

• exclude-views 将阻止 NUI 将 Button 样式应用于指定类的视图
• exclude-subviews 将阻止 NUI 将 `Button 样式应用于指定类的视图的子视图

如果您想全局阻止特定视图类被应用样式（不论样式类），可以使用 +[NUISettings setGlobalExclusions:] 来实现：

int main(int argc, char *argv[])
{
    @autoreleasepool {
        [NUISettings init];
        [NUISettings setGlobalExclusions:@[@"ABMemberCell", @"ABMultiCell"]];
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([MyAppDelegate class]));
    }
}

特定于设备或方向的样式

您可以使用 @media 查询，使样式或变量定义仅应用于特定设备和/或方向：

@media (device:ipad) {
    /* styles or definitions for iPad */
}

@media (device:iphone) {
    /* styles or definitions for iPhone */
}

@media (orientation:landscape) {
    /* styles or definitions for landscape orientation */
}

@media (orientation:portrait) {
    /* styles or definitions for portrait orientation  */
}

@media (orientation:portrait) and (device:ipad) {
    /* styles or definitions for portrait orientation on iPad */
}

在应用程序运行时修改样式

为此，请在 main.m 中的 [NUISettings init]; 之后添加以下行，并将 @"/path/to/Style.nss" 替换为您的 .nss 文件的绝对文件路径（例如 /Users/myusername/projects/ios/MyApp/Style.nss ）：

[NUISettings setAutoUpdatePath:@"/path/to/Style.nss"];

现在，每当你在应用程序运行时修改并保存你的 .nss 文件，新更改将立即生效，无需重新构建应用程序。这可以大大加快样式设定的过程。在创建发布版本时，你需要删除这一行。

创建自定义主题

由于所有样式规则都包含在 NUIStyle.nss 中，因此很容易创建一个可以在其他项目中重复使用的 NUI 主题。如果你做了一个喜欢的主题，请告诉我，我很可能会非常乐意将其包含在这个仓库中。

从子类迁移到类别

NUI 0.1 版本要求你手动让应用程序的 UI 组件继承自 NUI 类（例如 NUIButton）。NUI 现在不再需要这样做，因为它使用 UIKit 类别而不是子类。如果你之前使用的是 NUI 0.1，并更新到新版 NUI，你只需取消设置这些自定义类，例如，使 UIButton 仍然是 UIButton，而不是 NUIButton（这可以在身份检查器 > 自定义类或应用程序代码中完成）。

样式类

以下是当前所有可用的样式类、它们对应的 UI 组件类以及它们支持的属性。值类型（例如 Color、Gradient）将在“样式值类型”中说明。

按钮栏

UIBarButtonItem

• 背景颜色 (Color)
• 顶部/底部背景颜色 (Gradient)
• 高亮背景颜色 (Color)
• 背景图片 (Image)
• 背景图片内边距 (Box)
• 背景色调 (Color)
• 边框颜色 (Color)
• 边框宽度 (Number)
• 圆角半径 (Number)
• 字体颜色 (Color)
• 字体名称 (FontName)
• 字体大小 (Number)
• 文字阴影颜色 (Color)
• 文字阴影偏移 (Offset)

返回按钮

UIBarButtonItem 返回按钮，继承自 BarButton

• 背景颜色 (Color)
• 背景图像 (图片)
• 背景图像内边距 (框)
• 背景色调 (颜色)
• 边框颜色 (颜色)
• 边框宽度 (数字)
• 圆角半径 (数字)
• 字体颜色 (颜色)
• 字体名称 (字体名称)
• 字体大小 (数字)
• 文字阴影颜色 (颜色)
• 文字阴影偏移 (偏移)

按钮

UIButton

• 背景颜色 (颜色)
• 正常背景颜色 (颜色)
• 顶部/底部背景颜色 (渐变)
• 禁用背景颜色 (颜色)
• 高亮背景颜色 (颜色)
• 选中背景颜色 (颜色)
• 选中高亮背景颜色 (颜色)
• 背景图片 (图片)
• 背景图片内边距 (盒子)
• 禁用背景图片 (图片)
• 禁用背景图片内边距 (盒子)
• 高亮背景图片 (图片)
• 高亮背景图片内边距 (盒子)
• 选中背景图片 (图片)
• 选中背景图片内边距 (盒子)
• 已选中禁用背景图片 (图片)
• 已选中禁用背景图片内边距 (盒子)
• 已选中高亮背景图片 (图片)
• 已选中高亮背景图片内边距 (盒子)
• 边框颜色 (颜色)
• 边框宽度 (数字)
• 内容内边距 (盒子)
• 圆角半径 (数字)
• 字体颜色 (颜色)
• 禁用字体颜色 (颜色)
• 高亮字体颜色 (颜色)
• 选中字体颜色 (颜色)
• 字体颜色-选中-禁用 (颜色)
• 字体颜色-选中-高亮 (颜色)
• 字体名称 (字体名称)
• 字体大小 (数字)
• 高度 (数字)
• 图片 (图片)
• 图片内边距 (盒子)
• 图片-禁用 (图片)
• 图片-禁用-内边距 (盒子)
• 图片-高亮 (图片)
• 图片-高亮-内边距 (盒子)
• 图片-选中 (图片)
• 图片-选中-内边距 (盒子)
• 图片-选中-禁用 (图片)
• 图片-选中-禁用-内边距 (盒子)
• 图片-选中-高亮 (图片)
• 图片-选中-高亮-内边距 (盒子)
• 内边距 (盒子)
• 阴影颜色 (颜色)
• 阴影偏移 (偏移)
• 阴影不透明度 (数字)
• 阴影半径 (数字)
• 文本对齐 (文本对齐方式)
• 文本透明度 (数字)
• 文本自动适应 (布尔值)
• 文本阴影颜色 (颜色)
• 文本阴影颜色（禁用） (颜色)
• 文本阴影颜色（高亮） (颜色)
• 文本阴影颜色（选中） (颜色)
• 文本阴影颜色（选中且禁用） (颜色)
• 文本阴影颜色（选中且高亮） (颜色)
• 文本阴影偏移 (偏移)
• 文本转换 (文本转换)
• 标题内边距 (盒子)
• 宽度 (数字)

控件

UI控件

• 背景颜色 (颜色)
• 背景图片 (图片)
• 边框颜色 (颜色)
• 边框宽度 (数字)
• 圆角半径 (数字)
• 阴影颜色 (颜色)
• 阴影偏移 (偏移量)
• 阴影不透明度 (数字)
• 阴影半径 (数字)

标签

UILabel

• 背景颜色 (颜色)
• 边框颜色 (颜色)
• 边框宽度 (数字)
• 圆角半径 (数字)
• 字体颜色 (颜色)
• 高亮字体颜色 (颜色)
• 字体名称 (字体名)
• 字体大小 (数字)
• 高度 (数字)
• 阴影颜色 (颜色)
• 阴影偏移 (偏移量)
• 阴影不透明度 (数字)
• 阴影半径 (数字)
• 文本对齐 (文本对齐方式)
• 文本透明度 (数字)
• 文本自动适应 (布尔值)
• 文本行数限制 (整数)
• 文本阴影颜色 (颜色)
• 文本阴影偏移 (偏移)
• 文本转换 (文本转换方式)
• 宽度 (数字)

导航栏

导航栏

• 栏颜色 (颜色)
• 背景颜色 (颜色)
• 背景颜色顶部/背景颜色底部 (渐变)
• 背景图片 (图片)
• 背景图片边距 (盒子)
• 背景着色颜色 (颜色)
• 字体颜色 (颜色)
• 字体名称 (字体名称)
• 字体大小 (数字)
• 阴影图像 (Image)
• 文本阴影颜色 (Color)
• 文本阴影偏移 (Offset)
• 标题垂直偏移 (Number)

页面控件

UIPageControl

• color (Color) pageIndicatorTintColor
• 当前颜色 (Color) currentPageIndicatorTintColor

进度

UIProgressView

• 进度图像 (Image)
• 进度着色颜色 (Color)
• 轨道图像 (Image)
• 轨道着色颜色 (Color)
• 宽度 (数字)

搜索栏

UISearchBar

• 背景颜色 (Color)
• 背景颜色顶部/背景颜色底部 (Gradient)
• 背景图像 (Image)
• 背景着色颜色 (Color)
• scope-background-color (颜色)
• scope-background-image (图片)

SearchBarButton

UISearchBar 按钮，继承自 BarButton

查看按钮

搜索栏范围栏

UISearchBar 范围条，继承自 SegmentedControl

查看分段控制器

分段控制器

UISegmentedControl

• 背景颜色 (颜色)
• 选中背景颜色 (颜色)
• 背景图片 (图片)
• 背景图片边距 (盒子)
• 选中背景图片 (图片)
• 选中背景图片边距 (盒子)
• 背景遮罩颜色 (颜色)
• 边框颜色 (颜色)
• 边框宽度 (数字)
• 角半径 (数字)
• 分割线颜色 (颜色)
• 分割线图片 (图片)
• 字体颜色 (颜色)
• 选中字体颜色 (颜色)
• 字体名称 (字体名)
• 字体大小 (数字)
• 文本阴影颜色 (颜色)
• 选中文本阴影颜色 (颜色)
• 文本阴影偏移 (偏移)
• 选中文本阴影偏移 (偏移)

滑块

UISlider

• 最小值轨迹颜色 (颜色)
• 最大值轨迹颜色 (颜色)
• 最小值图片 (图片)
• 最大值图片 (图片)
• 滑块图片 (图片)
• 滑块颜色 (颜色)

开关

UISwitch

• 背景颜色 (颜色)
• 关闭状态图片 (图片)
• 关闭状态图片内边距 (盒子)
• 开启状态图片 (图片)
• 开启状态图片内边距 (盒子)
• 开启状态色调颜色 (颜色)
• 滑块颜色 (颜色)
• 色调颜色 (颜色)

标签栏

UITabBar

• 栏色调颜色 (颜色)
• 背景颜色 (颜色)
• 顶部/底部背景颜色 (渐变)
• 背景图片 (图片)
• 背景图片内边距 (盒子)
• 背景色调颜色 (颜色)
• 选中图片 (图片)
• 选中图片色调颜色 (颜色)

标签栏项

UITabBarItem

• 选中背景图片 (图片)
• 选中背景图片内边距 (框)
• 完成图片 (图片)
• 选中完成图片 (图片)
• 字体颜色 (颜色)
• 选中字体颜色 (颜色)
• 字体名称 (字体名称)
• 字体大小 (数字)
• 文字偏移 (偏移)
• 文字阴影颜色 (颜色)
• 文字阴影偏移 (偏移)

表格

UITableView

• 背景颜色 (颜色)
• 顶部背景色/底部背景色 (渐变)
• 行高 (数字)
• 分隔线颜色 (颜色)
• 分隔线样式 (分隔线样式)

表格单元格

UITableViewCell

• tint-color (颜色)
• background-color (颜色)
• background-color-top/background-color-bottom (渐变)
• background-color-selected (颜色)
• background-color-top-selected/background-color-bottom-selected (渐变)
• font-color (颜色)
• font-color-highlighted (颜色)
• font-name (字体名称)
• font-size (数字)
• text-align (文本对齐)
• text-alpha (数字)
• text-auto-fit (布尔值)
• text-shadow-color (颜色)
• text-shadow-offset (偏移量)

TableCellContentView

UITableViewCell 的内容视图

• UIView 支持的所有属性

TableCellDetail

UITableViewCell 的详情标签

• 字体颜色 (Color)
• 字体颜色-高亮 (Color)
• 字体名称 (FontName)
• 字体大小 (Number)
• 文本对齐 (TextAlign)
• 文本透明度 (Number)
• 文本自动适应 (Boolean)
• 文本阴影颜色 (Color)
• 文本阴影偏移 (Offset)

工具栏

UIToolbar

• 背景颜色 (Color)
• 顶部背景图片 (Image)
• 底部背景图片 (Image)
• 横屏顶部背景图片 (Image)
• 横屏底部背景图片 (Image)
• 背景色调 (Color)
• 阴影图片 (Image)
• 顶部阴影图片 (Image)
• 底部阴影图片 (Image)

文本框

UITextField

• 背景颜色 (Color)
• 背景图片 (Image)
• 背景图片内边距 (Box)
• 边框颜色 (Color)
• 边框样式 (BorderStyle)
• 边框宽度 (Number)
• 圆角半径 (Number)
• 文本对齐 (TextAlign)
• 文本透明度 (Number)
• 自动调整文本 (Boolean)
• 字体颜色 (Color)
• 字体名称 (FontName)
• 字体大小 (Number)
• 高度 (数字)
• 内边距 (盒子)
• 阴影颜色 (Color)
• 阴影偏移 (Offset)
• 阴影不透明度 (Number)
• 阴影半径 (Number)
• 色调颜色 (Color)
• 垂直对齐 (VerticalAlign)
• 水平对齐 (HorizontalAlign)
• 宽度 (数字)
• 键盘外观 (KeyboardAppearance)

文本视图

UITextView

• 字体颜色 (Color)
• 字体名称 (FontName)
• 字体大小 (Number)
• 内边距 (盒子)
• 键盘外观 (KeyboardAppearance)
• UIView 支持的所有其他属性

视图

UIView

• 背景颜色 (颜色)
• 背景图像 (图像)
• 边框颜色 (颜色)
• 边框宽度 (数字)
• 圆角半径 (数字)
• 高度 (数字)
• 阴影颜色 (颜色)
• 阴影偏移 (偏移)
• 阴影不透明度 (数字)
• 阴影半径 (数字)
• 宽度 (数字)

窗口

UIWindow

• 背景颜色 (颜色)

样式值类型

• 布尔值 - 一个布尔值（ true 或 false ）
• 边框样式 - 边框样式，由 UITextBorderStyle 渲染。可接受的值为 none、line、bezel 和 rounded。
• 盒子 - 一系列 1 到 4 个整数，指定盒子边缘的宽度。解释方式类似于 CSS 的 padding 和 margin 属性（上、右、下、左）。示例：15（每个边缘宽度为 15 的盒子）、10 15（上下边宽为 10，左右边宽为 15 的盒子）
• 颜色 - 十六进制颜色（例如 #FF0000）；rgb、rgba、hsl 或 hsla 表达式（例如 rgb(255,0,0) 或 hsla(0.5, 0, 1.0, 0.5)）；或 UIColor 有相关方法名的颜色名称（例如 red、yellow、clear）。如果 [UIColor redColor] 被支持，则 red 也被支持。
• 字体名称 - 字体名称。可用值见 此处。也可以是以下之一：
  • system
  • boldSystem
  • italicSystem
  • blackSystem
  • heavySystem
  • lightSystem
  • mediumSystem
  • semiboldSystem
  • thinSystem
  • ultraLightSystem
• 渐变 - 两种颜色，用于创建垂直渐变。background-color-top 和 background-color-bottom 需要在单独的 .nss 属性中定义。
• 图片 - 图片名称，用于 [UIImage imageNamed:name]（例如 MyImage.png）。
• Number - A number (e.g. -1, 4.5)
• 偏移量 - 由水平和垂直值组成的两个数字的偏移量（例如 -1,1）
• 分隔符样式 - 分隔符样式，由 UITableViewSeparatorStyle 渲染。可接受的值为 none、single-line 和 single-line-etched。
• 文本对齐 - 文本对齐（例如 left、right、center）
• 文本转换 - 文本转换（例如 uppercase、lowercase、capitalize、none）
• 垂直对齐 - 垂直对齐（例如 top、center、bottom、fill）
• 键盘外观 - 键盘外观（例如 default、dark、light、alert）

常见问题

我如何能够贡献？

贡献者非常受欢迎！NUI 覆盖了很多内容，但仍有一些元素和属性尚不被支持。添加对新属性的支持很容易（请参考 NUIButtonRenderer 作为示例）。在 Roadmap 上，还有一些令人兴奋的大功能等待实现。我们也一直在寻找新的主题，所以你也可以随意添加它们！

与 UIAppearance 相比，这有什么优势？

UIAppearance 还可以，但它不直观、耗时，并且不支持 NUI 所具有的样式修改的细粒度和数量。样式应该在一个简单的样式表中抽象，并使用简单的属性定义；你不应该每次想进行小的样式修改时都需要盯着长长的嵌套方法调用，并翻阅 Apple 的文档。

我有一个使用 NUI 的应用；我可以在这里添加链接吗？

当然！可以随意将其添加到 Apps Using NUI。

你知道 Pixate 吗？

知道！什么时候会推出目前不明确，它很可能不会免费，产品的质量还有待评判。我更喜欢免费、轻量的方案。

“ NUI ” 怎么发音？

“New-ee”。（当然，它与“GUI”押韵。）

许可证

NUI 在 MIT 许可证下发布。详情请参阅 LICENSE 文件。