玩转iOS开发：iOS 11 新特性《Layout的新特性》

时间  2019-11-17
标签 ios 开发 特性 Layout的新特性 栏目 iOS 繁體版
原文   原文链接

文章分享至个人我的技术博客: https://cainluo.github.io/15101116434794.htmlhtml

随着苹果爸爸愈来愈多尺寸的设备发布, 还有iOS设计的改变, 特别是在iOS 11以后, 比大更大的导航栏, 而后再滚动的时候能够改变大小等等操做.ios

但这些问题都不是什么问题, 就如同在WWDC 2017同样, 苹果爸爸在跟咱们开发者展现同样东西, 也是他一直想咱们去使用的东西, 那就是自动布局.git

随着什么10.5英寸, 5.8英寸, 12.9英寸这些设备的发布, 让咱们开发者在适配多个尺寸的时候也愈来愈麻烦了, 但随着使用自动布局的发布可让咱们开发者更加注重App的业务上的开发, 不再用去计算这个差多少, 那个差多少, 旋转一下又怎么处理.github

这里咱们就使用一个简单的小项目来捣鼓就行了.缓存

转载声明:如须要转载该文章, 请联系做者, 而且注明出处, 以及不能擅自修改本文.安全

更大的标题

在iOS 11里, 最明显的变化就是导航栏里多了一个大标题:微信

1

这里咱们能够经过设置UINavigationBar的一个BOOL值属性来决定是否显示这个大标题:app

@property (nonatomic, readwrite, assign) BOOL prefersLargeTitles;
复制代码

那若是你是在Storyboard上的话, 你也能够在UINavigationController上的UINavigationBar设置这个属性, 勾上就是为显示大标题, 不勾上就不显示.异步

虽然prefersLargeTitles是打开大标题的主开关, 但在每个控制器里, 咱们均可以每一个控制器里的UINavigationItem来显示是否显示大标题, 或者是普通标题, 这里共有三种显示类型:ide

typedef NS_ENUM(NSInteger, UINavigationItemLargeTitleDisplayMode) {
    UINavigationItemLargeTitleDisplayModeAutomatic,
    UINavigationItemLargeTitleDisplayModeAlways,
    UINavigationItemLargeTitleDisplayModeNever,
} NS_SWIFT_NAME(UINavigationItem.LargeTitleDisplayMode);
复制代码

要使用这个属性呢, 咱们得提早把prefersLargeTitles大标题属性设置为YES, 而后才能去捣鼓上面的三种显示模式, 默认为Automatic, 咱们能够经过这个来设置控制器是否须要显示大标题啦~

固然若是你不想每一个控制器都写一遍, 那你能够本身用RunTime写个Method Swizzling, 或者是本身封装一个RootController, 一个ChildController, 这样子区分也能够:

2

搜索控制器

而第二个变化就是在UINavigationController里集成了UISearchController, 虽然UISearchController并非什么新的东西, 但在iOS 11以后, 咱们能够将UINavigationItem的searchController属性设置为UISearchController.

UISearchController *searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
    
    self.navigationItem.searchController = searchController;
    self.navigationItem.hidesSearchBarWhenScrolling = YES;
复制代码

3

这里还有一个属性叫作hidesSearchBarWhenScrolling, 若是设置为YES的话, 那么在操做的时候, 就会根据滑动来隐藏这个searchController, 若是设置为NO, 就一直显示着啦, 这个属性默认是为YES.

4

安全区域

相信iOS 11发布的时候, 不少人都有一个黑人问号的表情, 安全区域(Safe area)是个什么鬼.

其实早在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;
复制代码

若是咱们不去修改这个安全区域的话, 咱们从safeAreaInsets得到的值都是为0, 若是咱们手动去修改的话, 就能够给动一动additionalSafeAreaInsets这个属性:

self.additionalSafeAreaInsets = UIEdgeInsetsMake(100, 50, 0, 0);
复制代码

而后在看看效果:

若是你是使用storyboard的话, 你能够随便点击一个控件或者是控制器, 而后查看是否勾上了Use Safe Area Layout Guides, 若是勾上了的话, 那么Xcode就会将在以前在顶部和底部的布局约束自动转换到安全区域中.

6

但有一个状况是须要本身手动的捣鼓的, 这个时候咱们就要取消Use Safe Area Layout Guides, 而后再手动布局, 而且把以前相对于安全区域的约束双击, 而后设置为SuperView:

7

8

注意: 若是咱们以前对topLayoutGuide和bottomLayoutGuide设置了约束, 而这个时候咱们把Use Safe Area Layout Guides勾掉, 那么就会和刚刚说的那样, UINavigationBar和UITabBar的背后会显示内容, 若是咱们要限制一下视图到顶部的话, 咱们应该在视图的topAnchor和topLayoutGuide.bottomAnchor添加一个约束, 可是在iOS 11中, 咱们能够在topAnchor和safeAreaLayoutGuide.topAnchor之间添加一个约束就哦了. PS: topLayoutGuide指示状态栏和导航栏覆盖的区域. safeAreaLayoutGuide指示状态栏和导航栏未覆盖的区域

