xcode 6使用storyboard 进行自动布局,迷惑的问题主要由:

1,classsize 到底是一个什么东东?

2,classSize 和 layout 有什么区别?

3,  如何使用storyboard 进行自动布局

4,什么是约束?

5,常见的约束报错有哪些?

6,在开发过程中(使用storyboard)应该注意哪些问题?

这些问题我会在

代码级别的界面显示

1,如果是从代码层面开始使用Autolayout,需要对使用的ViewtranslatesAutoresizingMaskIntoConstraints的属性设置为NO.
即可开始通过代码添加Constraint,否则View还是会按照以往的autoresizingMask进行计算.
而在Interface Builder中勾选了Ues Autolayout,IB生成的控件的translatesAutoresizingMaskIntoConstraints属性都会被默认设置NO.

2,值得注意的是,添加约束之前一定要将子视图优先addSubview到父视图中,否则在添加约束时会产生编译器警告.
而我们在理解的时候,可以通过这种方式来理解.item1.attribute = multiplier ⨉ item2.attribute + constant,比如看下面的代码

  1. UIView *newView = [[UIView alloc]init];
  2. newView.backgroundColor = [UIColor redColor];
  3. [self.view addSubview:newView];
  4. //   self.view.translatesAutoresizingMaskIntoConstraints =NO;
  5. newView.translatesAutoresizingMaskIntoConstraints =NO;
  6. NSLayoutConstraint *constraint = nil;
  7. constraint = [NSLayoutConstraint constraintWithItem:newView
  8. attribute:NSLayoutAttributeLeading
  9. relatedBy:NSLayoutRelationEqual
  10. toItem:self.view
  11. attribute:NSLayoutAttributeLeading
  12. multiplier:1.0f
  13. constant:20];
  14. [self.view addConstraint:constraint];
  15. constraint = [NSLayoutConstraint constraintWithItem:newView
  16. attribute:NSLayoutAttributeTrailing
  17. relatedBy:NSLayoutRelationEqual
  18. toItem:self.view
  19. attribute:NSLayoutAttributeTrailing
  20. multiplier:1.0f
  21. constant:-20];
  22. [self.view addConstraint:constraint];
  23. constraint = [NSLayoutConstraint constraintWithItem:newView
  24. attribute:NSLayoutAttributeTop
  25. relatedBy:NSLayoutRelationEqual
  26. toItem:self.view
  27. attribute:NSLayoutAttributeTop
  28. multiplier:1.0f
  29. constant:80];
  30. [self.view addConstraint:constraint];
  31. constraint = [NSLayoutConstraint constraintWithItem:newView
  32. attribute:NSLayoutAttributeBottom
  33. relatedBy:NSLayoutRelationEqual
  34. toItem:self.view
  35. attribute:NSLayoutAttributeBottom
  36. multiplier:1.0f
  37. constant:-20];
  38. [self.view addConstraint:constraint];

创建了一个单视图,距离各边界的距离依次是:20  20  80  20(左,右,上,下),或许有人会疑问为什么距离右写的是-20,why, 其实原因很简单,因为我们参照的是self.view.trailing  ,而视图newView是加在self.view上,是在self.view.trailing 的左边,所以应该是赋值,以此类推距离底部也是一样

有人会问到底属性都有哪些,下面会给大家列举一下,这里包括ios 8 最新添加的(一下加红的是常用的一些方法)

NSLayoutAttributeLeft = 1,    对齐对象的左边
    NSLayoutAttributeRight,        对齐对象的右边
    NSLayoutAttributeTop,          距离顶部的距离
    NSLayoutAttributeBottom,    距离底部的距离  
    NSLayoutAttributeLeading,   距离左边的距离
    NSLayoutAttributeTrailing,    距离右边部的距离
    NSLayoutAttributeWidth,      控件的宽度
    NSLayoutAttributeHeight,     控件的高度
    NSLayoutAttributeCenterX,  x 轴中线点的距离
    NSLayoutAttributeCenterY,  y 轴中线点的距离
    NSLayoutAttributeBaseline, 
    NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,

//   在API 8.0  文档中貌似没有详细的说明,但大家一看意思也明白了,就是距离各个边界的设置
    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeNotAnAttribute = 0

注:NSLayoutAttributeLeft/NSLayoutAttributeRight 和 NSLayoutAttributeLeading/NSLayoutAttributeTrailing的区别是left/right永远是指左右,而leading/trailing在某些从右至左习惯的地区会变成,leading是右边,trailing是左边。

以上就是通过简单的代码实现了自动布局(单一控件),大家会发如果页面上试图多的话,用这种方式显得特别麻烦,的确是的,下面我介绍一下另一种方法

通过可视化语言的方式

先学点基础知识,

1 调用的方法

  1. + (NSArray *)constraintsWithVisualFormat:(NSString *)format
  2. options:(NSLayoutFormatOptions)opts
  3. metrics:(NSDictionary *)metrics
  4. views:(NSDictionary *)views

介绍一下各个参数的意思

1 format   约束的规格要求  说白了就是条件。

