iOS 7用户界面过渡指南（下）：更新UI

更新UI

布局和外观（Layout & Appearance）

iOS 7给你的app布局和UI带来了不少变化。视图控制器、着色、字体效果等的变化，会影响你的app中所有UIKit对象。

 

使用视图控制器（View Controller）

在iOS 7中，视图控制器都是全屏的。iOS 7视图控制器的外观给人传达了更细腻的控制感。特别是新的全屏外观让你可以指定视图的每个边缘的布局。

 

视图控制器接口 wantsFullScreenLayout已作废。如果你像以前那样地指定wantsFullScreenLayout = NO，iOS 7中视图控制器会在将其内容显示到一个意外的屏幕位置。

 

UIViewController提供了如下属性来调整视图控制器的外观：

1.edgesForExtendedLayout ：这个属性属于UIExtendedEdge类型，它可以单独指定矩形的四条边，也可以单独指定、指定全部、全部不指定。

 

使用edgesForExtendedLayout指定视图的哪条边需要扩展，不用理会操作栏的透明度。这个属性的默认值是UIRectEdgeAll。

 

2.extendedLayoutIncludesOpaqueBars：

如果你使用了不透明的操作栏，设置edgesForExtendedLayout的时候也请将 extendedLayoutIncludesOpaqueBars的值设置为No（默认值是YES）。

 

3.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，你可以这样通过设置窗体的着色属性指定着色：

 
 
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中的字体显示更加出色。

 最小字号下的邮件正文                                      最大非残障辅助字号下的邮件正文

 使用动态字体时，同时意味着：

        1.所有文字的粗细，字间距，行高都被自动调整。

        2.可以语义上指定不同的文字样式：正文、脚注、大标题等等。

        3.对动态字体和残障辅助超大号字体都能有很好的响应效果。

 

要享受动态字体的好处，请用UIFont类下的preferredFontForTextStyle方法来生成文字，而不是直接指定字体的名称和大小。iOS 7会保证每个大小字体的最佳可读性。

 

 

操作栏和栏上按钮（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 让在导航栏上增加搜索栏的变得非常简单。详情参考第16页的“搜索栏和范围选择栏”。*  如果想用自定义的图像来替换返回的箭头“<”的话，还需自己创建一个相应的遮罩。在导航过场动画的时候，iOS 7使用遮罩来让上个层级的标题渐隐渐出。了解更多返回按钮和遮罩图像的控制属性，请参阅 “ UINavigationBar类参考” 。

 

如果你使用UIBarPositionTopAttached样式创建了一个导航栏背景，确保图像包含了系统状态栏的区域。具体来说，你需要一个高分辨率下128像素的图像。

 

下面这个表格描述了iOS 7如何对待不同高度的可变导航栏背景。（更多请看“ UIImage类参考”） 

 

表格 5-1 可变大小的背景图片处理策略

 搜索栏和范围选择栏（Search Bar & Scope Bar）避免使用超高的背景图片来制作导航栏下面的自定义投影，这种技术在iOS 7中不起作用，因为超高的图片会向上（系统状态栏方向）扩展，而不是向下（导航栏下面）扩展。如果你想给导航栏增加投影，可以创建一个自定义图片，然后使用shadowImage属性来自定义投影图片。

 

搜索栏接收用户输入的文字，下方可以附带一个范围选择栏。

 iOS 7                                                          iOS 6

 

在iOS 7中，UISearchDisplayController包含了displaySearchBarInNavigationBar属性，这样你就可以将搜索栏放进导航栏，就像日历app里面这样：如果你使用UIBarPositionTopAttached的位置为搜索栏创建了一个背景图片，请确保图片的高度包含了状态栏的高度。如果你创建了一个可变大小的背景图片，参阅15页的表格5-1获取更多iOS 7调整背景图片大小的策略。 

范围选择栏则允许用户选择搜索结果的范围。

 

注意：范围选择栏不能单独出现；必须依附在搜索栏下面出现。

 iOS 7                                                          iOS 6

 

Tab栏（Tab Bar）

Tab栏让用户可以在不同子任务、视图、模式之间切换。

 iOS 7                                                          iOS 6

 

如果使用了自定义icon的话，可以使用UITabBarItem中的selectedImage属性来设置按下状态的图像。如果不提供按下状态的icon，则两个状态会使用相同icon。

 

