iOS7过渡指南

iOS 7⽤用户界⾯面过渡指南 （中⽂文翻译版） 搜狐⽆无线MUED 译 iOS 7⽤用户界⾯面过渡指南 1 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 ⺫⽬目录 过渡前的准备! 3 开始之前的⼯工作! 3 了解app的特征! 4 过渡⼯工作的范围! 6 ⽀支持iOS 6系统! 7 UI上的更新! 10 布局和外观（Layout & Appearance）! 11 使⽤用视图控制器（View Controller）! 11 使⽤用着⾊色（Tint Color）! 11 操作栏和栏上按钮（Bars & Bar Buttons）! 14 内容视图（Content View）! 19 控件（Controls）! 26 临时视图（Temporary Views）! 32 ⽂文档修订历史! 35 iOS 7⽤用户界⾯面过渡指南 2 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 过渡前的准备 重要：由于iOS7还未最终发布，该⽂文档的部分内容还会继续修改。 开始之前的⼯工作 iOS 7引⼊入了许多⽤用户界⾯面上的改变，⽐比如⽆无边框的按钮，透明操作栏，全屏视图控制器布 局。使⽤用Xcode 5可以创建iOS 7项⺫⽬目，并使⽤用模拟器⼀一窥iOS 7⽤用户界⾯面的变化。 例如，⽰示例程序TheElement在iOS6和iOS7模拟器上分别看起来分别是这样的。 iOS7模拟器上的样⼦子 iOS6模拟器上的样⼦子 注意：iOS 7 beta2 现已发布，⽀支持iPad 对于这样结构的程序，你甚⾄至不⽤用更新你的应⽤用程序，但在开始之前还是有⼏几件事要考虑⼀一 下。当你操作内置的应⽤用程序时，你会感觉到iOS 7的变化既微妙⼜又深刻。熟悉的UI元素⾮非 常易于辨认，但它们看起来和原来变化很⼤大。接近真实的虚拟触摸变得更加柔和精妙，同时 动态效果的真实性得到了增强。 注意：iOS 7上所有的UI元素看起来和原来区别很⼤大，并且提供了许多新功 能，但是你所熟悉的UIKit API基本上没有变化太多。 iOS 7⽤用户界⾯面过渡指南 3 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 随着你探索的深⼊入，会认识到iOS 7的主要主题： 1. 顺从。界⾯面的作⽤用是帮助⽤用户理解内容、和内容交互，⽽而不是与内容竞争。 2. 明晰。每个字号的字体都清晰可辨，icon精确易懂，装饰元素恰如其分，对于功能的精 确聚焦是驱动⼒力。 3. 深度。通过可视化的层、逼真的动画，加深⽤用户的愉悦和理解。 因为iOS体验发⽣生了根本⽽而普遍的变化，iOS 7为⼤大家提供了⼀一个珍贵的机会：重新审视你 的app的核⼼心⺫⽬目的是什么，为⽤用户提供什么样的功能。尽管你现在可能还没准备好利⽤用这个 机会，当你将app适配到iOS 7的时候，请记住这⼀一点。（当你准备好重新审视你的app设计 或者开始⼀一个新项⺫⽬目的时候，请参阅《Designing for iOS 7（为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系统”（第7⻚页）。 接下来要检查app是依照什么样的⽅方式定制的。不同定制⽅方式影响了⼯工作量。 定制分为三种类型： 型（Standard）：! app中只包含了UIKit中所提供的标准UI元素。 ⾃自定义型（Custom）：! app中完全使⽤用了UIKit中没有的⾃自定义UI元素。 混合型（Hybrid）：! 既使⽤用了标准元素，也⽤用了⾃自定义元素（包括使⽤用UIKit着⾊色和外 表⾃自定义API定制的⾃自定义的标准元素）。 对标准型app。需要确认视觉和交互设计在iOS 7环境下时是否依然合适。如果你决定保持 原有的布局和交互⽅方式，主要的⼯工作就是进⾏行微调，确保app可以正常处理系统全局的⼿手 势。 ⾃自定义型。这对⼯工作量要求就⽐比较⾼高了。如果当前的UI和体验依然合适的话，那要做的事情 还不算多。相反，如果app的个性和体验与iOS 7相差迥异，那为了迎合⽤用户的习惯，你可 能就需要做⽐比较多的⼯工作了。 iOS 7⽤用户界⾯面过渡指南 4 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 混合型。根据其使⽤用⾃自定义控件的多少与其和标准控件绑定情况不同，⼯工作量也有所区别。 重新审视混合型app的时候，还要确保⾃自定义部分和标准部分依然可以⼀一起正常⼯工作。 注意：如果你的app以⾃自定义的⽅方式模拟了iOS 6的传统UI，那就会需要花⼤大 ⼒力⽓气修改了，否则它会看起来⾮非常陈旧。 iOS 7⽤用户界⾯面过渡指南 5 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 过渡⼯工作的范围 了解你的app特征及其定制⽅方式，能让你⼤大概知道怎么进⾏行过渡。参考下⾯面的清单，填充上 ⾃自⼰己项⺫⽬目的细节，来了解整个过渡⼯工作的范围。 强制每个app做的事情 ✓更新app的icon，在iOS 7中，app的图标尺⼨寸是120 x 120像素（⾼高分辨率下）。 ✓更新app的载⼊入图像，如果原有的载⼊入图像中不包含顶栏部分的话，补充上状态栏部分的 图像。 ✓请⽀支持Retina屏和iPhone 5的屏幕尺⼨寸。（译者注：不⽀支持就不能更新了） 建议每个app做的事情 ✓确保app的内容在透明UI元素（⽐比如透明的bar和透明键盘）和透明的系统状态栏下依然可 辨识。在iOS 7中，视图控制器统⼀一采⽤用了全屏视图（参考第11⻚页“使⽤用视图控制器”）。 ✓重新设计⾃自定义bar的icon。iOS 7下，bar上的按钮图标更加轻巧，⻛风格也有变化。 ✓拿掉按钮的背景图⽚片， 重视现有的按钮外观，尝试⽆无边框的按钮。 ✓检查app中写死的UI数值，⽐比如size和position，⽤用系统提供的动态数值替换它们。使⽤用 Auto Layout帮助你的app完成相应布局变化下的响应。（如果你这个菜⻦鸟连Auto Layout都 不知道是什么的话，请⾃自⾏行阅读Cocoa Auto Layout Guide） ✓检查app中使⽤用UIKit的地⽅方，看尺度和⻛风格发⽣生变化的控制器和视图是否对布局和外观产 ⽣生了影响。⽐比如，开关更加宽了，组合式（grouped tables）变成通栏的了，进度指⽰示 条变成了⾮非常细的⼩小条。更详细的UI元素变化，请参考21⻚页的“操作栏和栏上的按钮”，第26 ⻚页的“控件”，第19⻚页的“内容视图”，第32⻚页的“临时视图”。 ✓使⽤用动态的字体。在iOS 7中，⽤用户可以⾃自由调整app中的字号⼤大⼩小。如果开发者使⽤用动态 字体的话，⽤用户在系统中设定⾃自定义字号的时候，app的字体也会发⽣生相应的变化。更多信 息请参考12⻚页的“使⽤用字体”。 ✓确保你的app不会与系统的新增⼿手势产⽣生冲突：从屏幕底部向上滑动调出控制中⼼心的⼿手 势，从屏幕左右边缘向中间滑动的前进后退⼿手势。 ✓app样式中慎⽤用投影、渐变、浮雕效果。因为iOS 7的美学重视平缓、分层——尽量少使⽤用 让UI元素看起来拟实的视觉效果。 ✓必要的话，将app升级到iOS 6中推荐的最佳实践⽅方法（如：Auto Layout和故事版）并确 保app不使⽤用废弃的API。 现在你知道你需要做哪类事情了，了解更多关于视图控制器、着⾊色、字体的改变，请阅读第 11⻚页的“布局和外观”。 如果你仍需⽀支持iOS6 如果你必须⽀支持iOS 6和7两个系统，你可以在app运⾏行的时候检测操作系统的版本，并随时 加载相应的资源⽂文件。更多信息请参考第7⻚页的“⽀支持iOS 6系统”。 iOS 7⽤用户界⾯面过渡指南 6 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 ⽀支持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⽂文件。 在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”。 iOS 7⽤用户界⾯面过渡指南 7 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 ⽀支持标准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偏移量。 更多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环境的⽅方法是：写⼀一个宏来检查系统版本。下⾯面的代码展⽰示 了检查系统版本并存储结果的⽅方法（⽅方便以后随时调⽤用）。 iOS 7⽤用户界⾯面过渡指南 8 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 NSUInteger DeviceSystemMajorVersion(); NSUInteger DeviceSystemMajorVersion() { static NSUInteger _deviceSystemMajorVersion = -1; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ _deviceSystemMajorVersion = [[[[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:@"."] objectAtIndex:0] intValue]; }); return _deviceSystemMajorVersion; } #define MY_MACRO_NAME (DeviceSystemMajorVersion() < 7) iOS 7⽤用户界⾯面过渡指南 9 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 UI上的更新 •布局和外观 （第11⻚页） •操作栏和栏上按钮 （第14⻚页） •内容视图 （第19⻚页） •控件 （第26⻚页） •临时视图 （第32⻚页） iOS 7⽤用户界⾯面过渡指南 10 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 布局和外观（Layout & Appearance） 重要：这是⼀一份初步的 API和开发技术⽂文档。虽然经过技术精度的检查，但它不是最终 版。这份机密⽂文档只允许Apple开发者联盟成员使⽤用。苹果供应这些机密信息来帮助你计 划将来需要采⽤用的技术和编程接⼝口。这份⽂文档的信息可能会改变，根据本⽂文档实现的软 件需要通过以最终版⽂文档为准，并通过最终版本的iOS 7的测试。最终的新版本的⽂文档可 能会提供新的API或技术。 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过场交互协议参考》。 iOS 7允许视图控制器在app运⾏行过程中改变系统状态栏的样式。开启这个功能，请在 Info.plist⽂文件中添加键UIViewControllerBasedStatusBarAppearance，并将值设为YES。动 态改变系统状态栏的⼀一个好⽅方法是重写preferredStatusBarStyle⽅方法，⽤用⼀一个动画模块来更 新状态栏外观，并调⽤用setNeedsStatusBarAppearanceUpdate⽅方法。 使⽤用着⾊色（Tint Color） 在iOS 7中，着⾊色是UIView的⼀一个属性。iOS 7的app会使⽤用着⾊色来定义⼀一个关键⾊色，这个颜 ⾊色表明“这⾥里是可交互的”，或者表⽰示元素选中的状态。 当你指定某个视图的着⾊色的时候，这个颜⾊色会⾃自动继承到所有的⼦子视图中。因为UIWindows 继承⾃自UIView，你可以这样通过设置窗体的着⾊色属性指定着⾊色： iOS 7⽤用户界⾯面过渡指南 11 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 window.tintColor = [UIColor purpleColor]; 如果不为窗体指定着⾊色，则会使⽤用系统默认的颜⾊色。 默认情况下，视图的着⾊色是nil，意味着视图使⽤用⽗父级的着⾊色。也就是说哪怕你不设置着⾊色的 话，视图也总能够获取到⼀一个⾊色值。 总的来说，最好在视图还没有显⽰示到屏幕上之前指定它的着⾊色。想让视图继承上个层级的着 ⾊色的话，就将着⾊色设置为nil。 重要：iOS 7不⽀支持通过外观代理API来设置着⾊色。 当警告框（alert）和上拉菜单（action sheet）出现的时候，iOS 7⾃自动将背后视图的着⾊色变 暗。为了响应该⾊色彩变化，在渲染时使⽤用tintColor的⾃自定义视图的⼦子类需要重写 tintColorDidChange⽅方法，以便在合适的时候刷新渲染。 注意：在iOS 6中，tintColor可以⽤用来给导航栏的背景着⾊色、tab栏、⼯工具栏、 搜索栏、搜索栏的范围选择栏着⾊色。⽽而在iOS 7中，给背景着⾊色只需要使⽤用 barTintColor属性就可以了。 使⽤用字体（Fonts） iOS 7引⼊入了动态字体（Dynamic Type），它让你的app中的字体显⽰示更加出⾊色。 最⼩小字号下的邮件正⽂文 最⼤大⾮非残障辅助字号下的邮件正⽂文 iOS 7⽤用户界⾯面过渡指南 12 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 使⽤用动态字体时，同时意味着： • 所有⽂文字的粗细，字间距，⾏行⾼高都被⾃自动调整。 • 可以语义上指定不同的⽂文字样式：正⽂文、脚注、⼤大标题等等。 • 对动态字体和残障辅助超⼤大号字体都能有很好的响应效果。 要享受动态字体的好处，请⽤用UIFont类下的preferredFontForTextStyle⽅方法来⽣生成⽂文字，⽽而 不是直接指定字体的名称和⼤大⼩小。iOS 7会保证每个⼤大⼩小字体的最佳可读性。 iOS 7⽤用户界⾯面过渡指南 13 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 操作栏和栏上按钮（Bars & Bar Buttons） iOS 7中，状态栏是透明的，其他的操作栏（导航栏、tab栏、⼯工具栏、搜索栏、搜索栏下⾯面 的范围选择栏）是半透明的。通常情况下，你希望能看到操作栏背后是你的内容。 ⼤大多数操作栏会将遮蔽住的内容进⾏行模糊处理，除⾮非你提供⼀一张⾃自定义背景图。 为了标识操作栏的位置，iOS 7引⼊入了barPosition属性，它可以帮助你指定什么时候⾃自定义 背景图⽚片需要平铺在状态栏上。值UIBarPositionTopAttached表明操作栏贴近屏幕顶部，背 景向上延伸⼊入系统状态栏区域。相对的，值UIBarPositionTop表⽰示操作栏位于当前局部内容 的顶部（⽐比如，在弹出式⽓气泡的顶部）它不为状态栏提供背景。 默认情况下，所有的栏上按钮都是⽆无边框的。详情请看第18⻚页的“栏上按钮”。 系统状态栏（Status Bar） 因为系统状态栏是透明的，所以可以透过它看到后⾯面的视图。状态栏的⻛风格依照它内容的外 观呈现，包括时间、电量、Wi-Fi信号等。使⽤用常量UIStatusBarStyle来指定使⽤用⿊黑⾊色⻛风格还 是⽩白⾊色⻛风格： • UIStatusBarStyleDefault 显⽰示⿊黑⾊色的⽂文字内容。当状态栏后⾯面的内容是淡⾊色的时候适 合使⽤用。 • UIStatusBarStyleLightContent 显⽰示⽩白⾊色的⽂文字内容。当状态栏后⾯面的内容是深⾊色时使 ⽤用⽐比较合适。 有些情况下，导航栏和搜索栏的背景图⽚片可以向上延伸到状态栏背后（详情⻅见22⻚页的“导航 栏”章节和23⻚页的“搜索栏和范围选择栏”章节）。如果状态栏下⾯面没有其他栏，内容视图需要 使⽤用全屏⾼高度。要了解视图控制器是怎样恰当地布局的，请看11⻚页的“使⽤用视图控制器”。 在iOS 7中，通过独⽴立的视图控制器，可以在app运⾏行的时候改变状态栏的⻛风格。实现⽅方法 是在Info.plist中加⼊入键UIViewControllerBasedStatusBarAppearance，并设置值为YES。 导航栏（Navigation Bar） 导航栏帮助⽤用户在不同信息层次结构中穿梭，并选择性地管理屏幕内容。 iOS 7 iOS 6 iOS 7⽤用户界⾯面过渡指南 14 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 iOS 7 iOS 6 操作栏⻛风格 透明的⽩白⾊色主题（默认）和透明 的⿊黑⾊色主题 默认情况下，透明度属性 translucent的值是YES 不透明的渐变蓝⾊色（默认）或者不透 明的⿊黑⾊色 默认情况下，透明属性translucent的 值是NO 外观 底部边缘有⼀一条1像素的细线 底部边缘有投影 着⾊色 使⽤用tintColor给栏上按钮项⺫⽬目着 ⾊色，使⽤用barTintColor给栏背景 着⾊色 使⽤用tintColor给栏背景着⾊色 返回按钮 返回按钮是⼀一个向左的箭头加上 上层⻚页⾯面的标题 * 返回按钮是带边框的按钮，上⾯面的⽂文 字显⽰示上层⻚页⾯面的标题 *如果想⽤用⾃自定义的图像来替换返回的箭头“<”的话，还需⾃自⼰己创建⼀一个相应的遮罩。在导航 过场动画的时候，iOS 7使⽤用遮罩来让上个层级的标题渐隐渐出。了解更多返回按钮和遮 罩图像的控制属性，请参阅 “UINavigationBar类参考” 。 iOS 7 让在导航栏上增加搜索栏的变得⾮非常简单。详情参考第16⻚页的“搜索栏和范围选择 栏”。 如果你使⽤用UIBarPositionTopAttached样式创建了⼀一个导航栏背景，确保图像包含了系统状 态栏的区域。具体来说，你需要⼀一个⾼高分辨率下128像素的图像。 下⾯面这个表格描述了iOS 7如何对待不同⾼高度的可变导航栏背景。（更多请看“UIImage类参 考”） 表格 5-1 可变⼤大⼩小的背景图⽚片处理策略 ⾼高度（⾼高分辨 率下） ⼤大⼩小变化策略 状态栏背景样式 88像素 调整⾼高度到适配（图⽚片在垂直⽅方向不平 铺、不拉伸） 如果使⽤用了UIBarPositionTop- Attached的话，⿊黑⾊色 如果使⽤用UIBarPositionTop的 话，和窗体背景⼀一致 ⼩小于88像素 如果使⽤用UIBarPositionTopAttached， 则在垂直⽅方向拉伸到128像素；如果使 ⽤用UIBarPositionTop，则拉伸到88像素 ⽔水平⽅方向适应性变化 操作栏背景决定 128像素 ⽔水平⽅方向拉伸到适配 操作栏背景决定 1像素 如果使⽤用UIBarPositionTopAttached或 导航控制器，则在垂直⽅方向拉伸到128 像素；如果使⽤用UIBarPositionTop，则 拉伸到88像素 ⽔水平⽅方向适应性变化 操作栏背景决定 iOS 7⽤用户界⾯面过渡指南 15 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 避免使⽤用超⾼高的背景图⽚片来制作导航栏下⾯面的⾃自定义投影，这种技术在iOS 7中不起作⽤用， 因为超⾼高的图⽚片会向上（系统状态栏⽅方向）扩展，⽽而不是向下（导航栏下⾯面）扩展。如果你 想给导航栏增加投影，可以创建⼀一个⾃自定义图⽚片，然后使⽤用shadowImage属性来⾃自定义投 影图⽚片。 搜索栏和范围选择栏（Search Bar & Scope Bar） 搜索栏接收⽤用户输⼊入的⽂文字，下⽅方可以附带⼀一个范围选择栏。 iOS 7 iOS 6 iOS 7 iOS 6 操作栏⻛风格 透明的⽩白⾊色主题（默认）和透明 的⿊黑⾊色主题 默认情况下，透明度属性 translucent的值是YES 不透明的渐变蓝⾊色（默认）或者不透 明的⿊黑⾊色 默认情况下，透明属性translucent的 值是NO 外观 底部边缘有⼀一条1像素的细线 底部边缘有投影 着⾊色 使⽤用tintColor给栏上按钮项⺫⽬目着 ⾊色，使⽤用barTintColor给栏背景 着⾊色 使⽤用tintColor给栏背景着⾊色 如果你使⽤用UIBarPositionTopAttached的位置为搜索栏创建了⼀一个背景图⽚片，请确保图⽚片的 ⾼高度包含了状态栏的⾼高度。如果你创建了⼀一个可变⼤大⼩小的背景图⽚片，参阅15⻚页的表格5-1获 取更多iOS 7调整背景图⽚片⼤大⼩小的策略。 在iOS 7中，UISearchDisplayController包含了displaySearchBarInNavigationBar属性，这 样你就可以将搜索栏放进导航栏，就像⽇日历app⾥里⾯面这样： 范围选择栏则允许⽤用户选择搜索结果的范围。 注意：范围选择栏不能单独出现；必须依附在搜索栏下⾯面出现。 iOS 7 iOS 6 iOS 7⽤用户界⾯面过渡指南 16 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 iOS 7 iOS 6 操作栏⻛风格 透明的⽩白⾊色主题（默认）和透明 的⿊黑⾊色主题 默认情况下，透明度属性 translucent的值是YES 不透明的渐变蓝⾊色（默认）或者不透 明的⿊黑⾊色 默认情况下，透明属性translucent的 值是NO 外观 底部边缘有⼀一条1像素的细线 底部边缘有投影 着⾊色 使⽤用tintColor给栏上按钮项⺫⽬目着 ⾊色，使⽤用barTintColor给栏背景 着⾊色 使⽤用tintColor给栏背景着⾊色 Tab栏（Tab Bar） Tab栏让⽤用户可以在不同⼦子任务、视图、模式之间切换。 iOS 7 iOS 6 iOS 7 iOS 6 操作栏⻛风格 透明的⽩白⾊色主题（默认）和透明 的⿊黑⾊色主题 默认情况下，透明度属性 translucent的值是YES 不透明的渐变蓝⾊色（默认）或者不透 明的⿊黑⾊色 默认情况下，透明属性translucent的 值是NO 外观 底部边缘有⼀一条1像素的细线 底部边缘有投影 着⾊色 使⽤用tintColor给栏上按钮项⺫⽬目着 ⾊色，使⽤用barTintColor给栏背景 着⾊色 使⽤用tintColor给栏背景着⾊色 如果使⽤用了⾃自定义icon的话，可以使⽤用UITabBarItem中的selectedImage属性来设置按下状 态的图像。如果不提供按下状态的icon，则两个状态会使⽤用相同icon。 ⼯工具栏（Toolbar） ⼯工具栏上放置当前屏幕或者视图下相关的对象的操作按钮。 iOS 7 iOS 6 iOS 7⽤用户界⾯面过渡指南 17 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 iOS 7 iOS 6 操作栏⻛风格 透明的⽩白⾊色主题（默认）和透明 的⿊黑⾊色主题 默认情况下，透明度属性 translucent的值是YES 不透明的渐变蓝⾊色（默认）或者不透 明的⿊黑⾊色 默认情况下，透明属性translucent的 值是NO 外观 底部边缘有⼀一条1像素的细线 底部边缘有投影 着⾊色 使⽤用tintColor给栏上按钮项⺫⽬目着 ⾊色，使⽤用barTintColor给栏背景 着⾊色 使⽤用tintColor给栏背景着⾊色 相关信息 常量UIToolbarPosition被弃⽤用； 使⽤用UIBarPosition常量代替 - 如果你创建了可变⼤大⼩小的背景图⽚片，请参考15⻚页的表格5-1获取iOS 7处理不同尺⼨寸图⽚片的细 节。 栏上按钮（Bar Buttons） 在iOS 6中，栏上按钮可以是有边框的，也可以是⽆无边框的。在iOS 7中只能是⽆无边框的。 iOS 7中的导航栏按钮 iOS 6中的导航栏按钮 为了更加明确，在iOS 7中，app的栏上按钮经常使⽤用⽂文字⽽而不是图形。例如，iOS 7中的⽇日 历应⽤用使⽤用了Inbox（收件箱）代替了收件箱图形： iOS 7 iOS 6 在早期版本的iOS中，⾃自定义栏上按钮图⽚片会⾃自动被当做“template image”。（template image被⽤用作最终图像的⼀一个遮罩。）⽽而iOS 7中，你可以使⽤用以下UIImage属性来指定是否 需要把⾃自定义的图⽚片当做template image来处理： • UIImageRenderingModeAlwaysTemplate。图⽚片被⽤用作Template Image。 • UIImageRenderingModeAlwaysOriginal。图⽚片按照原样渲染。 如果你没有指定对图⽚片的处理⽅方法的话，图⽚片会使⽤用包含它的视图的默认处理⽅方式。⽐比如， tab栏默认会使⽤用template处理⽅方式，⽽而进度滑块则会使⽤用原样完整渲染的处理⽅方式。 注意：template image会依照其⽗父结构的着⾊色进⾏行着⾊色（更多请看18⻚页的“使 ⽤用着⾊色”）。如果不想让栏上的元素被着⾊色，为图⽚片设置UIImageRendering- ModeAlwaysOriginal属性。 iOS 7⽤用户界⾯面过渡指南 18 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 内容视图（Content View） 内容视图⽤用来显⽰示⾃自定义的app内容。因为⼤大多数内容视图的外观系统都没有提供，所以 iOS 7视觉上的变化对他们⼏几乎没有影响。有个⽐比较⼤大的例外是分组聚合表格视图，它在 iOS 7上外观有巨⼤大的变化。 活动菜单（Activity） 活动菜单代表了⼀一个可以响应当前选择内容的功能，它可以是系统提供的或者⾃自定义的。⽤用 户可以通过系统提供的活动视图控制器来使⽤用这些功能，当⽤用户点击分享按钮的时候，活动 视图控制器就会从屏幕底部向上升起。 系统提供的活动菜单中可以提供两种⻛风格的按钮： • 原样渲染的app图标——⽐比如下⾯面这个邮件的icon • 和tab栏上的按钮⼀一样的⻛风格——⽐比如下⾯面复制、打印这样的icon 第三⽅方功能总是使⽤用第⼆二种⻛风格的icon。 iOS 7⽤用户界⾯面过渡指南 19 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 如果要在你的app中提供某个服务，创建⼀一个简洁、线框状的template image。创建 template image的时候请遵守下述指导原则： • 使⽤用⿊黑⾊色或者⽩白⾊色，配合适当的alpha透明度 • 不要使⽤用投影 • 使⽤用抗锯齿效果 活动菜单上的template image应该在区域中居中，分辨率⼤大约在70 x 70像素左右。 集合视图（Collection View） 集合视图⽤用来管理和有序排列项⺫⽬目，将它们以可定制的布局进⾏行呈现。 在iOS 7中，集合视图⽀支持⾃自定义过场动画。了解更多请参考“UICollectionViewTransition- Layout类参考”。 照⽚片应⽤用使⽤用了集合视图来展⽰示图⽚片集，并⽀支持他们之间的过场动画。 iOS 7⽤用户界⾯面过渡指南 20 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 图⽚片视图（Image View） 图⽚片视图显⽰示⼀一张图⽚片或者⼀一系列动态的图⽚片。 在iOS 7中，UIImageView包含了着⾊色属性tintColor。当图⽚片视图包含template image的时 候，tintColor会被应⽤用到图⽚片上。 地图视图（Map View） 地图视图展⽰示地理数据，⽀支持⾃自带地图应⽤用的⼤大多数功能。 照⽚片应⽤用中的地图视图帮助⽤用户查看照⽚片的地理位置信息。 在iOS 7，只能够使⽤用⼀一个新的类MKOverlayRenderer来在地图视图上⾯面创建覆盖层。 如果要给地图视图增加3D外观的话，只需给它的camera属性分配⼀一个相机对象即可 （MKMapCamera的⼀一个实例）。要了解更多，参考“MKMapView类参考”。 ⻚页⾯面视图控制器（Page View Controller） iOS 7⽤用户界⾯面过渡指南 21 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 ⻚页⾯面视图控制器⽤用来管理多⻚页的内容，可以使⽤用滚动过场，也可以使⽤用卷⻚页过场动画。 在iOS 7中，使⽤用两个⽅方法来分别指定 （pageViewControllerPreferredInterfaceOrientationForPresentation和 pageViewControllerSupportedInterfaceOrientations）。 下⾯面可以看到iOS 7模拟器中⻚页⾯面视图控制器的默认外观： 滚动视图（Scroll View） 滚动视图帮助⽤用户查看超出视图边界的内容。滚动视图在iOS 6和7上视觉唯⼀一的不同是滚动 条的外观。 iOS 7 iOS 6 iOS 7⽤用户界⾯面过渡指南 22 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 在iOS 7上，你可以通过UIViewController的automaticallyAdjustsScrollViewInsets属性来管 理滚动视图的项⺫⽬目分组之间的间隔。 表格视图（Table View） 表格视图将数据以多⾏行单列的列表呈现。 iOS 7为单⾏行和成组的表格视图引⼊入了新的变化。 iOS 7（表格组） iOS 6（表格组） iOS 7⽤用户界⾯面过渡指南 23 Copyright © 2013 Apple Inc. 搜狐⽆无线MUED翻译 特征 iOS 7上的外观 分割栏（单⾏行和成组两种样 式） 分隔栏变细了，更窄，颜⾊色更浅 默认情况下，当表格呈现⽂文字的时候，分隔栏从表格的 左边缘插⼊入 区域引导符（平⾯面样式） 默认情况下，区域引导符包括⼀一个透明的⽩白⾊色背景（可 以使⽤用sectionIndexBackgroundColor属性来指定别的颜 ⾊色） 顶部和尾部⽂文字（两种样 式） 默认情况下，头部⽂文字显⽰示区域会使⽤用⼤大写字⺟母；尾部 ⽂文字区域会使⽤用句⾸首字⺟母⼤大写 你可以使⽤用对象UITableViewHeaderFooterView改变成 不同样式 特征 iOS 7上的外观 单元格组（成组⻛风格） 每组单元格都会通栏扩展到屏幕宽度 单元格选中样式 内容不反⾊色，背景有轻微的灰⾊色变化 背景样式（成组⻛风格） 背景是浅灰实⾊色 表格视图中的元素在iOS 7中也有了不同的样式。 表格视图元素 iOS 7的样式 iOS 6的样式 iOS 7⽤用户界⾯面过渡指南