iOS 11 UI 新风格

iOS 11 UI 新风格_第1张图片
iOS 11.jpg

iOS 11 UI 带来粗体,动态的全新风格。新风格包括,集成搜索功能的大标题导航栏,横屏 Tab Bar,以及更强大的滑动手势等等。

本文主要是 WWDC 2017 - Session 204 - Updating Your App for iOS 11一节的介绍。

Bar

UIBarItem

UITabBarItem 新增 largeContentSizeImage 属性,在 Accessibility > Larger Text 中打开,并调大字体,长按 Item 会有 HUD 的放大效果。

iOS 11 UI 新风格_第2张图片
LargeContentSizeImage.png

UINavigationItem

UINavigationBar 新增 prefersLargeTitles 属性,是否显示大标题风格。
大标题风格 NavigationBar 高度为 116 px,iPhone X 另做讨论。

UINavigationItem 新增 largeTitleDisplayMode 属性,决定当前 UIViewController 显示大标题的方式。

  • Automatic: 保持跟前一个控制器一致;
  • Awayes:始终显示;
  • Never:不显示。

UIViewController 新增 searchController集成 Search bar 方便快捷。

navigationItem.searchController = UISearchController(searchResultsController: nil)
navigationItem.hidesSearchBarWhenScrolling = false

Layout Guide

UIView 新增 directionalLayoutMargins 属性,与layoutMargins同步,不同的是在文字子控件缩进时,leading 代表文字起始位置的缩进,trailing 代表文字换行位置的缩进。

UIViewController 新增 systemMinimumLayoutMargins 属性,在 iOS 11 之前,Root View 的 layoutMarginsGuide 边距默认是 16 或 20 px,是无法修改的。iOS 11 之后, 可通过的directionalLayoutMargins或者 LayoutMargins修改, 如果新值比 systemMinimum 还要小,则会使用系统最小值,可以通过 viewRespectsSystemMinimumLayoutMargins 属性,关闭最小值的限制。

UIViewController topLayoutGuidebottomLayoutGuide 被废弃,取而代之的是 UIView 的 safeAreaLayoutGuide ,可通过 additionalSafeAreaInsets 修改 safeArea。

UIViewController 的 automaticallyAdjustsScrollViewInsets 失效,当我们自己需要设置 contentInset.top 时,会和系统自动设置的 64 px 造成冲突。取而代之的是 UIScrollView 的 contentInsetAdjustmentBehavior 属性,同时可以自定义的设置 contentInset,并通过 adjustedContentInset来获取组合的 Inset。

UIScrollView 新增 frameLayoutGuidecontentLayoutGuide 为内容的布局带来更大的便捷。

UITableView

UITableView 默认会开启 self-sizing 功能,Footer, Header,Cell 默认估算高度等于 UITableViewAutomaticDimension 。如果想关闭 iOS 11 的 self-sizing, 需要设置它们的高度都为 0。

tableView.estimatedRowHeight = 0
tableView.estimatedSectionFooterHeight = 0
tableView.estimatedSectionHeaderHeight = 0

UITableview 的 Footer 和 Header 必须继承自 UITableViewHeaderFooterView 以保证它们始终在 safeArea 内。

UITableView 新增 separatorInsetReference 属性,separatorInset 默认 left 是从 cell 的左边缘开始的,通过设置fromAutomaticInsets可在系统默认的 16px 下进行偏移。

UITableView 新增两种手势控制代理方法,使用如下:

func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let action = UIContextualAction(style: .normal, title: "Favorite") { (action, v, completion) in
            //  修改数据源
            completion(true)
        }
        action.backgroundColor = UIColor.blue
        let configuration = UISwipeActionsConfiguration(actions: [action])
        return configuration
    }
    
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let action = UIContextualAction(style: .destructive, title: "Delete") { (action, v, completion) in
            //  修改数据源
            completion(true)
        }
        let configuration = UISwipeActionsConfiguration(actions: [action])
        return configuration
    }

比较奇怪的是,仅实现 leadingSwipeActionsConfigurationForRowAt方法,左滑的 Delete 按钮也会出现。

你可能感兴趣的:(iOS 11 UI 新风格)