iOS7用户界面过渡指南

iOS 7用户界面过渡指南 开始之前的工作 iOS 7 用户界面过渡指南 目录 了解 app 的特征 过渡工作的范围 支持 iOS 6 系统 UI 上的更新 布局和外观 ( Layout & Appearance ) 操作栏和栏上按钮 ( Bars & Bar Buttons ) 内容视图 ( Content View ) 控件（Controls ) 临时视图 ( Temporary Views ) 文档修订历史 04 05 07 09 13 14 17 24 32 40 43 搜狐无线 04 Copyright © 2013 Apple Inc. MUED 翻译 iOS 7 用户界面过渡指南 开始之前的工作 iOS7 引入了许多用户界面上的改变，比如无边框的按钮，透明操作栏，全屏视图控制器布局。使用 Xcode 5 可以创建 iOS7 项目，并使用模拟器一窥 iOS7 用户界面的变化。 例如，示例程序 TheElement 在 iOS6 和 iOS7 模拟器上分别看起来分别是这样的。 对于这样结构的程序，你甚至不用更新你的应用程序代码，但在开始之前还是有几件事要考虑一下。当你使用 内置的应用程序时，你会感觉到 iOS 7 的变化既微妙又深刻。熟悉的 UI 元素非常易于辨认，但它们看起来和 原来变化很大。接近真实的虚拟触摸变得更加柔和精妙，同时动态效果的真实性得到了增强。 iOS7 模拟器上的样子 iOS6 模拟器上的样子 注意：iOS 7 beta2 现已发布，支持 iPad 05 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 注意：iOS 7 上所有的 UI 元素看起来和原来区别很大，并且提供了许多新功能，但是你所熟悉的 UIKit API 基本上没有变化太多。 随着你探索的深入，会认识到 iOS 7 的主题： • 顺从。界面的作用是帮助用户理解内容、和内容交互，而不是与内容竞争。 • 明晰。每个字号的字体都清晰可辨，icon 精确易懂，装饰元素恰如其分，对于功能的精确聚焦是驱动力。 • 深度。通过可视化的层、逼真的动画，加深用户的愉悦和理解。 因为 iOS 体验发生了本质而普遍的变化，iOS 7 为大家提供了一个珍贵的机会：重新审视你的 app 的核心目的 是什么，为用户提供什么样的功能。尽管你现在可能还没准备好利用这个机会，当你将 app 适配到 iOS 7 的时 候，请记住这一点。（当你准备好重新审视你的 app 设计或者开始一个新项目的时候，请参阅“Designing for iOS 7”） 了解 app 的特征 不论你准备重新设计 app，或者只是改进设计，你都需要知道你的 app 的特质会对重新设计过程产生影响。首 先请自问如下 2 个问题，它们能帮助你思考过渡的策略： • 你使用 Auto Layout 来设计 app 了吗？ 如果你使用了 Auto Layout 来布局的话，你的工作量就少了很多。在 Xcode 5 中，Auto Layout 会帮助 app 自动调整新的 UI 元素度量，并且自动对字号进行动态调整。Auto Layout 对你从 iOS 6 升级到 iOS 7， 和同时支持两个版本操作系统非常有帮助。 如果你没有使用 Auto Layout，现在开始学着使用吧，特别是当你需要支持 app 的多个版本的时候。如果 使用手动布局或者区分性布局技术的话会比较麻烦，就需要时刻考虑确保字号改变的时候造成的布局变化 是否合适。 • 你的 app 需要支持 iOS 6 吗？ 记住很多 iOS 用户很可能在较短时间内升级他们的设备到 iOS 7, 他们不希望看到自己喜欢的 app 在 iOS 7 上现得糟糕。 你也可能出于商业原因需要考虑对 iOS 6 的支持，这时最佳的方案仍然是将 app 先升级到支持 iOS 7，然 后尽可能地去将设计的变化运用到 app 的 iOS 6 版本。这个过程的处理细节请参考“支持 iOS 6 系统”（第 9 页）。 06 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 接下来要检查 app 是依照什么样的方式定制的。不同定制方式影响了工作量。 定制分为三种类型： • 型（Standard）：app 中只包含了 UIKit 中所提供的标准 UI 元素。 • 自定义型（Custom）：app 中完全使用了 UIKit 中没有的自定义 UI 元素。 • 混合型（Hybrid）：既使用了标准元素，也用了自定义元素（包括使用 UIKit 着色和外表自定义 API 定制 的自定义标准元素）。 对标准型 app。需要确认视觉和交互设计在 iOS 7 环境下时是否依然合适。如果你决定保持原有的布局和交互 方式，主要的工作就是进行微调，确保 app 可以正常处理系统全局的手势。 自定义型。这对工作量要求就比较高了。如果当前的 UI 和体验依然合适的话，那要做的事情还不算多。相反， 如果 app 的个性和体验与 iOS 7 相差迥异，那为了迎合用户的习惯，你可能就需要做比较多的工作了。 混合型。根据其使用自定义控件的多少与其和标准控件绑定情况不同，工作量也有所区别。重新审视混合型 app 的时候，还要确保自定义部分和标准部分依然可以一起正常工作。 注意：如果你的 app 以自定义的方式模拟了 iOS 6 的传统 UI，那就会需要花大力气修改了，否则它 会看起来非常陈旧。 07 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 过渡工作的范围 了解你的 app 特征及其定制方式，能让你大概知道怎么进行过渡。参考下面的清单，填充上自己项目的细节， 来了解整个过渡工作的范围。 强制每个 app 做的事情 √ 更新 app 的 icon，在 iOS 7 中，app 的图标尺寸是 120 x 120 像素（高分辨率下）。 √ 更新 app 的载入图像，如果原有的载入图像中不包含顶栏部分的话，补充上状态栏部分的图像。 √ 请支持 Retina 屏和 iPhone 5 的屏幕尺寸。（译者注：不支持就不能更新了） 建议每个 app 做的事情 √ 确保 app 的内容在透明 UI 元素（比如透明的 bar 和透明键盘）和透明的系统状态栏下依然可辨识。在 iOS 7 中，视图控制器统一采用了全屏视图（参考第 14 页“使用视图控制器”）。 √ 重新设计自定义 bar 的 icon。iOS 7 下，bar 上的按钮图标更加轻巧，风格也有变化。 √ 拿掉按钮的背景图片， 重新审视现有的按钮外观，尝试无边框的按钮。 √ 检 查 app 中 写 死 的 UI 数 值， 比 如 size 和 position， 用 系 统 提 供 的 动 态 数 值 替 换 它 们。 使 用 Auto Layout 帮助你的 app 完成相应布局变化下的响应。（如果你这个菜鸟连 Auto Layout 都不知道是什么的话， 请自行阅读 Cocoa Auto Layout Guide） √ 检查 app 中使用 UIKit 的地方，看尺寸和风格发生变化的控制器和视图是否对布局和外观产生了影响。比如， 开关更加宽了，组合式表格（grouped tables）变成通栏的了，进度指示条变成了非常细的小条。更详细 的 UI 元素变化，请参考 17 页的“操作栏和栏上的按钮”，第 32 页的“控件”，第 24 页的“内容视图”， 第 32 页的“临时视图”。 √ 使用动态的字体。在 iOS 7 中，用户可以自由调整 app 中的字号大小。如果开发者使用动态字体的话，用 户在系统中设定自定义字号的时候，app 的字体也会发生相应的变化。更多信息请参考 16 页的“使用字体”。 √ 确保你的 app 不会与系统的新增手势产生冲突：从屏幕底部向上滑动调出控制中心的手势，从屏幕左右边 缘向中间滑动的前进后退手势。 08 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 √ app 样式中慎用投影、渐变、浮雕效果。因为 iOS 7 的美学重视平缓、分层——尽量少使用让 UI 元素看 起来拟实的视觉效果。 √ 必要的话，将 app 升级到 iOS 6 中推荐的最佳实践方法（如：Auto Layout 和故事板）并确保 app 不使用 废弃的 API。 现在你知道你需要做哪类事情了，了解更多关于视图控制器、着色、字体的改变，请阅读第14页的“布局和外观”。 如果你仍需支持 iOS6 如果你必须支持 iOS 6 和 7 两个系统，你可以在 app 运行的时候检测操作系统的版本，并随时加载相应的资 源文件。更多信息请参考第 9 页的“支持 iOS 6 系统”。 09 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 支持 iOS 6 系统 如果出于商业原因必须支持 iOS 6 或者更早期的系统版本，你需要选择最切合实际的方式升级 app 到支持 iOS 7。你选择的技术可能有所不同，但总的建议是：聚焦在首先为 iOS 7 而重新设计，然后为 app 考虑 iOS 6 版 本需要做的事情。 注意：在运行 iOS 7 的设备上，所有的系统界面元素（比如警告对话框和通知信息）都会使用 iOS 7 的默认外观，即使你的 app 使用更早期的外观。 使用 Interface Builder 支持 app 多版本 Xcode 5 中的 Interface Builder 包含了诸多新功能 ，它们能帮助你将 app 过渡到 iOS 7 的同时支持旧的版本。 看一下你对用户界面的升级会对早期版本产生什么样的影响。使用 Assistant Editor，可以在画布上修改 iOS 7 故事板或 xib 文件的同时，看到这些变动会对 iOS 6 版本文件造成的影响。 预览早期故事板文件和 xib 文件的方法： 1. 在画布上查看 iOS 7 故事板文件或者 xib 文件的时候，打开 assistant editor。 2. 打开 Assistant 弹出菜单。 3. 在菜单中，定位到预览项，然后选中相应故事板文件或 xib 文件。 10 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 在 iOS 7 和早期版本 iOS 的 UI 预览之间切换。如果你的 app 需要支持 iOS 6.1 之前的版本，请使用这个功能 来确认 UI 在早期版本看起来没有问题。 在两个版本的 UI 之间切换的方法： 1. 在 Interface Builder 的检查器中打开文件。 2. 打开菜单“View as”。 3. 选择你想预览的版本号。 更多关于 Xcode 5 中新的 Interface Builder 的信息，请参考“What's New in Xcode”。 支持标准 app 的两个版本 如果标准 app 的两个版本使用相同的布局，使用 Auto Layout 创建适用于两个版本 iOS 的用户界面。要支持 多版本的 iOS，需指定单独一套的常量以便 Auto Layout 调整故事板和 xib 文件中的视图和控制器。（更多信 息参考“Constraints Express Relationships Between Views”） 如果标准 app 的两个版本需要使用相同的外观，但你又没有使用 Auto Layout，那么请使用 offsets 偏移量。 在使用 offsets 前请将 UI 升级到 iOS 7。接下来将早期 UI 元素的起始、高度、宽度的值指定为 iOS 7 中使用的 offsets 偏移量。 11 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 更多 Auto Layout 的内容，请看“Cocoa Auto Layout Guide”。 管理混合型 app 中的多个版本图片 混合型 app 经常包含自定义图片资源，比如操作栏按钮图标，操作栏或者其他控件的视图背景。apps 可以使 用一种或多种资源分类方法来管理这些资源。（了解更多资源分类资料，请看“Asset Catalog Help”） 注意：资源分类（asset catalog）包括显示在 app 中的资源；资源分类不能包含 app 的 icon，载入 图像，或者其他任何外部过程需要获取到的图片。 混合型 app 如果需要支持多版本 iOS，则必须自己管理图像资源。将 app 各个版本的图片分别使用不同命名。 如果你的故事板或 xib 文件包含嵌入式图片，考虑创建一个图片视图的出口（outlet），并在需要的时候加载 合适的资源。在代码中加载不同资源的方法，参考“Loading Resources Conditionally”。 依据附加条件加载资源 有时候，你需要考虑 app 在什么 iOS 版本上运行，才能在代码中做出相应的对策。比如，在不同版本的 app 中， 布局可能是截然不同的，可以通过加载不同的故事板或 xib 文件来实现。你可能需要使用不同代码来处理 API 之间的不同之处，比如在给操作栏背景着色的时候使用 barTintColor 还是 tintColor。 如果你需要为不同 app 版本加载不同的资源，但你只在 Info.plist 文件中指定了一个故事板或 xib 文件，那么 你也可以先检查系统版本然后加载对应的资源（application:didFinish-LaunchingWithOptions:） 检测 app 是否当前运行在 iOS 7 环境的方法是：写一个宏来检查系统版本。下面的代码展示了检查系统版本并 存储结果的方法（方便以后随时调用）。 NSUInteger DeviceSystemMajorVersion(); NSUInteger DeviceSystemMajorVersion() { static NSUInteger _deviceSystemMajorVersion = -1; 12 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ _deviceSystemMajorVersion = [[[[[UIDevice currentDevice] systemVersion] componentsSeparated ByString:@"."] objectAtIndex:0] intValue]; }); return _deviceSystemMajorVersion; } #define MY_MACRO_NAME (DeviceSystemMajorVersion() < 7) 13 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 UI 上的更新 • 布局和外观 （第 14 页） • 操作栏和栏上按钮 （第 17 页） • 内容视图 （第 24 页） • 控件 （第 32 页） • 临时视图 （第 40 页） 14 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 布局和外观（Layout & Appearance） iOS 7 给你的 app 布局和 UI 带来了不少变化。视图控制器、着色、字体效果等的变化，会影响你的 app 中所 有 UIKit 对象。 使用视图控制器（View Controller） 在 iOS 7 中，视图控制器都是全屏的。iOS 7 视图控制器的外观给人传达了更细腻的控制感。特别是新的全屏 外观让你可以指定视图的每个边缘的布局。 • 视图控制器接口 wantsFullScreenLayout 已作废。如果你像以前那样地指定 wantsFullScreenLayout = NO，iOS 7 中视图控制器会将其内容显示到一个意外的屏幕位置。 • UIViewController 提供了如下属性来调整视图控制器的外观： • edgesForExtendedLayout 这个属性属于 UIExtendedEdge 类型，它可以单独指定矩形的四条边，也可以 单独指定、指定全部、全部不指定。 使用 edgesForExtendedLayout 指定视图的哪条边需要扩展，不用 理会操作栏的透明度。这个属性的默认值是 UIRectEdgeAll。 • extendedLayoutIncludesOpaqueBars 如果你使用了不透明的操作栏，设置 edgesForExtendedLayout 的 时候也请将 extendedLayoutIncludesOpaqueBars 的值设置为 No（默认值是 YES）。 • automaticallyAdjustsScrollViewInsets 如果你不想让 scroll view 的内容自动调整，将这个属性设为 NO（默 认值 YES）。 • iOS 7 中，视图控制器支持自定义视图之间的过场动画。另外，你可以使用 iOS 7 的新 API 来支持过 场动画过程中的用户交互。更多信息请参考下面两个文档：《UIViewController 过场动画参考》和 《UIViewController 过场交互协议参考》。 重要：这是一份初步的 API 和开发技术文档。虽然经过技术精度的检查，但它不是最终版。这份机密文 档只允许 Apple 开发者联盟成员使用。苹果供应这些机密信息来帮助你将来需要采用的技术和编程 接口。这份文档的信息可能会改变，根据本文档实现的软件需要通过以最终版文档为准，并通过最终版 本的 iOS 7 的测试。最终的新版本的文档可能会提供新的 API 或技术。 15 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 iOS 7 允许视图控制器在 app 运行过程中改变系统状态栏的样式。开启这个功能，请在 Info.plist 文件中添加 键 UIViewControllerBasedStatusBarAppearance，并将值设为 YES。动态改变系统状态栏的一个好方法是重 写 preferredStatusBarStyle 方法，用一个动画模块来更新状态栏外观，并调用 setNeedsStatusBarAppearanc eUpdate 方法。 使用着色（Tint Color） 在 iOS 7 中，着色是 UIView 的一个属性。iOS 7 的 app 会使用着色来定义一个关键色，这个颜色表明“这里 是可交互的”，或者表示元素选中的状态。 当你指定某个视图的着色的时候，这个颜色会自动继承到所有的子视图中。因为 UIWindows 继承自 UIView， 你可以这样通过设置窗体的着色属性指定着色： window.tintColor = [UIColor purpleColor]; 如果不为窗体指定着色，则会使用系统默认的颜色。 默认情况下，视图的着色是 nil，意味着视图使用父级的着色。也就是说哪怕你不设置着色的话，视图也总能 够获取到一个色值。 总的来说，最好在视图还没有显示到屏幕上之前指定它的着色。想让视图继承上个层级的着色的话，就将着色 设置为 nil。 重要：iOS 7 不支持通过外观代理 API 来设置着色。 当警告框（alert）和上拉菜单（action sheet）出现的时候，iOS 7 自动将背后视图的着色变暗。为了响应该色 彩变化，在渲染时需要对使用 tintColor 的自定义视图的子类重写 tintColorDidChange 方法，以便在合适的时 候刷新渲染。 注意：在 iOS 6 中，tintColor 可以用来给导航栏的背景着色、tab 栏、工具栏、搜索栏、搜索栏的 范围选择栏着色。而在 iOS 7 中，给背景着色只需要使用 barTintColor 属性就可以了。 16 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 使用动态字体，同时意味着： • 所有文字的粗细，字间距，行高都将被自动调整。 • 可以语义上指定不同的文字样式：正文、脚注、大标题等等。 • 对动态字体和残障辅助超大号字体都能有很好的响应效果。 要享受动态字体的好处，请用 UIFont 类下的 preferredFontForTextStyle 方法来生成文字，而不是直接指定字 体的名称和大小。iOS 7 会保证每个大小字体的最佳可读性。 使用字体（Fonts） iOS 7 引入了动态字体（Dynamic Type），它让你的 app 中的字体显示更加出色。 最大非残障辅助字号下的邮件正文最小字号下的邮件正文 17 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 操作栏和栏上按钮（Bars & Bar Buttons） iOS 7 中，状态栏是透明的，其他的操作栏（导航栏、tab 栏、工具栏、搜索栏、搜索栏下面的范围选择栏） 是半透明的。通常情况下，你希望能看到你的内容出现在操作栏的背后。 大多数操作栏会将遮蔽住的内容进行模糊处理，除非你提供一张自定义背景图。 为了标识操作栏的位置，iOS 7 引入了 barPosition 属性，它可以帮助你指定什么时候自定义背景图片需要平 铺在状态栏上。值 UIBarPositionTopAttached 表明操作栏贴近屏幕顶部，背景向上延伸入系统状态栏区域。 相对的，值 UIBarPositionTop 表示操作栏位于当前局部内容的顶部（比如，在弹出式气泡的顶部）它不为状 态栏提供背景。 默认情况下，所有的栏上按钮都是无边框的。详情请看第 22 页的“栏上按钮”。 系统状态栏（Status Bar） 因为系统状态栏是透明的，所以可以透过它看到后面的视图。状态栏的风格依照它内容的外观呈现，包括时间、 电量、Wi-Fi 信号等。使用常量 UIStatusBarStyle 来指定使用黑色风格还是白色风格： • UIStatusBarStyleDefault 显示黑色的文字内容。当状态栏后面的内容是淡色的时候适合使用。 • UIStatusBarStyleLightContent 显示白色的文字内容。当状态栏后面的内容是深色时使用比较合适。 有些情况下，导航栏和搜索栏的背景图片可以向上延伸到状态栏背后（详情见 18 页的“导航栏”章节和 19 页 的“搜索栏和范围选择栏”章节）。如果状态栏下面没有其他栏，内容视图需要使用全屏高度。要了解视图控 制器是怎样恰当地布局的，请看 14 页的“使用视图控制器”。 18 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 在 iOS 7 中，通过独立的视图控制器，可以在 app 运行的时候改变状态栏的风格。实现方法是在 Info.plist 中 加入键 UIViewControllerBasedStatusBarAppearance，并设置值为 YES。 导航栏（Navigation Bar） 导航栏帮助用户在不同信息层次结构中穿梭，并选择性地管理屏幕内容。 * 如果想用自定义的图像来替换返回的箭头“<”的话，还需自己创建一个相应的遮罩。在导航过场动画的 时候，iOS 7 使用遮罩来让上个层级的标题渐隐渐出。了解更多返回按钮和遮罩图像的控制属性，请参阅 “UINavigationBar 类参考” 。 iOS 7 让在导航栏上增加搜索栏的变得非常简单。详情参考第 19 页的“搜索栏和范围选择栏”。 透明的白色主题（默认）和透明的 黑色主题。 默认情况下，透明度属性 translucent 的值是 YES。 底部边缘有一条 1 像素的细线。 使用 tintColor 给栏上按钮项目着色。 使用 barTintColor 给栏背景着色。 返回按钮是一个向左的箭头加上上层 页面的标题 * 不透明的渐变蓝色（默认）或者不透明 的黑色 默认情况下，透明属性 translucent 的 值是 NO 底部边缘有投影 使用 tintColor 给栏背景着色 返回按钮是带边框的按钮，上面的文字 显示上层页面的标题 操作栏风格 外观 着色 返回按钮 iOS 7 iOS 6 iOS 7 iOS 6 19 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 如果你使用 UIBarPositionTopAttached 样式创建了一个导航栏背景，确保图像包含了系统状态栏的区域。具 体来说，你需要一个高分辨率下 128 像素的图像。 下面这个表格描述了 iOS 7 如何对待不同高度的可变导航栏背景。（更多请看“UIImage 类参考”） 表格 5-1 可变大小的背景图片处理策略 避免使用超高的背景图片来制作导航栏下面的自定义投影，这种技术在 iOS 7 中不起作用，因为超高的图片会 向上（系统状态栏方向）扩展，而不是向下（导航栏下面）扩展。如果你想给导航栏增加投影，可以创建一个 自定义图片，然后使用 shadowImage 属性来自定义投影图片。 搜索栏和范围选择栏（Search Bar & Scope Bar） 搜索栏接收用户输入的文字，下方可以附带一个范围选择栏。 调整高度到适配（图片在垂直方向不平铺、 不拉伸） 如果使用 UIBarPositionTopAttached， 则在垂直方向拉伸到 128 像素；如果使 用 UIBarPositionTop，则拉伸到 88 像素水平方向适应性变化 水平方向拉伸到适配 如果使用 UIBarPositionTopAttached 或导 航控制器，则在垂直方向拉伸到 128 像素； 如果使用 UIBarPositionTop，则拉伸到 88 像素 水平方向适应性变化 如果使用了 UIBarPositionTopAttached 的话，黑色 如果使用 UIBarPositionTop 的话， 和窗体背景一致 操作栏背景决定 操作栏背景决定 操作栏背景决定 高度（高分辨 率下） 88 像素 小于 88 像素 128 像素 1 像素 iOS 7 iOS 6 20 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 如果你使用 UIBarPositionTopAttached 的位置为搜索栏创建了一个背景图片，请确保图片的高度包含了状态 栏的高度。如果你创建了一个可变大小的背景图片，参阅 15 页的表格 5-1 获取更多 iOS 7 调整背景图片大小 的策略。 在 iOS 7 中，UISearchDisplayController 包含了 displaySearchBarInNavigationBar 属性，这样你就可以将搜 索栏放进导航栏，就像日历 app 里面这样： 范围选择栏则允许用户选择搜索结果的范围。 注意：范围选择栏不能单独出现；必须依附在搜索栏下面出现。 透明的白色主题（默认）和透明的 黑色主题 默认情况下，透明度属性 translucent 的值是 YES 底部边缘有一条 1 像素的细线 使用 tintColor 给栏上按钮项目着色， 使用 barTintColor 给栏背景着色 不透明的渐变蓝色（默认）或者不透明 的黑色 默认情况下，透明属性 translucent 的 值是 NO 底部边缘有投影 使用 tintColor 给栏背景着色 操作栏风格 外观 着色 iOS 7 iOS 6 iOS 7 iOS 7 iOS 6 iOS 6 21 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 避免使用超高的背景图片来制作导航栏下面的自定义投影，这种技术在 iOS 7 中不起作用，因为超高的图片会 向上（系统状态栏方向）扩展，而不是向下（导航栏下面）扩展。如果你想给导航栏增加投影，可以创建一个 自定义图片，然后使用 shadowImage 属性来自定义投影图片。 透明的白色主题（默认）和透明的 黑色主题 默认情况下，透明度属性 translucent 的值是 YES 底部边缘有一条 1 像素的细线 使用 tintColor 给栏上按钮项目着色， 使用 barTintColor 给栏背景着色 不透明的渐变蓝色（默认）或者不透明 的黑色 默认情况下，透明属性 translucent 的 值是 NO 底部边缘有投影 使用 tintColor 给栏背景着色 操作栏风格 外观 着色 iOS 7 iOS 6 Tab 栏（Tab Bar） Tab 栏让用户可以在不同子任务、视图、模式之间切换。 透明的白色主题（默认）和透明的 黑色主题 默认情况下，透明度属性 translucent 的值是 YES 底部边缘有一条 1 像素的细线 使用 tintColor 给栏上按钮项目着色， 使用 barTintColor 给栏背景着色 不透明的渐变蓝色（默认）或者不透明 的黑色 默认情况下，透明属性 translucent 的 值是 NO 底部边缘有投影 使用 tintColor 给栏背景着色 操作栏风格 外观 着色 iOS 7 iOS 6 iOS 7 iOS 6 22 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 工具栏（Toolbar） 工具栏上放置当前屏幕或者视图下相关对象的操作按钮。 如果你创建了可变大小的背景图片，请参考 19 页的表格 5-1 获取 iOS 7 处理不同尺寸图片的细节。 栏上按钮（Bar Buttons） 在 iOS 6 中，栏上按钮可以是有边框的，也可以是无边框的。在 iOS 7 中只能是无边框的。 透明的白色主题（默认）和透明的 黑色主题 默认情况下，透明度属性 translucent 的值是 YES 底部边缘有一条 1 像素的细线 使用 tintColor 给栏上按钮项目着色， 使用 barTintColor 给栏背景着色 常量 UIToolbarPosition 被弃用； 使用 UIBarPosition 常量代替 不透明的渐变蓝色（默认）或者不透明 的黑色 默认情况下，透明属性 translucent 的 值是 NO 底部边缘有投影 使用 tintColor 给栏背景着色 - 操作栏风格 外观 着色 相关信息 iOS 7 iOS 6 iOS 7 中的导航栏按钮 iOS 6 中的导航栏按钮 为了更加明确，在 iOS 7 中，app 的栏上按钮经常使用文字而不是图形。例如，iOS 7 中的日历应用使用了 Inbox（收件箱）代替了收件箱图形： iOS 7 iOS 6 23 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 在早期版本的 iOS 中，自定义栏上按钮图片会自动被当做“template image”。（template image 被用作 最终图像的一个遮罩。）而 iOS 7 中，你可以使用以下 UIImage 属性来指定是否需要把自定义的图片当做 template image 来处理： • UIImageRenderingModeAlwaysTemplate. 图片被用作 Template Image。 • UIImageRenderingModeAlwaysOriginal. 图片按照原样渲染。 如果你没有指定对图片的处理方法的话，会使用包含这张图片的视图的默认处理方式。比如，tab 栏默认会使 用 template 处理方式，而进度滑块则会使用原样完整渲染的处理方式。 注意：template image 会依照其父结构的着色进行着色（更多请看 15 页的“使用着色”）。如果 不想让栏上的元素被着色，为图片设置 UIImageRendering-ModeAlwaysOriginal 属性。 iOS 7 iOS 6 24 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 内容视图（Content View） 内容视图用来显示自定义的 app 内容。因为大多数内容视图的外观系统都没有提供，所以 iOS 7 视觉上的变化 对他们几乎没有影响。有个比较大的例外是分组聚合表格视图，它在 iOS 7 上外观有巨大的变化。 活动菜单（Activity） 活动菜单代表了一个可以响应当前选择内容的功能，它可以是系统提供的或者自定义的。用户可以通过系统提 供的活动视图控制器来使用这些功能，当用户点击分享按钮的时候，活动视图控制器就会从屏幕底部向上升起。 系统提供的活动菜单中可以提供两种风格的按钮： • 原样渲染的 app 图标——比如下面这个邮件的 icon • 和 tab 栏上的按钮一样的风格——比如下面复制、打印这样的 icon 25 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 第三方功能总是使用第二种风格的 icon。 如果要在你的 app 中提供某个服务，创建一个简洁、线框状的 template image。创建 template image 的时候 请遵守下述指导原则： • 使用黑色或者白色，配合适当的 alpha 透明度 • 不要使用投影 • 使用抗锯齿效果 活动菜单上的 template image 应该在区域中居中，分辨率大约在 70 x 70 像素左右。 26 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 集合视图（Collection View） 集合视图用来管理和有序排列项目，将它们以可定制的布局进行呈现。 在 iOS 7 中，集合视图支持自定义过场动画。了解更多请参考“UICollectionViewTransitionLayout 类参考”。 照片应用使用了集合视图来展示图片集，并支持他们之间的过场动画。 图片视图（Image View） 图片视图显示一张图片或者一系列动态的图片。 在 iOS 7 中，UIImageView 包含了着色属性 tintColor。当图片视图包含 template image 的时候，tintColor 会 被应用到图片上。 27 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 地图视图（Map View） 地图视图展示地理数据，支持自带地图应用的大多数功能。 照片应用中的地图视图帮助用户查看照片的地理位置信息。 在 iOS 7，只能够使用一个新的类 MKOverlayRenderer 来在地图视图上面创建覆盖层。 如果要给地图视图增加 3D 外观的话，只需给它的 camera 属性分配一个相机对象即可（MKMapCamera 的一 个实例）。要了解更多，参考“MKMapView 类参考”。 页面视图控制器（Page View Controller） 页面视图控制器用来管理多页的内容，可以使用滚动过场，也可以使用卷页过场动画。 28 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 在 iOS 7 中，使用两个方法来分别指定（pageViewControllerPreferredInterfaceOrientationForPresentation 和 pageViewControllerSupportedInterfaceOrientations）。 下面可以看到 iOS 7 模拟器中页面视图控制器的默认外观： 滚动视图（Scroll View） 滚动视图帮助用户查看超出视图边界的内容。滚动视图在 iOS 6 和 7 上视觉唯一的不同是滚动条的外观。 29 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 在 iOS 7 上，你可以通过 UIViewController 的 automaticallyAdjustsScrollViewInsets 属性来管理滚动视图的项 目分组之间的间隔。 表格视图（Table View） 表格视图将数据以多行单列的列表呈现。 iOS 7 为单行和成组的表格视图引入了新的变化。 iOS 7 iOS 6 30 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 分割栏（单行和成组两种样式） 区域引导符（平面样式） 顶部和尾部文字（两种样式） 分隔栏变细了，更窄，颜色更浅 默认情况下，当表格呈现文字的时候，分隔栏从表格的左边缘插入 默认情况下，区域引导符包括一个透明的白色背景 （可以使用 sectionIndexBackgroundColor 属性来指定别的颜色） 默认情况下，头部文字显示区域会使用大写字母；尾部文字区域会使 用句首字母大写 你可以使用对象 UITableViewHeaderFooterView 改变成不同样式 特征 iOS 7 上的外观 iOS 7（表格组） iOS 6（表格组） 31 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 单元格组（成组风格） 单元格选中样式 背景样式（成组风格） 勾选 展开指示器 详情展开按钮 行排序 行插入 删除按钮控制器 删除按钮 每组单元格都会通栏扩展到屏幕宽度 内容不反色，背景有轻微的灰色变化 背景是浅灰实色 特征 表格视图元素 iOS 7 上的外观 iOS 7 的样式 iOS 6 的样式 表格视图中的元素在 iOS 7 中也有了不同的样式。 文本视图（Text View） 文本视图接受和显示多行文本。 请使用 UIFont 类的 preferredFontForTextStyle 方法获取文本视图中显示的文字内容。 网页视图（Web View） 网页视图是可以显示富 HTML 内容的区域。 在 iOS 7 中，UIWebView 支持显示分页外观的内容的显示。 32 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 控件（Controls） 控件是种特殊的 UI 元素，用户既可以看（获取信息）也可以与之交互（操作它）。所有的 iOS 7 控件的外观 都得到了升级，它们大多数都有了新的尺寸。 因为 UIControl 是从 UIView 继承而来，你可以使用控件的 tintColor 属性来为它们着色。更多内容请参阅第 15 页的“使用着色”。 系统提供的控件默认支持系统定义的动效，外观也会随着高亮和选中状态的变化而变化。 日期拾取器（Date Picker） 日期拾取器显示了日期和时间的内容，包括：分钟，小时，日期，年份。它的整体尺寸和 iOS 6 比起来没有变化， 但是外观发生了巨大的变化。 iOS 7 iOS 6 33 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 iOS 7 的 app 会将日期拾取器嵌入到内容中，而不是单独呈现在一个弹出的视图上。比如日历应用动态地将表 格的一行扩展开，将日期拾取器嵌入，用户指定时间的时候就不需要离开当前这个添加事项视图。 新增联系人按钮（Contact Add Button） 新增联系人按钮是一个 UIButtonTypeContactAdd 类型的 UIButton，它可以将用户的信息添加到其他基于文字 视图的文字域中。 新增联系人按钮的大小和外观在 iOS 7 中有变化。 iOS 7 iOS 6 34 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 细节展开按钮（Detail Disclosure Button） 细节展开按钮是一个 UIButtonTypeDetailDisclosure 类型的 UIButton，它表明当前项目还有额外的细节和相关 功能，点击后会在另一个表格或视图中呈现。在 iOS 7 中，细节展开按钮使用和 Info 按钮一样的符号。 当细节展开按钮出现在表格的一行中，点击该行的其它地方不会激活该按钮；相反地，这个操作会选中该行， 或者触发 app 定义的行为。 Info 按钮（Info Button） Info 按钮的类型是 UIButtonTypeInfoLight 或者 UIButtonTypeInfoDark。它表明 app 的配置细节入口，新页面 有时候出现在当前视图的背面。在 iOS 7 中，info 按钮使用和细节展开按钮相同的图形。 在 iOS 7 中，info 按钮的大小和外观发生了变化。 iOS 7 iOS 6 文本标签（Label） 文本标签用来呈现静态文本。 默认情况下，文本标签会使用系统字体，所以在 iOS 6 和 7 上会看起来不一样。 iOS 7 iOS 7 iOS 6（天气应用中的） iOS 6 35 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 确保使用 UIFont 的方法 preferredFontForTextStyle 来获取显示在标签上的文字。 页码控件（Page Control） 页码控件指示打开了多少视图，当前看到的是哪一个。 iOS 7 中，页码控件的大小和外观发生了变化。 iOS 7 iOS 6 iOS 6（天气应用中的）iOS 7（天气应用中的） 拾取器（Picker） 拾取器显示一系列值，用户可以滚动并选择其一。 拾取器的总体大小相比 iOS 6 没有变化；外观和行为与日期时间拾取器是一致的。 进度视图（Progress View） 进度视图用来展示任务和过程的进度。 36 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 进度视图的大小和外观（下图是在自带邮件客户端中的）在 iOS 7 中发生了变化。 如果你现在习惯于使用 trackTintColor 属性来制定进度条的着色，在 iOS 7 中依然起效。如果你将 trackTint- Color 设置为 nil，则滚动条会使用父级的着色。 iOS 7 iOS 6 刷新控件（Refresh Control） 刷新控件响应用户主动触发的刷新操作，一般会出现在表格上。 它的大小和外观在 iOS 7 中发生了变化。 圆角矩形按钮（Rounded Rectangle Button） 圆角矩形按钮在 iOS 7 中被弃用了。用系统的无边界按钮替代它。对应的类型是 UIButtonTypeSystem 的 UIButton。 iOS 7 系统按钮不包括倒角和背景样式。系统按钮可以包含一个图形或者文字信息，可以指定一种着色或者继 承父级的着色。 iOS 7 iOS 6 37 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 iOS 7 系统按钮 iOS 6 的圆角矩形按钮 在 iOS 7 中，分段控件使用单一的样式，segmentedControlStyle 属性不再使用。 滑动器（Slider） 滑动器让用户可以在允许的范围内连续调整某个值。 在 iOS 7 中的大小和样式如下。 iOS 7 iOS 6 如果你需要显示一个包含倒角的按钮，使用 UIButtonTypeCustom 类型的按钮，这个类型支持自定义背景图片。 分段控件（Segmented Control） 分段控件是由一系列分段构成的，每个段的功能相当于一个按钮，每个按钮点击后都展示一个不同的视图。 分段控件的大小和样式在 iOS 7 中的变化如下。 注意：在 iOS 7 中，UIButtonTypeRoundedRect 被重新定义成 UIButtonType-System。在 iOS 6 中 使用圆角矩形按钮的 app 会自动转化成系统按钮的外观。 iOS 7 iOS 6 38 Copyright © 2013 Apple Inc. 搜狐无线 MUED 翻译 iOS 7 用户界面过渡指南 iOS 7 中依然可以对最小和最大轨道图像按下状态使用着色，使用三个属性来操作（minimumTrackTintColor， maximumTrackTintColor 和 thumbTintC