工具栏（Toolbar）

工具栏上放置当前屏幕或者视图下相关的对象的操作按钮。

 iOS 7                                                          iOS 6

 

如果你创建了可变大小的背景图片，请参考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来处理： 

1.UIImageRenderingModeAlwaysTemplate。图片被用作Template Image。

2.UIImageRenderingModeAlwaysOriginal。图片按照原样渲染。

 

如果你没有指定对图片的处理方法的话，图片会使用包含它的视图的默认处理方式。比如，tab栏默认会使用template处理方式，而进度滑块则会使用原样完整渲染的处理方式。

 

注意：template image会依照其父结构的着色进行着色（更多请看18页的“使用着色”）。如果不想让栏上的元素被着色，为图片设置UIImageRendering-ModeAlwaysOriginal属性。

 

 

内容视图（Content View）

内容视图用来显示自定义的app内容。因为大多数内容视图的外观系统都没有提供，所以iOS 7视觉上的变化对他们几乎没有影响。有个比较大的例外是分组聚合表格视图，它在iOS 7上外观有巨大的变化。

 

活动菜单（Activity）

活动菜单代表了一个可以响应当前选择内容的功能，它可以是系统提供的或者自定义的。用户可以通过系统提供的活动视图控制器来使用这些功能，当用户点击分享按钮的时候，活动视图控制器就会从屏幕底部向上升起。

 

系统提供的活动菜单中可以提供两种风格的按钮：

        1.原样渲染的app图标——比如下面这个邮件的icon

         2.和tab栏上的按钮一样的风格——比如下面复制、打印这样的icon

 

第三方功能总是使用第二种风格的icon。

 

 

如果要在你的app中提供某个服务，创建一个简洁、线框状的template image。创建template image的时候请遵守下述指导原则：

        1.使用黑色或者白色，配合适当的alpha透明度

        2.不要使用投影

        3.使用抗锯齿效果

 

活动菜单上的template image应该在区域中居中，分辨率大约在70 x 70像素左右。

 

集合视图（Collection View）

集合视图用来管理和有序排列项目，将它们以可定制的布局进行呈现。

 

在iOS 7中，集合视图支持自定义过场动画。了解更多请参考“ UICollectionViewTransition-Layout类参考”。

 

照片应用使用了集合视图来展示图片集，并支持他们之间的过场动画。

 

 

图片视图（Image View）：图片视图显示一张图片或者一系列动态的图片。

 

在iOS 7中， UIImageView包含了着色属性tintColor。当图片视图包含template image的时候，tintColor会被应用到图片上。

 

地图视图（Map View）：地图视图展示地理数据，支持自带地图应用的大多数功能。

 

照片应用中的地图视图帮助用户查看照片的地理位置信息。

 

在iOS 7，只能够使用一个新的类 MKOverlayRenderer来在地图视图上面创建覆盖层。

 

如果要给地图视图增加3D外观的话，只需给它的camera属性分配一个相机对象即可（ MKMapCamera的一个实例）。要了解更多，参考“ MKMapView类参考”。

 

页面视图控制器（Page View Controller）

页面视图控制器用来管理多页的内容，可以使用滚动过场，也可以使用卷页过场动画。

 

在iOS 7中，使用两个方法来分别指定（ pageViewControllerPreferredInterfaceOrientationForPresentation和pageViewControllerSupportedInterfaceOrientations）。

 

下面可以看到iOS 7模拟器中页面视图控制器的默认外观：

 

Popover(iPad Only)

在iOS 7中，popover的背景是模糊的白色，这意味着popover内容视图的背景可以是透明的。

iOS 7                                      iOS 6

 

注意：不要使用UIPopoverPreferredPresentationDirection API，iOS 7不久将会弃用这个API。

 

滚动视图（Scroll View）

滚动视图帮助用户查看超出视图边界的内容。滚动视图在iOS 6和7上视觉唯一的不同是滚动条的外观。

在iOS 7上，你可以通过 UIViewController的automaticallyAdjustsScrollViewInsets属性来管理滚动视图的项目分组之间的间隔。

 

Split View Controller (iPad Only)：splitviewcontroller可以用来管理两个并排的视图控制器。在iOS 7中也发生了变化。

 

 