2 opts       主要用来描述属性和用来指导可视化语言中的布局样式。

3 metrics  一个字典实例主要用来显示你在可视化话中用的字符串的参数设置,比如:nextwidth:@12, 必须是一个字典对象。

4 views   所有描述的空间字典集合,也必须以字典的形式展现出来。

下面通过一个实例的方式

  1. UIView *two = [UIView new];
  2. two.backgroundColor = [UIColor greenColor];
  3. [self.view addSubview:two];
  4. two.translatesAutoresizingMaskIntoConstraints = NO;
  5. NSDictionary *views = NSDictionaryOfVariableBindings(two, self.view);
  6. NSMutableArray *constraintArray = [NSMutableArray array];
  7. [constraintArray addObjectsFromArray:[NSLayoutConstraint   constraintsWithVisualFormat:@"H:|-20-[two]-20-|"
  8. options:0
  9. metrics:nil
  10. views:views]];
  11. [constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-80-[two]-20-|" options:0 metrics:nil views:views]];
  12. [self.view addConstraints:constraintArray];

简单的几句话就实现了和上面同样的效果,从而可以充分的看到可视化语言是多么的方便

下面为大家带来介绍一些第三方实现该效果的代码

首推:PureLayout 他是UIView+Layout  的后继者,项目中建议使用PureLayout , 使用起来特方便,至于如何导入请大家参考文档自己完成

下载地址:https://github.com/smileyborg/PureLayout

直接上代码:

  1. UIView *newView = [UIView new];
  2. newView.backgroundColor = [UIColor blueColor];
  3. [self.view addSubview:newView];
  4. newView.translatesAutoresizingMaskIntoConstraints = NO;
  5. [newView autoPinEdgeToSuperviewEdge:(ALEdgeLeading) withInset:20];
  6. [newView autoPinEdgeToSuperviewEdge:(ALEdgeTrailing) withInset:20];
  7. [newView autoPinEdgeToSuperviewEdge:(ALEdgeTop) withInset:80];
  8. [newView autoPinEdgeToSuperviewEdge:(ALEdgeBottom) withInset:20];

你可能会很吃惊,哇?这么简单,的确是的就是这么简单,完全符合我们使用storyboard 的习惯,至于UIView+autoLayout 和 PureLayout的具体使用,我会在后面的文章中单独拿出一章单独介绍他的使用,现在主要是了解一下自动布局的使用

先看一下效果图,横屏效果图

竖屏效果图

下面咱们来点有难度的代码,嘿嘿,终于可以放手做一下了

    1. - (void)viewDidLoad {
    2. [super viewDidLoad];
    3. self.view.backgroundColor = [UIColor whiteColor];
    4. // 1 创建三个视图 红/绿/蓝/黄/橙色视图
    5. // 红
    6. UIView *redView = [self alive];
    7. redView.backgroundColor = [UIColor redColor];
    8. [self.view addSubview:redView];
    9. // 绿
    10. UIView *greenView = [self alive];
    11. greenView.backgroundColor = [UIColor greenColor];
    12. [self.view addSubview:greenView];
    13. // 蓝
    14. UIView *blueView = [self alive];
    15. blueView.backgroundColor = [UIColor blueColor];
    16. [self.view addSubview:blueView];
    17. // 黄
    18. UIView *yellowView = [self alive];
    19. yellowView.backgroundColor = [UIColor yellowColor];
    20. [self.view addSubview:yellowView];
    21. // 橙
    22. UIView *orangeView = [self alive];
    23. orangeView.backgroundColor = [UIColor orangeColor];
    24. [self.view addSubview:orangeView];
    25. [self.view addConstraints:[self portraitConstraints:redView :greenView :blueView yellowView:yellowView orangeView:orangeView]];
    26. }
    27. // 这样写完全是为了代码的方便使用,创建对象的同时初始化控件
    28. - (UIView *)alive
    29. {
    30. UIView *newView = [UIView new];
    31. newView.translatesAutoresizingMaskIntoConstraints = NO;
    32. return newView;
    33. }
    34. - (NSMutableArray *) portraitConstraints:(UIView *)redView :(UIView *)greenView :(UIView *)blueView yellowView:(UIView *)yellowView orangeView:(UIView *)orangeView
    35. {
    36. NSMutableArray *array = [NSMutableArray array];
    37. // 注1:红色视图的宽度大于等于10 小于30    黄色视图的宽度大于40 小于120  水平
    38. [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(>=10,<=30)]-20-[greenView(>=40,<=120)]-20-[yellowView]-20-|" options:0 metrics:nil
    39. views:NSDictionaryOfVariableBindings(redView, greenView, yellowView)]];
    40. // 注2:垂直方向 red高度H:100<= <=160  蓝色 H:30<= <=60  橙色待定
    41. [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[redView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil
    42. views:NSDictionaryOfVariableBindings(redView, blueView, orangeView)]];
    43. // 和注2类似
    44. [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[greenView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil
    45. views:NSDictionaryOfVariableBindings(greenView, blueView, orangeView)]];
    46. // 和注2类似   或许有人会问 为什么得添加黄色和绿色,原因很简单,就是为了满足各个约束,避免造成约束不足
    47. [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[yellowView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil
    48. views:NSDictionaryOfVariableBindings(yellowView, blueView, orangeView )]];
    49. // 注3:控制blued的宽度
    50. [array addObjectsFromArray:[NSLayoutConstraint
    51. constraintsWithVisualFormat:@"H:|-20-[blueView]-120-|" options:0 metrics:nil
    52. views:NSDictionaryOfVariableBindings(blueView)]];
    53. // 注4:为橙色高度添加约束条件
    54. [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView]-20-[orangeView(>=blueView)]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];
    55. // 注4:为橙色添加宽度约束条件
    56. [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];
    57. return array;
    58. }

