IOS UI 设计技术

最新推荐文章于 2024-11-14 22:52:36 发布

weixin_30384031

最新推荐文章于 2024-11-14 22:52:36 发布

阅读量86

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/liyufeng2013/p/4028995.html

版权

AutoLayout

AutoLayout是一种基于约束的，描述性的布局系统。
程序员—-(cgrect)—>frame(center+bounds) =====> 程序员—(NSLayoutConstraint)—>AutoLayout—(cgrect)—>center+bounds
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结构添加与移动对比
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 属性前面出现了+号
总结 UI设计发展是越来越专业而且 apple 追求智能化多样化 UI 独立