IOS UI 设计技术

AutoLayout

AutoLayout是一种基于约束的，描述性的布局系统。
程序员—-(cgrect)—>frame(center+bounds) =====> 程序员—(NSLayoutConstraint)—>AutoLayout—(cgrect)—>center+bounds
Autolayout 基本使用方法

interfaceBuilder

Alignment Constraints
custom Constraints
Spacing to nearest neighbor 这个是系统自己选定的依据是 interfacebuilder 现有的状态多层布局时会有很多麻烦(目前不知道解决办法)
Constraint to margins iOS8 添加的新特性(左右16) .苹果UI引导方向
Layout Guide

用于适配 iOS7 以前的版本和以后版本的差异 ,主要原因是 iOS7以后navigationController 的controller.view 的大小与navigation.view的大小相同 layout Guide 用于辅助布局
Align

对齐方式主要针对文字的对齐

编码NSlayoutContrainst

模型: item1.attribute = multiplier ⨉ item2.attribute + constant

代码: [NSLayoutConstraint constraintWithItem:item1
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:item2
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-padding];
添加:约束要添加到View 上才能生效.View 官方推荐的View选定规则:同时包含两item的最小子树的根节点(树模型)
优先级: @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;
刷新:setNeedsUpdateConstraints和-layoutIfNeeded两个方法来刷新约束的改变.
内置大小(受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]; }
Visual Format Language 可视化格式语言

Apple 为减少程序员的工作量推出的约束快速生成技术

代码:
UIButton *cancelButton = ...;
    UIButton *acceptButton = ...;
    viewsDictionary = NSDictionaryOfVariableBindings(cancelButton,acceptButton);
    [NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-[acceptButton]"
                                            options:0
                                            metrics:nil
                                              views:viewsDictionary];
多种方式:

[cancelButton(72)]-12-[acceptButton(50)]
所有出现数字的地方多可以添加关系比如 [cancelButton(>=72)]-(12)-[acceptButton(50)]
可以添加优先级用关键字符@ 比如 [cancelButton(>=72@1000)]-(12)-[acceptButton(50)]
可以用名称标示相等比如 [cancelButton(>=72@1000)]-(12)-[acceptButton(==cancelButton)]
用V: H: 标示后面语句定义的方向用 | 标示 Constraints挂载View的边界

缺陷:

不能标示倍数
不能表示对齐

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));
                }];

relationship: .equalTo equivalent to NSLayoutRelationEqual

.lessThanOrEqualTo equivalent to NSLayoutRelationLessThanOrEqual

.greaterThanOrEqualTo equivalent to NSLayoutRelationGreaterThanOrEqual
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
内部简化 : //these two constraints are exactly the same
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
NSNumber : make.top.equalTo(rtLabel0.bottom).offset(@0);
NSArray : make.height.equalTo(@[label.mas_height, rtLabel.mas_height]);
make.height.equalTo(@[label, rtLabel]);
make.left.equalTo(@[label, @100, rtLabel.right]);
优先级 : make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);
MASCompositeConstraints : 扩展了对 edge size center 的支持
总之masonry 使得约束实现简单直观