表格视图（Table View）：表格视图将数据以多行单列的列表呈现。iOS 7为单行和成组的表格视图引入了新的变化。

 

注意：separatorInset属性的类型为UIEdgeInsets。默认情况下，UIEdgeInsets用来设置UITableViewAutomaticDimension的上下左右参数值

 

表格视图中的元素在iOS 7中也有了不同的样式。

 

文本视图（Text View）：文本视图接受和显示多行文本。 请使用UIFont类的preferredFontForTextStyle方法获取文本视图中显示的文字内容。

 

网页视图（Web View）：网页视图是可以显示富HTML内容的区域。 在iOS 7中， UIWebView 支持显示分页外观的内容的显示。

 

 

控件（Controls）

控件是种特殊的UI元素，用户既可以看（获取信息）也可以与之交互（操作它）。所有的iOS 7控件的外观都得到了升级，它们大多数都有了新的尺度。

 

因为 UIControl是从 UIView继承而来，你可以使用控件的tintColor属性来为它们着色。更多内容请参阅第11页的“使用着色”。系统提供的控件默认支持系统定义的动效，外观也会随着高亮和选中状态的变化而变化。

 

日期拾取器（Date Picker）

日期拾取器显示了日期和时间的内容，包括：分钟，小时，日期，年份。它的整体尺寸和iOS 6比起来没有变化，但是外观发生了巨大的变化。

 

 

 iOS 7的app会将日期拾取器嵌入到内容中，而不是单独呈现在一个弹出的视图上。比如日历应用动态地将表格的一行扩展开，将日期拾取器嵌入，用户指定时间的时候就不需要离开当前这个添加事项视图。

 

新增联系人按钮（Contact Add Button）

新增联系人按钮是一个UIButtonTypeContactAdd类型的UIButton，它可以将用户的信息添加到其他基于文字视图的文字域中。

 

新增联系人按钮的大小和外观在iOS 7中有变化。

细节展开按钮（Detail Disclosure Button）

细节展开按钮是一个UIButtonTypeDetailDisclosure类型的UIButton，它表明当前项目还有额外的细节和相关功能，点击后会在另一个表格或视图中呈现。在iOS 7中，细节展开按钮使用和Info按钮一样的符号。

 

当细节展开按钮出现在表格的一行中，点击该行的其它地方不会激活该按钮；相反地，这个操作会选中该行，或者触发app定义的行为。

 

Info按钮（Info Button）

Info按钮的类型是UIButtonTypeInfoLight或者UIButtonTypeInfoDark。它表明app的配置细节入口，新页面有时候出现在当前视图的背面。在iOS 7中，info按钮使用和细节展开按钮相同的图形。

 

在iOS 7中，info按钮的大小和外观发生了变化。

文本标签（Label）文本标签用来呈现静态文本。默认情况下，文本标签会使用系统字体，所以在iOS 6和7上会看起来不一样。

确保使用UIFont的方法preferredFontForTextStyle来获取显示在标签上的文字。

 

页码控件（Page Control）

页码控件指示打开了多少视图，当前看到的是哪一个。iOS 7中，页码控件的大小和外观发生了变化。

选择器（这里指语言选择器）

iOS 6和iOS 7中选择器的尺寸没有什么变化，iOS 7中语言选择器的外观和交互行为类似于时间选择器和日期选择器。

 

进度视图（Progress View）：进度视图用来展示任务和过程的进度。进度视图的大小和外观（下图是在自带邮件客户端中的）在iOS 7中发生了变化。

 

刷新控件（Refresh Control）

刷新控件响应用户主动触发的刷新操作，一般会出现在表格上。它的大小和外观在iOS 7中发生了变化。

圆角矩形按钮（Rounded Rectangle Button）

圆角矩形按钮在iOS 7中被弃用了。用系统的无边界按钮替代它。对应的类型是UIButtonTypeSystem的UIButton。

 

iOS 7系统按钮不包括倒角和背景样式。系统按钮可以包含一个图形或者文字信息，可以指定一种着色或者继承父级的着色。

iOS 7系统按钮            iOS 6的圆角矩形按钮 

 

