Autolayout和VFL

Autolayout，開始于iOS6.0

 

一.什么时候用autolayout比較适合

 

１.不负责任的骑墙派说法：apple的设备越来越多了，你的应用应该都使用al。

（而且用sb）

 

２.要看应用内容决定。假设你的内容是信息众多。同一时候须要展示的类别也非常多。尺寸动态不定。甚至这些是在列表中的。（如社交应用）。Al能给于非常大的帮助。

 

３.Mac os的应用。如今都做iOS了。

mac app的窗体。会有大小变化。al比較合适。

 

４.支持多向转屏的iPad应用。（有须要支持多方向iphone场景么？那么长，脑残了？）

 

５.其它业务不复杂,页面较少的应用，事实上。cocoa程序猿写了多年code都有自己的ui编程习惯，这些习惯对于他们来说是非常高效的。就算是第一项所说。布局的坐标都是相对的。

 

假设是习惯于code写布局的。建议能够继续沿用，同一时候也要学习al。自我感觉al和传统布局写法，工作量不会相差太多。

可是VFL用熟练了以后会有非常大的改善。

 

二.autolayout的基础理论

 

al的核心出发点是

 

1.view具有自我计算尺寸，布局的能力。通过它自身的内容，可以得到尺寸。

 

2.view的布局位置，确定于它与superview及其它view的关系。

 

3.与传统的autoresizingmask自适应相比，al更精确，能绝对的确定view的布局。

 

4.view不一定须要一个初始的rect。al中，view假设有足够的constraint，便能够确定自己的尺寸和位置，而且知道自己和其它view的关系。即，想确定view的布局。就给它（们）加入constraint。

 

三.xib下的autolayout

 

似乎al和xib布局模式生来就是要搞在一起的。用xib加al，view布局很easyeasy。

编程工作立马变成了美工的连线拼图游戏。

 

开启xib或者sb后，选择须要view(s)。选择menu的Editor，选择Pin。子菜单的项目就是可用的constraints。

Width:固定自身宽度

 

Height:。。

。

 

H- Spacing: 固定两个view的水平间距

 

V- Spacing:。。。

 

以下４个各自是view相对于superview的左、右、上、下的间距

 

Widths Equally:两个view保持宽度同样

 

Heights Equally:。。。

 

xib界面右下角工具条也有能够编辑constraint的方式：

每一个constraint加入后都是能够编辑的。

选中某个constraint后开启右边栏选inspector。能够改动数值。（这个数值是view间的偏移量）和优先级。

 

自己慢慢拖着玩去。这不是傻瓜教程。点到位，自己研究。

 

xib下的al比較直观。能够基本看到效果和误差值。

还有不对的constraint的提示。

少了constraint编译器会补。多了会提示报错。（只是都会引起界面布局不对。自己慢慢调吧，哥如今还是满篇alert，没有让编译器感觉矛盾费解的constraint。都是能够work的。）

 

还有resolve的方式解决constraint的问题，抱歉，我不会。

 

四.编码方式使用autolayout

 

对于页面不多。的普通应用。xib/sb加al。拖拖拽拽。

娱乐中就能够完毕UI的工作。

al的确给于了不少方便。

 

只是多年的强迫症程序员怎么会忍受这样的非常逊的方式。（拖积木？不写程序？好像一天没做事。）

 

1.Visual format language　（应该不算语言）

Apple的project师非常有爱。发明了这样的哭笑不得的象形文字。感觉它就是种解析方式。

 

Apple的官方文档给出了少之又少的文档和坑爹的样例。（视频我没看，不知道怎么样）网上的同学们也写了点不痛不痒的几句代码。你这是学了１＋１就让人搞微积分的节奏么？要写不写清楚，不如不写。

 

从厚道的老外那看了几篇。自己体会了些，分享给大家。仅仅是个基本水平吧，会了这些，代码写al应该没有问题了。深入的我也还不会。希望遇到更有爱的牛人分享。

 

VFL在程序中由支持：

 

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

 

 

- 它返回一组constraint. 

- format是你的VFL字串，等下讲。

 

- opts自己点去头文件看。

有些情况会用，等下有样例。

 

- metrics是一个奇异的字典。是你自定义的。

