AutoLayout详解+手把手实战(一)

2015-01-27 10:09:05 · 作者: · 浏览: 278

首先说一下这篇博客虽然是标记为原创,但是事实并非本人亲自写出来的,知识点和例子本人花了一天各处查找和整理最终决定写一个汇总的详解,解去各位朋友到处盲目查找的必要,因为不是转载某一个人的内容,故此不标记为转载,因为加入了个人的理解和细心整理所以标为原创,请谅解!

1.首先我们要明确,当我们使用自动布局的时候为了不让Contraint和view本身的autoresize属性发生冲突,我们首先需要把控件 的属性设为setTranslatesAutoresizingMaskIntoConstraints:NO

2.分清楚两个函数的不同用处

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

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


使用之前先明确一点:既然是布局,再我们布局的时候必须是相对的对吧,所以我们布局通常都是把两个view在一起捆绑,相互之间存在某种关系做一些约束,通常不存在一个view布局的现象!


注意到第一个函数是一个格式化输入( format),外加输出的是一个数组,一般来说格式化的会包含很多信息量的,所以这个也不例外,可以包含许多布局信息


首先说一下两个函数的使用的不同方式

constraintWithItem函数的使用方式直接用addConstraint添加到父亲视图就好了

eg:

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:tfEmail
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:35]];

创建约束的方式如下:

[NSLayoutConstraint constraintWithItem:(id)item
attribute:(NSLayoutAttribute)attribute
relatedBy:(NSLayoutRelation)relation
toItem:(id)otherItem
attribute:(NSLayoutAttribute)otherAttribute
multiplier:(CGFloat)multiplier
constant:(CGFloat)constant]


参数说明:
第一个参数:指定约束左边的视图view1
第二个参数:指定view1的属性attr1,具体属性见文末。
第三个参数:指定左右两边的视图的关系relation,具体关系见文末。
第四个参数:指定约束右边的视图view2
第五个参数:指定view2的属性attr2,具体属性见文末。
第六个参数:指定一个与view2属性相乘的乘数multiplier
第七个参数:指定一个与view2属性相加的浮点数constant

这个函数的对照公式为:
view1.attr1 view2.attr2 * multiplier + constant

注意:
1.如果你想设置的约束里不需要第二个view,要将第四个参数设为nil,第五个参数设为NSLayoutAttributeNotAnAttribute

举例:
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:view2
attribute:NSLayoutAttributeRight
multiplier:1
constant:10]

翻译过来就是:view1的左侧,在,view2的右侧,再多10个点,的地方(经典)。

附视图的属性和关系的值:
typedef NS_ENUM(NSInteger, NSLayoutRelation) {
NSLayoutRelationLessThanOrEqual = -1, //小于等于
NSLayoutRelationEqual = 0, //等于
NSLayoutRelationGreaterThanOrEqual = 1, //大于等于
};
typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
NSLayoutAttributeLeft = 1, //左侧
NSLayoutAttributeRight, //右侧
NSLayoutAttributeTop, //上方
NSLayoutAttributeBottom, //下方
NSLayoutAttributeLeading, //首部
NSLayoutAttributeTrailing, //尾部
NSLayoutAttributeWidth, //宽度
NSLayoutAttributeHeight, //高度
NSLayoutAttributeCenterX, //X轴中心
NSLayoutAttributeCenterY, //Y轴中心
NSLayoutAttributeBaseline, //文本底标线

NSLayoutAttributeNotAnAttribute = 0 //没有属性
};

NSLayoutAttributeLeft/NSLayoutAttributeRight 和 NSLayoutAttributeLeading/NSLayoutAttributeTrailing的区别是left/right永远是指左右,而leading/trailing在某些从右至左习惯的地区会变成,leading是右边,trailing是左边。(大概是⊙?⊙b)


实战解析:

UILabel *note = [[UILabel alloc] init];
[note setText:@"欢迎提出宝贵意见!您留下的每一份心意都将浇灌母婴宝的茁壮成长。"];
[note setLineBreakMode:NSLineBreakByWordWrapping];
note.numberOfLines = 0;
[self.view addSubview:note];

//将自适应向布局约束的转化关掉(根据情况有时需要有时不需要)
[note setTranslatesAutoresizingMaskIntoConstraints:NO];

[self.view addConstraint:[NSLayoutConstra