IOS UI 设计 技术

 

AutoLayout

1.  AutoLayout是一种基于约束的，描述性的布局系统。
   程序员—-(cgrect)—>frame(center+bounds)    =====>   程序员—(NSLayoutConstraint)—>AutoLayout—(cgrect)—>center+bounds
2.  Autolayout 基本使用方法
1. interfaceBuilder
1. Alignment Constraints
   
2. custom Constraints
   
   
3. Spacing to nearest neighbor  这个是系统自己选定的 依据是 interfacebuilder 现有的状态  多层布局时会有很多麻烦(目前不知道 解决办法)
4. Constraint to margins iOS8 添加的新特性(左右16) .苹果UI引导方向
5. Layout Guide
   
   用于适配 iOS7 以前的版本 和以后版本的差异 ,主要原因 是 iOS7以后navigationController 的controller.view 的大小与navigation.view的大小相同 layout Guide 用于辅助布局
6. Align
   
   对齐方式  主要针对文字的对齐
2. 编码NSlayoutContrainst
1. 模型:  item1.attribute = multiplier ⨉ item2.attribute + constant
3. 代码: [NSLayoutConstraint constraintWithItem:item1
                                    attribute:NSLayoutAttributeBottom
                                    relatedBy:NSLayoutRelationEqual
                                       toItem:item2
                                    attribute:NSLayoutAttributeBottom
                                   multiplier:1.0
                                     constant:-padding];
4. 添加:约束要添加到View 上才能生效.View 官方推荐的View选定规则:同时包含两item的最小子树的根节点(树模型)
5. 优先级: @property UILayoutPriority priority; 取值范围0--1000
   typedef float UILayoutPriority;
   static const UILayoutPriority UILayoutPriorityRequired NS_AVAILABLE_IOS(6_0) = 1000;
   static const UILayoutPriority UILayoutPriorityDefaultHigh NS_AVAILABLE_IOS(6_0) = 750;
   static const UILayoutPriority UILayoutPriorityDefaultLow NS_AVAILABLE_IOS(6_0) = 250;
   static const UILayoutPriority UILayoutPriorityFittingSizeLevel NS_AVAILABLE_IOS(6_0) = 50;
6. 刷新:setNeedsUpdateConstraints和-layoutIfNeeded两个方法来刷新约束的改变.
7. 内置大小(受view内容的影响view必须有多大空间才可以) 例如:UILabel(文字)
   UILabel NSTextfield 有一个preferredMaxLayoutWidth 属性用来处理内置大小
   代码:@implementation MyLabel - (void)layoutSubviews{ self.preferredMaxLayoutWidth = self.frame.size.width; [super layoutSubviews];} @end - (void)layoutSubviews{
           [self invalidateIntrinsicContentSize];
       [super layoutSubviews]; } - (CGSize)intrinsicContentSize{
       return (...); } - (void)viewDidLayoutSubviews{ [super viewDidLayoutSubviews]; myLabel.preferredMaxLayoutWidth = myLabel.frame.size.width; [self.view layoutIfNeeded]; }
8. Visual Format Language 可视化格式语言
   
   Apple 为减少程序员的工作量 推出的约束快速生成 技术  
1. 代码: 
       UIButton *cancelButton = ...;
       UIButton *acceptButton = ...;
       viewsDictionary = NSDictionaryOfVariableBindings(cancelButton,acceptButton);
       [NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-[acceptButton]"
                                               options:0
                                               metrics:nil
                                                 views:viewsDictionary];
2. 多种方式:
1. [cancelButton(72)]-12-[acceptButton(50)]
2. 所有出现数字的地方 多可以添加关系比如 [cancelButton(>=72)]-(12)-[acceptButton(50)]
3. 可以添加优先级 用关键字符@  比如 [cancelButton(>=72@1000)]-(12)-[acceptButton(50)]
4. 可以用名称标示相等  比如 [cancelButton(>=72@1000)]-(12)-[acceptButton(==cancelButton)]
5. 用V:  H: 标示 后面语句定义的方向  用 | 标示 Constraints挂载View的边界
3. 缺陷:
1. 不能标示倍数
2. 不能表示对齐
9. Masonry: 野区推出的简化框架
   例子: [label makeConstraints:^(MASConstraintMaker *make) {
                       make.left.equalTo(self).offset(@(left));
                       make.top.equalTo(rtLabel0.bottom).offset(@0);
                       make.width.equalTo(@(size.width+3 ));
                       make.height.equalTo(@(size.height));
                   }];
1. relationship:   .equalTo equivalent to NSLayoutRelationEqual
   
                  .lessThanOrEqualTo equivalent to NSLayoutRelationLessThanOrEqual
   
                  .greaterThanOrEqualTo equivalent to NSLayoutRelationGreaterThanOrEqual
2. Attribute : MASViewAttribute         NSLayoutAttribute
              view.mas_left            NSLayoutAttributeLeft
              view.mas_right           NSLayoutAttributeRight
              view.mas_top NSLayoutAttributeTop
              view.mas_bottomNSLayoutAttributeBottom
              view.mas_leadingNSLayoutAttributeLeading
              view.mas_trailingNSLayoutAttributeTrailing
              view.mas_widthNSLayoutAttributeWidth
              view.mas_heightNSLayoutAttributeHeight
              view.mas_centerXNSLayoutAttributeCenterX
              view.mas_centerYNSLayoutAttributeCenterY
              view.mas_baselineNSLayoutAttributeBaseline
3. 内部简化 : //these two constraints are exactly the same
              make.left.greaterThanOrEqualTo(label);
              make.left.greaterThanOrEqualTo(label.mas_left);
4. NSNumber : make.top.equalTo(rtLabel0.bottom).offset(@0);
5. NSArray  :  make.height.equalTo(@[label.mas_height, rtLabel.mas_height]);
               make.height.equalTo(@[label, rtLabel]);
               make.left.equalTo(@[label, @100, rtLabel.right]);
6. 优先级    :  make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
               make.top.equalTo(label.mas_top).with.priority(600);
7. MASCompositeConstraints : 扩展了对 edge size center 的支持
8. 总之masonry 使得约束实现 简单直观
10. autoLayout性能
    
    图中为性能对不图  横轴 View的个数 纵轴 ms
    
    平行view结构 和深度view结构 对比
    
    在平行View结构 和 深度 View结构 添加 与移动对比
3. size class iOS 8 为了适配多尺寸的iOS设备推出的技术
   
   形成9种选择  最简单的理解就是 storyboard 以前就是一个 现在9个了  几乎所有多屏尺寸相关的 设置 都与size class 相关
   
1. 开关 : 
   
   苹果技术再牛  我们可以不用
2. 合并与分离关系  我们之前说过 storyboard 有9个  都编辑很累的 
1. 在 any Width|Any Height 下的操作是同时编辑9个 storyboard
2. 在任一个 为Any 时 同时编辑 三个
3. 只有四种情况 特定编辑一个
3. 约束编辑界面  属性前面出现了+号
   
4. font 属性前面出现了+号
   
   
4. 总结 UI设计 发展是越来越专业 而且 apple 追求智能化 多样化 UI 独立