iOS11 屏幕适配

2018-02-23  本文已影响0人  smallSun15

一. 在UIKit’s Bars中加入的新功能

WWDC通过iOS新增的文件管理App:Files开始介绍,在Files这个APP中能够看到iOS11中UIKit’s Bars的一些新特性:在浏览功能上的大标题视图(向上滑动后标题会回到原来的UI效果)、横屏状态下tab上的文字和icon会变为左右排列。

在iPhone上,tab上的图标较小,tab bar较小,这样垂直空间可多放置内容。如果有人看不清楚tab bar上的图标或文字,可以通过长按tab bar上的任意item,会将该item显示在HUD上,这样可以清楚的看清icon和text。对tool bar 和 navigation bar同理,长按item也会放大显示。

UIBarItem

UIBarItem是UI tab bar item和UI bar button item的父类,要想实现上面介绍的效果,只需要为UIBarItem 设置landscapeImagePhone属性,在storyboard中也支持这个设置,对于HUD的image需要设置另一个iOS11新增的属性:largeContentSizeImage,关于这部分更详细的讨论,可以参考 WWDC2017 Session 215:What's New in Accessibility

控制大标题的显示

在UI navigation bar中新增了一个BOOL属性prefersLargeTitles,将该属性设置为ture,navigation bar就会在整个APP中显示大标题,如果想要在控制不同页面大标题的显示,可以通过设置当前页面的navigationItem的largeTitleDisplayMode属性;

navigationItem.largeTitleDisplayModetypedefNS_ENUM(NSInteger,UINavigationItemLargeTitleDisplayMode) {

/// 自动模式依赖上一个 item 的特性

UINavigationItemLargeTitleDisplayModeAutomatic,

/// 针对当前 item 总是启用大标题特性

UINavigationItemLargeTitleDisplayModeAlways,

// NeverUINavigationItemLargeTitleDisplayModeNever,

}

Navigation 集成 UISearchController

把你的UISearchController赋值给navigationItem,就可以实现将UISearchController集成到Navigation。

navigationItem.searchController   //iOS 11 新增属性

navigationItem.hidesSearchBarWhenScrolling   //决定滑动的时候是否隐藏搜索框;iOS 11 新增属性

UINavigationController和滚动交互

滚动的时候,以下交互操作都是由UINavigationController负责调动的:

UIsearchController搜索框效果更新大标题效果的控制Rubber banding效果   //当你开始往下拉,大标题会变大来回应那个滚轮

所以,如果你使用navigation bar,组装一些整个push和pop体验,你不会得到searchController的集成、大标题的控制更新和Rubber banding效果,因为这些都是由UINavigationController控制的。

UIToolbar and UINavigationBar— Layout

在 iOS 11 中,当苹果进行所有这些新特性时,也进行了其他的优化,针对 UIToolbar 和 UINavigaBar 做了新的自动布局扩展支持,自定义的bar button items、自定义的title都可以通过layout来表示尺寸。

需要注意的是,你的constraints需要在view内部设置,所以如果你有一个自定义的标题视图,你需要确保任何约束只依赖于标题视图及其任何子视图。当你使用自动布局,系统假设你知道你在做什么。

Avoiding Zero-Sized Custom Views

自定义视图的size为0是因为你有一些模糊的约束布局。要避免视图尺寸为0,可以从以下方面做:

UINavigationBar 和 UIToolbar 提供位置

开发者则必须提供视图的size,有三种方式:

对宽度和高度的约束;

实现 intrinsicContentSize;

通过约束关联你的子视图;

上一篇下一篇

猜你喜欢

热点阅读