9

10

边距

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

为了更加好理解, 这里展现一个Demo, 使用Storyboard加代码去实现.

ScrollView的布局:

11

UIImageView的布局:

12

TipsView的布局:

13

14

PS: 若是你的约束感受不对的话, 只要双击约束, 就能够进入到里面去修改了.

15

16

这里的代码也不难, 主要就是针对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;
复制代码

17

若是想更详细的查看约束, 能够自行打开Demo慢慢研究哈~.

自适应的Cells

在iOS 7推出的时候, UITableView就有一个属性叫作:

@property (nonatomic) CGFloat estimatedRowHeight;
复制代码

咱们能够经过设置为UITableViewAutomaticDimension, 再给Cell的内部视图作好适配的约束, 那么Cell就能够自适应了.

但这些都是须要咱们本身手动去适配, 在iOS 11时, 这个东西已经不须要咱们去写了, 默认就是UITableViewAutomaticDimension.

并且这个属性不仅仅只是对普通的Cell有用, 包括SectionHeader和SectionFooter一样都有效, 若是你不须要的话, 能够手动把estimatedRowHeight设置为0.

若是你的项目是使用比较老的Xcode, 而且是使用Storyboard捣鼓的话, 你能够打开对应的Storyboard找到UITableView, 而后找到对应的属性, 勾上Automatic:

18

可是大规模的使用自动布局会形成一个性能上的问题, 这个以前也说过了, 那要怎么作呢? 咱们能够把estimatedRowHeight设置为大概要显示多高的数值, 而后肯定好Cell内的全部约束, 这样子UITableView的性能就会获得改善, 固然最好的方式仍是使用异步加载, 或者是高度缓存之类的, 这些资料的话, 你们能够自行去百度搜搜.

刷新控制器

若是咱们给对应的UITableViewController添加UIRefreshControl的话, 那么它会自动加载到UINavigationBar中:

19

代码也是很简单:

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];
    });
}
复制代码

UITableVIew的分割线

咱们都知道在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));
复制代码
  • UITableViewSeparatorInsetFromCellEdges: 默认值, 若是使用该属性的话, 分割线的起始坐标为Cell的边缘值, 也就是0.
  • UITableViewSeparatorInsetFromAutomaticInsets: 若是使用该属性的话, 分割线的起始坐标会带上默认值, 好比左边的偏移为15.

20

堆栈视图Stack Views

咱们都知道了在iOS 9的时候发布了一个灵活布局的堆栈视图UIStackViews, 有了它咱们就不须要管理大量的约束.

但有一些场景仍是没有适应到了, 如今就能够解决这个问题了, 在iOS 11时, 苹果爸爸给它增长了更多的特性, 好比咱们在多个视图里, 有一个视图比较特殊, 要离别的地方比较远, 以前是不可实现的, 如今能够了, 让咱们来看看吧:

21

详细的约束布局就麻烦你们去工程里看看吧, 这里就很少说了, 直接看代码:

[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中, 咱们能够勾选一个东西, 告诉系统保留矢量数据:

22

这样子的话, 当咱们或者是其余用户在辅助功能里开启的大字号字体时, 咱们就能够经过设置UIImageView的一个属性来保证能够正常显示:

@property (nonatomic) BOOL adjustsImageSizeForAccessibilityContentSizeCategory;
复制代码

在Demo里, 我只设置了一个图标的属性, 因此这个图标是正常显示, 而另外两个是不正常的:

23

这个属性能够在Storyboard找到, 也能够在代码里实现, 只要是UIImageView就ok了.

自定义导航栏视图

最后就是补充一下给UINavigationBar或者是UIToolbar添加自定义视图了.

咱们仍是拿刚刚的那个太阳, 星星和月亮的来举例子, 这里只要一个UIImageView和一个UILabel就行了.

这个布局和咱们去自定义UITableViewCell差很少, 直接用约束捣鼓就完事, 并且还特别的简单:

24

运行的话, 咱们能够看到是正常显示的, 但发现会有一个白色的背景色, 咱们只要找到对应的UIView, 而后把颜色清理掉就ok了.

总结

在iOS 11有一些会影响到自动布局的变化, 还有些新增的属性来帮助咱们开发者更便捷的开发, 若是你以为光看文章还不够的话, 能够去看看原汁原味的WWDC 2017的介绍:

工程

https://github.com/CainRun/iOS-11-Characteristic/tree/master/3.Layout

最后

码字很费脑, 看官赏点饭钱可好

微信

支付宝
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程