autolayout

作者: ClarkWang_001 | 来源:发表于2015-06-23 21:10 被阅读881次

    autolayout: 相对布局的思维

    1.两种语法:

    1)VFL(visual format language)

    NSString *vfl = @"V:|-5-[_view]-10-  
      [_imageView(20)]-10-[_backBtn]-5-|";
    

    2)手动添加约束:

    [self.view addConstraint: [NSLayoutConstraint               constraintWithItem:blueView
                attribute:NSLayoutAttributeLeft
                relatedBy:NSLayoutRelationEqual
                toItem:redView
                attribute:NSLayoutAttributeLeft
                multiplier:1
                constant:0]];```
    

    2.优先级(Priority):解决约束的冲突

    3.视图显示前会有两个步骤,顺序是updating constraints -> laying out views -> 显示。

    Updating constraints:从子视图到父视图,布局会在实际设置frame时使用,调用setNeedsUpdateConstraints触发操作。自定义视图的话可以重写updateConstraints增加本地约束。
    Laying out views:布局视图是从父视图到子视图,通过setNeedsLayout触发。调用layoutIfNeeded可以强制系统立刻更新视图布局。

    4.autosizing 区别:

    autosizing masks告诉子视图调整大小,但又没告诉子视图该调整多少!!不能精确控制!
    autosizing的虚线表示是硬编码;实线表示是autosizing;

    5.autolayout

    T-bars仍然是橘黄色的。这意味这你的布局没有完成,是有问题的;蓝色意味着正确;

    从Editor菜单中,选择Pin中选项中去添加各种约束;

    与手动写代码计算的原理基本相似,都是动态计算但最终还是用frame来确定位置,

    而autolayout就是不用考虑设备问题,我的理解是就是指定计算规则,让计算机帮你去计算;改为人为更容易理解的方式,告诉计算机你要怎么做,然后说你去执行吧。自动布局比autosize可以更精准的控制坐标;

    autolayout可以处理多语言的问题;

    这这是Xcode5相对Xcode4来说最大的一个提升:再也不强制你总是有一个有效的布局。如果你根本不提供任何约束,Xcode自动分配一套默认的约束.Xcode中的规则是:Xcode只为那些你没有设置任何约束的对象创建自动约束。一旦你增加一个约束,你便是告诉Xcode你接管了这个视图。Xcode将不再增加任何自动约束,并希望你为这个视图增加需要的约束。

    拖动一个视图会出现2个框,一个是虚线边框,一个是实线边框。虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。如果你打算更新新的约束到新拖动的位置,Editor菜单上有一个Resolve Auto Layout Issues子菜单。从这个菜单中,选中Update Constraints。

    添加center约束,从Editor菜单选择Align\Horizontal Center in Container.这会增加一个很长的橙色线段,线之所以是橙色是因为你才仅仅指定了button的X轴,但Y轴并没有指定约束。使用Editor\Pin菜单在button和视图底部间增加一个Vertical Space约束。

    Editor-->pin 用法
    功能 用途
    width 指定固定宽度
    heigth 指定固定高度
    horizontal spacing 指定两个视图水平空隙
    vertical spacing 指定两个视图垂直空隙
    leading space to superview 相对父视图的左边间距
    trailing space to superview 相对父视图的右边间距
    top space to superview 相对父视图的上边间距
    bottom space to superview 相对父视图的底边间距
    widths Equally 指定两个视图宽度相等
    heights Equally 指定两个视图高度相等
    Align 是指定各种对齐的方式
    功能 用途
    left edges 2个视图左对齐
    right edges 2个视图右对齐
    top edges 2个视图上对齐
    bottom edges 2个视图下对齐
    Horizontal Centers 2个视图水平中间对齐
    Vertical Centers 2个视图垂直中间对齐
    baselines 2个视图按字体水平对齐
    Horizontal Center in Container 控件在父类中水平居中显示
    vertical Center in Container 控件在父类中上下居中显示

    xcode 中,建立2个视图之间的约束可以按住ctrl,拖动一个视图到另外一个视图上;
    点击红色箭头,可以看到存在的问题;

    intrinsic content size 各种controller内容(文字,图片等)自适应宽度;

    你也可以通过指定宽度和高度来

    添加约束的方式

    1.the Editor\Pin and Align menus;
    2.Ctrl-dragging between views.
    3.interface 下边的3个按钮;

    视图效果预览

    Open the Assistant editor (press the button in Xcode’s toolbar that looks like a butler/alien) and select Preview in the jump bar,点击左下角+可以查看在不同设备上的效果;

    Unable to simultaneously satisfy constraints. 设置的约束如果有冲突,则console报这个错误;
    Content Priority Ambiguity error ,当一个视图的size发生变化时,没有指定2个子视图的priority时,autolayout会不知道该怎么调整2个子视图的大小; go into the Size inspector set the vertical Content Compression Resistance Priority to 751. set Content Hugging Priority to 252.

    Content Hugging Priority(内容压缩优先级)
    Content Compression Resistance Priority(内容抗压缩优先级)
    如果 Constraint 发生冲突时,会先找优先级高的UIView,满足优先级高的UIView 的Constraint 后再依次找优先级低的 Constraint 满足,最后改变 View 的 Frame。如果发生多个 Constraint不能同时满足的情况,就发生了Unsatisfiable Constraints的错误。
    打印约束错误:po [[UIWindow keyWindow] _autolayoutTrace]
    以下2个属性都是针对内容的处理方式
    Content Compression Resistance = 不许挤我!当空间不够时怎么处理的优先级!!!
    这个属性的优先级(Priority)越高,越不“容易”被压缩。也就是说,当整体的空间装不小所有的View的时候,Content Compression Resistance优先级越高的,现实的内容越完整。

    Content Hugging = 抱紧!整体空间足够大时,怎么处理

    这个属性的优先级越高,整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。

    分析

    根据要求,可以将约束分为两个部分:

    整体空间足够时,两个label的宽度由内容决定,也就是说,label的“Content Hugging”优先级很高,而且没有固定的Width属性。
    整体空间不够时,左边的label更不容易被压缩,也就是“Content Compression Resistance”优先级更高。
    aspect ratio 自己ctrl+自己,可以按比例缩放自己

    动画:

    [containerView layoutIfNeeded]; // Ensures that all pending layout operations have been completed
    
    [UIView animateWithDuration:1.0 animations:^{
    
    // Make all constraint changes here
    
    [containerView layoutIfNeeded]; // Forces the layout of the subtree animation block and then captures all of the frame changes
    
    }];
    

    autolayout:
    https://www.zybuluo.com/MicroCai/note/73867#autolayout-基础
    http://www.vienta.me/2014/12/07/AutoLayout-%E5%BF%98%E6%8E%89Frame-%E6%8B%A5%E6%8A%B1Constraint%EF%BC%88I%EF%BC%89/
    http://www.cocoachina.com/industry/20131012/7148.html

    https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html

    http://nonomori.farbox.com/post/scrollview-yu-autolayout

    http://www.tuicool.com/articles/iIBJneA
    http://www.cocoachina.com/industry/20131203/7462.html
    http://www.cocoachina.com/industry/20131108/7322.html
    http://lvwenhan.com/ios/430.html
    http://onevcat.com/2012/09/autoayout/
    ###mansory:
    http://www.cocoachina.com/ios/20141219/10702.html
    http://www.cocoachina.com/ios/20150527/11936.html
    http://www.cocoachina.com/industry/20131012/7148.html

    http://ios.jobbole.com/81483/

    http://www.mgenware.com/blog/?p=491
    http://blog.csdn.net/meegomeego/article/details/39991057
    http://www.raywenderlich.com/tutorial-archive

    sizeClass

    http://www.cocoachina.com/ios/20141217/10669.html
    http://www.cocoachina.com/ios/20140915/9623.html

    autolayout 添加动画

    http://www.cocoachina.com/ios/20141010/9869.html

    cocoa autolayout

    http://www.cocoachina.com/cms/plus/search.php?keyword=Autolayout&searchtype=titlekeyword&channeltype=0&orderby=&kwtype=0&pagesize=10&typeid=0&TotalResult=20&PageNo=2

    相关文章

      网友评论

        本文标题:autolayout

        本文链接:https://www.haomeiwen.com/subject/jnhjqttx.html