文章分享至我的个人技术博客: cainrun.github.io/15101116434…
随着苹果爸爸越来越多尺寸的设备发布, 还有
设计的改变, 特别是在
- iOS
之后, 比大更大的导航栏, 然后再滚动的时候可以改变大小等等操作.
- iOS 11
但这些问题都不是什么问题, 就如同在
一样, 苹果爸爸在跟我们开发者展示一样东西, 也是他一直想我们去使用的东西, 那就是自动布局.
- WWDC 2017
随着什么10.5英寸, 5.8英寸, 12.9英寸这些设备的发布, 让我们开发者在适配多个尺寸的时候也越来越麻烦了, 但随着使用自动布局的发布可以让我们开发者更加注重
的业务上的开发, 再也不用去计算这个差多少, 那个差多少, 旋转一下又怎么处理.
- App
这里我们就使用一个简单的小项目来捣鼓就好了.
在
里, 最明显的变化就是导航栏里多了一个大标题:
- iOS 11
这里我们可以通过设置
的一个
- UINavigationBar
值属性来决定是否显示这个大标题:
- BOOL
- @property(nonatomic, readwrite, assign) BOOL prefersLargeTitles;
那如果你是在
上的话, 你也可以在
- Storyboard
上的
- UINavigationController
设置这个属性, 勾上就是为显示大标题, 不勾上就不显示.
- UINavigationBar
虽然
是打开大标题的主开关, 但在每一个控制器里, 我们都可以每个控制器里的
- prefersLargeTitles
来显示是否显示大标题, 或者是普通标题, 这里共有三种显示类型:
- UINavigationItem
- typedef NS_ENUM(NSInteger, UINavigationItemLargeTitleDisplayMode) {
- UINavigationItemLargeTitleDisplayModeAutomatic,
- UINavigationItemLargeTitleDisplayModeAlways,
- UINavigationItemLargeTitleDisplayModeNever,
- } NS_SWIFT_NAME(UINavigationItem.LargeTitleDisplayMode);
要使用这个属性呢, 我们得提前把
大标题属性设置为
- prefersLargeTitles
, 然后才能去捣鼓上面的三种显示模式, 默认为
- YES
, 我们可以通过这个来设置控制器是否需要显示大标题啦~
- Automatic
当然如果你不想每个控制器都写一遍, 那你可以自己用
写个
- RunTime
, 或者是自己封装一个
- Method Swizzling
, 一个
- RootController
, 这样子区分也可以:
- ChildController
而第二个变化就是在
里集成了
- UINavigationController
, 虽然
- UISearchController
并不是什么新的东西, 但在
- UISearchController
之后, 我们可以将
- iOS 11
的
- UINavigationItem
属性设置为
- searchController
.
- UISearchController
- UISearchController * searchController = [[UISearchController alloc] initWithSearchResultsController: nil];
- self.navigationItem.searchController = searchController;
- self.navigationItem.hidesSearchBarWhenScrolling = YES;
这里还有一个属性叫做
, 如果设置为
- hidesSearchBarWhenScrolling
的话, 那么在操作的时候, 就会根据滑动来隐藏这个
- YES
, 如果设置为
- searchController
, 就一直显示着啦, 这个属性默认是为
- NO
.
- YES
相信
发布的时候, 很多人都有一个黑人问号的表情, 安全区域(Safe area)是个什么鬼.
- iOS 11
其实早在
出来的时候就有两个属性
- iOS 7
和
- topLayoutGuide
, 这两个属性用于自动布局, 由于在
- bottomLayoutGuide
的时候引入了半透明的概念, 如果我们用
- iOS 7
这类控件布局的话, 那么在
- UITableView
和
- UINavigationBar
的背后会显示内容.
- UITabBar
而我们设置了
和
- topLayoutGuide
就不会有这个问题了, 但遗憾的是, 这两个属性是属于
- bottomLayoutGuide
而不是属于
- Controller
, 为了解决这个问题, 苹果爸爸捣鼓了一个新的东西, 就是现在的安全区域, 一个名为
- UIView
的东西, 是属于
- safeAreaLayoutGuide
的.
- UIVIew
- @property(nonatomic, readonly, strong) UILayoutGuide * safeAreaLayoutGuide;
很适合我们在安全区域里创建约束, 这样子我们就可以非常简单的适配各式各样的机型, 比如强调安全区域的
- safeAreaLayoutGuide
.
- iPhone X
如果我们只是想要测量一下这个安全区域, 那么
就会给我们返回一些值.
- safeAreaInsets
- typedef struct UIEdgeInsets {
- CGFloat top, left, bottom, right;
- } UIEdgeInsets;
如果我们想知道这些值是在什么时候改变的, 我们可以通过系统提供的两个
:
- API
- // UIView的API
- - (void) safeAreaInsetsDidChange;
- // UIViewController
- - (void) viewSafeAreaInsetsDidChange;
如果我们不去修改这个安全区域的话, 我们从
获得的值都是为0, 如果我们手动去修改的话, 就可以给动一动
- safeAreaInsets
这个属性:
- additionalSafeAreaInsets
- self.additionalSafeAreaInsets = UIEdgeInsetsMake(100, 50, 0, 0);
然后在看看效果:
如果你是使用
的话, 你可以随便点击一个控件或者是控制器, 然后查看是否勾上了
- storyboard
, 如果勾上了的话, 那么
- Use Safe Area Layout Guides
就会将在之前在顶部和底部的布局约束自动转换到安全区域中.
- Xcode
但有一个情况是需要自己手动的捣鼓的, 这个时候我们就要取消
, 然后再手动布局, 并且把之前相对于安全区域的约束双击, 然后设置为
- Use Safe Area Layout Guides
:
- SuperView
注意: 如果我们之前对
和
- topLayoutGuide
设置了约束, 而这个时候我们把
- bottomLayoutGuide
勾掉, 那么就会和刚刚说的那样,
- Use Safe Area Layout Guides
和
- UINavigationBar
的背后会显示内容, 如果我们要限制一下视图到顶部的话, 我们应该在视图的
- UITabBar
和
- topAnchor
添加一个约束, 但是在
- topLayoutGuide.bottomAnchor
中, 我们可以在
- iOS 11
和
- topAnchor
之间添加一个约束就哦了.
- safeAreaLayoutGuide.topAnchor
PS:指示状态栏和导航栏覆盖的区域.
- topLayoutGuide
指示状态栏和导航栏未覆盖的区域
- safeAreaLayoutGuide
也有一些新的变化, 比如有些属性被弃用了:
- Margins
被代替:
- @property(nonatomic) UIEdgeInsets layoutMargins;
代替的属性:
- @property(nonatomic) NSDirectionalEdgeInsets directionalLayoutMargins;
新的
是允许改变阅读方向, 用了
- directionalLayoutMargins
和
- leading
代替了
- trailing
和
- left
, 虽然仍然是用
- right
- layoutMarginsGuide
当我们设置
的时候, 它的值是会被添加到
- directionalLayoutMargins
中, 用来确定视图的实际边距, 如果我们不想要系统的最小边距, 我们可以把
- systemMinimumLayoutMargins
设置为
- viewRespectsSystemMinimumLayoutMargins
就可以了.
- NO
最后一点补充的一个属性为:
- @property(nonatomic) BOOL insetsLayoutMarginsFromSafeArea;
这个属性如果为
, 那么我们需要布局的视图边距就相对于安全区域, 如果设置为
- YES
, 那我们需要布局的视图边距就相对于其他视图的边距, 默认为
- NO
.
- YES
在
之前, 如果我们要对
- iOS 11
使用自动布局, 我们需要写一些逻辑来确定是约束
- UIScrollView
的滚动视图, 还是它的内容区域, 有时候在添加约束的时就会容易发生约束错误的情况, 比如在使用
- UIScrollView
布局.
- Storyboard
但在
时, 为了解决这个问题, 苹果爸爸给
- iOS 11
添加了两个约束属性:
- UIScrollView
- @property(nonatomic,readonly,strong) UILayoutGuide *contentLayoutGuide;
- @property(nonatomic,readonly,strong) UILayoutGuide *frameLayoutGuide;
这两个属性可以让我们给
添加约束时更加的精准, 但两个属性对于使用
- UIScrollView
的开发者来讲应该不是一件好消息, 因为这两个东西只能在代码中使用.
- Storyboard
除了上面两个属性歪, 还有另一个东西会影响到
内容区域:
- UIScrollView
- @property(nonatomic, assign) BOOL automaticallyAdjustsScrollViewInsets;
这个属性默认为
, 有时候我们的视图不会显示在
- YES
的底部就是这个属性搞的鬼, 把它设置为
- UINavigationBar
就好了.
- NO
但庆幸的是, 在
这个属性被干掉了, 系统也不再自动去设置
- iOS 11
的内容, 现在
- UIScrollView
的内容插入调整是从安全区域和我们在
- UIScrollView
设置的值计算得出, 由以下属性控制, 暂时共有四种控制方式:
- contentInset
- @property(nonatomic) UIScrollViewContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior;
- typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
- UIScrollViewContentInsetAdjustmentAutomatic,
- UIScrollViewContentInsetAdjustmentScrollableAxes,
- UIScrollViewContentInsetAdjustmentNever,
- UIScrollViewContentInsetAdjustmentAlways,
- } API_AVAILABLE(ios(11.0),tvos(11.0));
为了更加好理解, 这里展示一个
, 使用
- Demo
加代码去实现.
- Storyboard
的布局:
- ScrollView
的布局:
- UIImageView
的布局:
- TipsView
PS: 如果你的约束感觉不对的话, 只要双击约束, 就可以进入到里面去修改了.
这里的代码也不难, 主要就是针对
和
- TipsView
的布局:
- ScrollView
- CGFloat scrollIndicatorMargin = 8;
- self.tipsView.layer.cornerRadius = 8;
- [self.tipsView.leadingAnchor constraintEqualToAnchor:self.scrollView.frameLayoutGuide.leadingAnchor
- constant:scrollIndicatorMargin].active = YES;
- [self.tipsView.trailingAnchor constraintEqualToAnchor:self.scrollView.frameLayoutGuide.trailingAnchor
- constant:-scrollIndicatorMargin].active = YES;
- [self.tipsView.bottomAnchor constraintEqualToAnchor:self.scrollView.frameLayoutGuide.bottomAnchor
- constant:-scrollIndicatorMargin].active = YES;
- self.additionalSafeAreaInsets = UIEdgeInsetsMake(0,
- 0,
- self.tipsView.frame.size.height + scrollIndicatorMargin,
- scrollIndicatorMargin);
- self.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
如果想更详细的查看约束, 可以自行打开
慢慢研究哈~.
- Demo
在
推出的时候,
- iOS 7
就有一个属性叫做:
- UITableView
- @property(nonatomic) CGFloat estimatedRowHeight;
我们可以通过设置为
, 再给
- UITableViewAutomaticDimension
的内部视图做好适配的约束, 那么
- Cell
就可以自适应了.
- Cell
但这些都是需要我们自己手动去适配, 在
时, 这个东西已经不需要我们去写了, 默认就是
- iOS 11
.
- UITableViewAutomaticDimension
而且这个属性不单单只是对普通的
有用, 包括
- Cell
和
- SectionHeader
同样都有效, 如果你不需要的话, 可以手动把
- SectionFooter
设置为0.
- estimatedRowHeight
如果你的项目是使用比较老的
, 并且是使用
- Xcode
捣鼓的话, 你可以打开对应的
- Storyboard
找到
- Storyboard
, 然后找到对应的属性, 勾上
- UITableView
:
- Automatic
但是大规模的使用自动布局会造成一个性能上的问题, 这个之前也说过了, 那要怎么做呢? 我们可以把
设置为大概要显示多高的数值, 然后确定好
- estimatedRowHeight
内的所有约束, 这样子
- Cell
的性能就会得到改善, 当然最好的方式还是使用异步加载, 或者是高度缓存之类的, 这些资料的话, 大家可以自行去百度搜搜.
- UITableView
如果我们给对应的
添加
- UITableViewController
的话, 那么它会自动加载到
- UIRefreshControl
中:
- UINavigationBar
代码也是很简单:
- self.tableView.refreshControl = [[UIRefreshControl alloc] init];
- [self.tableView.refreshControl addTarget:self
- action:@selector(refreshControllerAction)
- forControlEvents:UIControlEventValueChanged];
- - (void) refreshControllerAction {
- dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
- [self.tableView.refreshControl endRefreshing];
- });
- }
我们都知道在
的时候, 苹果爸爸就给
- iOS 7
的分割线添加了一些偏移, 但那时候只能通过
- UITableView
去设置, 但这种设置太过死板缺少灵活性.
- separatorInset
在
之后, 苹果爸爸又添加了一个属性:
- iOS 11
- @property (nonatomic) UITableViewSeparatorInsetReference separatorInsetReference;
- typedef NS_ENUM(NSInteger, UITableViewSeparatorInsetReference) {
- UITableViewSeparatorInsetFromCellEdges,
- UITableViewSeparatorInsetFromAutomaticInsets
- } API_AVAILABLE(ios(11.0), tvos(11.0));
的边缘值, 也就是0.
- Cell
我们都知道了在
的时候发布了一个灵活布局的堆栈视图
- iOS 9
, 有了它我们就不需要管理大量的约束.
- UIStackViews
但有一些场景还是没有适应到了, 现在就可以解决这个问题了, 在
时, 苹果爸爸给它增加了更多的特性, 比如我们在多个视图里, 有一个视图比较特殊, 要离别的地方比较远, 之前是不可实现的, 现在可以了, 让我们来看看吧:
- iOS 11
详细的约束布局就麻烦大家去工程里看看吧, 这里就不多说了, 直接看代码:
- [UIViewPropertyAnimator runningPropertyAnimatorWithDuration:0.5
- delay:0
- options:UIViewAnimationOptionCurveEaseInOut
- animations:^{
- if (self.action) {
- [self.stackView setCustomSpacing:self.customSpacing
- afterView:self.sunImageView];
- } else {
- [self.stackView setCustomSpacing:0
- afterView:self.sunImageView];
- }
- self.action = !self.action;
- } completion:nil];
在以前的
版本里, 如果我们要使用矢量图, 那么
- Xcode
和
- Xcode
系统会将这个矢量图在编译的时候自动生成不同大小的图片.
- iOS
而在
中, 我们可以勾选一个东西, 告诉系统保留矢量数据:
- Xcode 9
这样子的话, 当我们或者是其他用户在辅助功能里开启的大字号字体时, 我们就可以通过设置
的一个属性来保证可以正常显示:
- UIImageView
- @property(nonatomic) BOOL adjustsImageSizeForAccessibilityContentSizeCategory;
在
里, 我只设置了一个图标的属性, 所以这个图标是正常显示, 而另外两个是不正常的:
- Demo
这个属性可以在
找到, 也可以在代码里实现, 只要是
- Storyboard
就
- UIImageView
了.
- ok
最后就是补充一下给
或者是
- UINavigationBar
添加自定义视图了.
- UIToolbar
我们还是拿刚刚的那个太阳, 星星和月亮的来举例子, 这里只要一个
和一个
- UIImageView
就好了.
- UILabel
这个布局和我们去自定义
差不多, 直接用约束捣鼓就完事, 而且还特别的简单:
- UITableViewCell
运行的话, 我们可以看到是正常显示的, 但发现会有一个白色的背景色, 我们只要找到对应的
, 然后把颜色清理掉就ok了.
- UIView
在
有一些会影响到自动布局的变化, 还有些新增的属性来帮助我们开发者更便捷的开发, 如果你觉得光看文章还不够的话, 可以去看看原汁原味的
- iOS 11
的介绍:
- WWDC 2017
github.com/CainRun/iOS…
来源: https://juejin.im/post/5a03f4b4f265da432f30905b