这个字典里面的key能够写在format字串中。编译器解析时。自己主动替换为metrics字典中的value。

等下有样例。

 

- views是须要constraint关系的全部view.(也能够是一个)

  

2.VFL样例

写vfl字串的时候，脑海里要想象出画面的合理性。不合理的constraint会导致程序执行时报错或者直接崩溃。

 

随便写几个

 

NSDictionary *dict1 = NSDictionaryOfVariableBindings(_boxV,_headerL,_imageV,_backBtn,_doneBtn);
NSDictionary *metrics = @{@"hPadding":@5,@"vPadding":@5,@"imageEdge":@150.0};
NSString *vfl = @"|-hPadding-[_boxV]-hPadding-|";
NSString *vfl0 = @"V:|-25-[_boxV]";
NSString *vfl3 = @"V:|-vPadding-[_headerL]-vPadding-[_imageV(imageEdge)]-vPadding-[_backBtn]-vPadding-|";

 

dict1就是api 中须要的最后一个參数views。由上述宏来完毕。

 

metrics定义了一些vfl中要用的參数。

 

以下有些vfl字串，一看便知怎样使用metrics。

 

看到：

 

1)"|"表示superview. 

 

    |-间距-[view1对象名]-(>=20)-[view2对象名]

 

    不写H/V就表示横向。间距能够写固定值也可写>/<。

 

    形象化的理解。"|"是用来确定view上、下、左、右关系的。

 

    想要确定从上到下的关系。就加V:|。那么这个vfl字串就能够描写叙述从上到下的view们的关系。

 

2)看到vfl3里面，方括号表示view。圆括号表示尺寸数值。支持大小等于。或者还有一个view　|-[view1(view2)]，v１的宽度等于v２。

 

3)优先级用＠表示。如V:|-50@750-[view(55)]。或者写到metrics里面更好。

 

    详细定义查看UILayoutPriority。有几个固定的数值。1000表示必须支持。

 

4)options。这个要看详细须要。假设是竖排V布局。能够加入NSLayoutFormatAlignAllLeft，让他们对齐。

 

    依据须要也能够加入按位或NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight。（鬼知道什么须要，自己看经验吧）

 

5)写好以后一般把constraint加入给superview：

 

NSString *vfl1 = @"|-hPadding-[_headerL]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict1]];

 

 

6)另一个api用于生成单个constaint

 

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

 

对于參数。记得。view1.attr1 = view2.attr2 * multiplier + constant就好。

这个是不用VFL的。好理解，可是不方便。假设用这个写。工作两不会比传统布局少多少。

 

 

五.实际操作中的问题

上面都是理论。世界操作会有些奇怪的问题要注意。这节才是重点。

 

xib模式，没啥要注意的。xib里报warning就报吧，我也不知道怎么弄，一切正常就好。

 

编码模式中，

1.addConstraint(s)前，view应该去部被addSubView上去了。

2.不必给views写frame

3.给必要的view关掉AutoresizeingMask。

[_aView setTranslatesAutoresizingMaskIntoConstraints:NO];

4.UILabel换行要写linebreakMode,要写numberOfLines(iOS7.0默认好像是1，坑爹了)

5.UILabel要想换行。一定要加入preferredMaxLayoutWidth。

否则没法初始化宽度。

 

编码模式感受到的最慷慨便。label换行不用写行高计算了。

全然自己主动适应。

label所在的superview也会自己主动计算rect。这才是al的精华。

 

所以，能够不用写这些了：

 

[objc] view plaincopy
/*
    if([[UIDevice currentDevice].systemVersion floatValue]<7.0){
        CGSize titleS = [title sizeWithFont:[_headerL font]
                           constrainedToSize:CGSizeMake(270.0, CGFLOAT_MAX)
                               lineBreakMode:NSLineBreakByWordWrapping];

        _headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,
                                    _headerL.frame.size.width, titleS.height);
    }else{
        CGRect titleR = [title boundingRectWithSize:CGSizeMake(270.0, CGFLOAT_MAX)
                                            options:NSStringDrawingUsesLineFragmentOrigin
                                         attributes:nil
                                            context:nil];
        headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,
                                   _headerL.frame.size.width, titleR.size.height);
    }
    */