自动布局(storyboard,code)的更多相关文章

  1. 自动布局之autoresizingMask使用详解(Storyboard&Code)

    自动布局之autoresizingMask使用详解(Storyboard&Code) http://www.cocoachina.com/ios/20141216/10652.html 必须禁 ...

  2. 【转】自动布局之autoresizingMask使用详解(Storyboard&Code)

    原文:http://www.cocoachina.com/ios/20141216/10652.html 自动布局Autolayoutstoryboard 前言:现在已经不像以前那样只有一个尺寸,现在 ...

  3. iOS开发-自动布局之autoresizingMask使用详解(Storyboard&Code)

    前言:现在已经不像以前那样只有一个尺寸,现在最少的IPHONE开发需要最少需要适配三个尺寸.因此以前我们可以使用硬坐标去设定各个控件的位置,但是现在的话已经不可以了,我们需要去做适配,也许你说可以使用 ...

  4. 有关autoresizingMask属性遇到的一个小问题

    前言:在讲述这个小问题之前,我们有必要先了解一下UIViewAutoresizing的有关属性概念和使用详解. 参考:自动布局之autoresizingMask使用详解(Storyboard& ...

  5. 女神画廊App (Swift1.2)

    这个App的是storyboard+code的结合,主要的重点是: 1.segue传递图片值. 2.Autolayout中可以使用右下角三角符号使用Add Missing Constraints进行大 ...

  6. 【转】iOS学习之Storyboard中的UIScrollView使用自动布局

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一 ...

  7. IOS开发中UI编写方式——code vs. xib vs.StoryBoard

    最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关 ...

  8. storyboard自动布局时,代码修改 constraint 的值,没有反应

    从 width equalto 其他控件的 width   到  当前控件固定的 width, 再到不固定当前控件的 width, 只固定当前控件的 trailing 是一个不错的思想.

  9. (翻译)开始iOS 7中自动布局教程(二)

    这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...

随机推荐

  1. Python os模块方法

    os模块提供了大量有用的方法来处理文件和目录.本章节中的代码实例是在 Ubuntu Linux系统上运行来演示. 大多数有用的方法都列在这里 - 编号 方法 描述/说明 1 os.access(pat ...

  2. bootstrap editable初始化后表单可修改数据

    function loadData() { var url = "${ctx }/sys/marketing/product/page"; $('#tablepager').boo ...

  3. vue 在移动端实现红包雨 (兼容性好)

    下面是代码:<template>    <div class="ser_home">        <ul class="red_packe ...

  4. 【每日一包0005】arr-flatten

    github地址:https://github.com/ABCDdouyae... arr-flatten 将多维数组展开成一维数组 文档地址:https://www.npmjs.com/packag ...

  5. 图的深度优先搜索(DFS)和广度优先搜索(BFS)算法

    深度优先(DFS) 深度优先遍历,从初始访问结点出发,我们知道初始访问结点可能有多个邻接结点,深度优先遍历的策略就是首先访问第一个邻接结点,然后再以这个被访问的邻接结点作为初始结点,访问它的第一个邻接 ...

  6. mysql中查看ef或efcore生成的sql语句

    http://www.solves.com.cn/it/sjk/MYSQL/2019-07-01/1336.html 涉及命令 1.开启general log模式 MySQL>set globa ...

  7. CNN中感受野的理解

    本文摘自看完还不懂卷积神经网络“感受野”?那你来找我 作者:程序_小白链接:https://www.jianshu.com/p/9305d31962d8 一.到底什么是“感受野”(接受野Recepti ...

  8. JRE、JDK、JVM 及 JIT 之间有什么不同

    java虚拟机(JVM)     使用java编程语言的主要优势就是平台的独立性.你曾经想知道过java怎么实现平台的独立性吗?对,就是虚拟机,它抽象化了硬件设备,开发者和他们的程序的得以操作系统.虚 ...

  9. 省市区,级联查询,ajaxgird,ajaxfrom

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  10. EDM概念之A/B分类测试法

    相信很多情况下大家都会看到A/B分类测试法这个专业术语,下面博主简要介绍下什么是A/B分类测试法. 这里的A和B主要是指两种不同版本的电子邮件.一般来说,可以将用户分为同等数量的两组,一组发送A版本, ...