iOS 11 中的视觉设计更新

在 iOS 11 中,Apple 引入了新的视觉更改,包括导航栏、搜索栏和表视图的更新。 此外,还进行了改进,为边距和全屏内容提供了更大的灵活性。 本指南介绍了这些更改。

有关 iPhone X 设计的具体信息,请观看 Apple 的 iPhone X 的设计视频。

UIKit

iOS 11 对 UIKit 工具栏进行了调整,使最终用户更容易使用它们。

其中一项更改是当用户长按工具栏项目时出现新的 HUD 显示器。 为了实现这点,请在该属性上 UIBarItem 设置 largeContentSizeImage 属性,并通过资产目录添加更大的图像:

barItem.LargeContentSizeImage = UIImage.FromBundle("AccessibleImage");

iOS 11 引入了新功能,使导航栏标题更易于阅读。 应用可以通过为 PrefersLargeTitles 属性赋予 true 来显示此更大的标题:

NavigationController.NavigationBar.PrefersLargeTitles = true;

在应用中设置更大的标题会使应用中的所有导航栏标题显得更大,如以下屏幕截图所示

Large navigation title

若要控制何时在导航栏上显示大标题,请将导航项上的 LargeTitleDisplayMode 设置为 AlwaysNeverAutomatic

搜索控制器

iOS 11 使直接将搜索控制器添加到导航栏变得更加容易。 创建搜索控制器后,使用 SearchController 属性将其添加到导航栏:

NavigationItem.SearchController = searchController;

Large navigation title with search bar

你可能希望也可能不希望在用户滚动列表时隐藏搜索栏,具体取决于应用的功能。 可以使用 HidesSearchBarWhenScrolling 属性来进行调整。

边距

Apple 创建了一个新属性 directionalLayoutMargins,该属性可用于设置视图和子视图之间的空间。 使用包含 leadingtrailing 内边距的 directionalLayoutMargins。 无论系统使用从左到右还是从右到左的语言,iOS 都能适当设置应用中的间距。

在 iOS 10 及更早版本中,所有视图都有一个需要对齐的最小边距大小。 iOS 11 引入了使用 ViewRespectsSystemMinimumLayoutMargins 替代该大小的选项。 例如,将此属性设置为 false 可让你将边缘内边距调整为零:

ViewRespectsSystemMinimumLayoutMargins = false;
View.LayoutMargins = UIEdgeInsets.Zero;

Image showing margin with zero inset in ios 11

全屏内容

iOS 7 引入了topLayoutGuidebottomLayoutGuide 作为限制视图的方式,以便这些视图不被 UIKit 工具栏隐藏,并且位于屏幕的可见区域。 这些方式在 iOS 11 中已弃用,取而代之的是安全区域

安全区域是一种思考应用程序可见空间的新方式,也是一种思考如何在视图和超级视图之间添加约束的新方式。 例如,考虑以下图像:

Safe area vs Top and bottom layout guide

以前,如果添加了视图并希望它在上面的绿色区域中可见,则会将其限制在 TopLayoutGuide 的底部和 BottomLayoutGuide 的顶部。 在 iOS 11 中,你会将其限制在安全区域的顶部和底部。 以下是一个示例:

var safeGuide = View.SafeAreaLayoutGuide;
imageView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
safeGuide.BottomAnchor.ConstraintEqualTo(imageView.BottomAnchor).Active = true;

表视图

UITableView 在 iOS 11 中进行了一些微小但重要的更改。

默认情况下,页眉、页脚和单元格现在会根据其内容自动调整大小。 若要选择退出此自动调整大小的行为,请将 EstimatedRowHeightEstimatedSectionHeaderHeightEstimatedSectionFooterHeight 设置为零。

但在某些情况下(例如添加 UITableViewController 时、在 Interface Builder 中使用现有情节提要时),可能需要手动启用自行调整大小的单元格。 为此,请确保分别在单元格、页眉和页脚的表视图中设置以下属性:

// Cells
TableView.RowHeight = UITableView.AutomaticDimension;
TableView.EstimatedRowHeight = UITableView.AutomaticDimension;

// Header
TableView.SectionHeaderHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionHeaderHeight = 40f;

//Footer
TableView.SectionFooterHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionFooterHeight = 40f;

iOS 11 扩展了行操作的功能。 引入了 UISwipeActionsConfiguration 来定义用户在表格视图中的某一行向任一方向轻扫时应执行的一组操作。 此行为类似于本机 Mail.app 的行为。 有关详细信息,请参阅行操作指南。

iOS 11 中支持拖放表视图。 有关详细信息,请参阅拖放指南。