注意：在iOS 7中，UIButtonTypeRoundedRect被重新定义成UIButtonType-System。在iOS 6中使用圆角矩形按钮的app会自动转化成系统按钮的外观。

 

如果你需要显示一个包含倒角的按钮，使用UIButtonTypeCustom类型的按钮，这个类型支持自定义背景图片。

 

分段控件（Segmented Control）

分段控件是由一系列分段构成的，每个段的功能相当于一个按钮，每个按钮点击后都展示一个不同的视图。

 

分段控件的大小和样式在iOS 7中的变化如下。

iOS 7                                                                  iOS 6

 

在iOS 7中，分段控件使用单一的样式，segmentedControlStyle属性不再使用。

 

滑动器（Slider）：滑动器让用户可以在允许的范围内连续调整某个值。

 

在iOS 7中的大小和样式如下。

iOS 7                                                                  iOS 6

 

iOS 7中依然可以对最小和最大轨道图像按下状态使用着色，使用三个属性来操作（minimumTrackTintColor，maximumTrackTintColor和thumbTintColor）。如果你将 minimumTrackColor属性设为nil，则该区域会继承父级的着色；如果设置 maximumTrackTintColor或 thumbTintColor的值为nil的话，两个区域都会使用默认颜色。

 

步进器（Stepper）：步进器可以将某个值增减一个常数值。它在iOS 7中的大小和外观发生了变化。

在iOS 7中，默认情况下，步进器将自定义增减位置的图像视为template image。

 

开关（Switch）：开关用来表示两个互斥的选项或状态（最常在表格视图中使用）。在iOS 7中的变化如下：

iOS 7继续可以对开、关、不可用三个状态使用着色。按下状态则使用下面三个属性着色：onTintColor，tintColor和thumbTintColor。

 

在iOS 7中，默认情况中自定义的开关图像会被忽略。

 

文本域（Text Field）：文本域接受用户的单行输入。

 

它在iOS 7中的大小和外观有如下变化：

iOS 7（地图中的两行文字域）                     iOS 6（ 地图中的两行文字域）

 

 

确保使用 UIFont的preferredFontForTextStyle方法来获取和显示文字域中的文字。

 

 

临时视图（Temporary Views）

动作列表，警告对话框，模态视图是三种临时视图，它们在需要用户特别注意的时候、或提供额外的选择或者功能的时候会出现。

 

虽然动作列表和警告对话框的内容可以自定义，它们的外观能做的自定义很少。因此你几乎不用考虑怎么让它们在iOS 7上看起来更美观。

 

因为模态视图本质上是视图的一种，你可能也需要重新设计一下模态视图，让它们在iOS 7上看起来更适宜。

 

注意：当临时视图出现的时候，iOS 7自动将背后那个标准视图变暗。你可能需要调整一下你的代码来处理这种颜色的变化；更多信息请看第18页的“使用着色”。

 

动作列表（Action Sheet）

动作列表用来呈现一系列用户触发的任务的选择。

 

在iOS 7中，默认情况动作列表是透明的，包括无边框的按钮。

iOS 7中，常量UIActionSheetStyle不再使用。在iOS 7设备上，不管系统提供的UI（如动作列表的UI）是怎样的，都会一律使用iOS 7的默认外观。

 

注意动作列表中潜在危险的选项——destructiveButtonTitle中参数 initWithTitle:delegate:cancelButtonTitle:destructiveButtonTitle:otherButtonTitles指定的——自动使用系统红色。

 

警告对话框（Alert）：警告对话框呈现给用户影响他们使用app或者设备的重要信息。

 

外观在iOS 7上看起来是这样的。

iOS 7                                                                  iOS 6 

在iOS 7设备中，系统提供的UI（比如警告框）使用系统提供的样式，不管当前运行的app样式是怎样的。

 

如果你的警告对话框有三个按钮，第三个按钮会显示在这两个主按钮下面一排。

 

模态视图（Modal View）：模态视图提供了当前任务或工作流的自承载的功能。

 

在iOS 7中，系统提供的模态视图使用和以前相同的外观。

 

 

 

在iOS 7中，你可以使用自定义的对象和选择性交互控制器对象来管理模态展现。了解更多自定义视图控制器的过场动画, ，请参看UIViewControllerAnimatorTransitioning协议参考和 UIViewControllerInteractiveTransitioning协议参考 。