一. 设备分辨率
设备 | 尺寸 | 像素 | 点 |
iPhone \ iPhone 3G \ iPhone 3GS | 3.5 inch | 320 x 480 | 320 x 480 |
iPhone 4 \ iPhone 4S | 3.5 inch | 640 x 960 | 320 x 480 |
iPhone 5 \ iPhone 5C \ iPhone 5S | 4.0 inch | 640 x 1136 | 320 x 568 |
iPhone6 | 4.7 inch | 750 x 1334 | 375 x 667 |
iPhone6 plus | 5.5 inch | 1242 x 2208 | 414 x 736 |
iPad \ iPad2 | 9.7 inch | 768 x 1024 | 768 x 1024 |
iPad 3(The new iPad) \ iPad4 \ iPad Air | 9.7 inch | 1536 x 2048 | 768 x 1024 |
iPad Mini | 7.9 inch | 768 x 1024 | 768 x 1024 |
iPad Mini 2(iPad Mini with retina display) | 7.9 inch | 1536 x 2048 | 768 x 1024 |
二. autoreszing的设置
1. autoreszing和autolayout相关冲突,当使用autureszing时需要在storyboard中把autolayout关闭
2. 在storyboard中设置autoreszing
3. 代码实现autoreszing
/*
UIViewAutoresizingNone 没有设置任何线段
UIViewAutoresizingFlexibleLeftMargin 距离右边固定(距离左边可拉伸)
UIViewAutoresizingFlexibleRightMargin 距离左边固定(距离右边可拉伸)
UIViewAutoresizingFlexibleTopMargin 距离下边固定(距离上边可拉伸)
UIViewAutoresizingFlexibleBottomMargin 距离上边固定(距离下边可拉伸)
UIViewAutoresizingFlexibleWidth 宽度可拉伸
UIViewAutoresizingFlexibleHeight 高度可拉伸
*/
blueView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
三. autolayout(自动布局)的使用
1. autolayout在storyboard中设置
2. autolayout实现动画
1> 将需要改变的约束条件进行托线
eg:将UILabel的上边距距离View的约束条件托线
/**
* 约束条件托线
*/
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *labelTop;
2> 更改托线的属性的值
self.labelTop.constant += 100;
3> 执行动画
/**
* autolay动画实现
*/
- (void)move
{
// 1.更改约束条件
self.labelTop.constant += 100;
// 2.执行动画
[UIView animateWithDuration:2.0 animations:^{
[self.label layoutIfNeeded];
}];
}
3. autolayout代码实现布局
1> 创建View
-
将将某个控件添加到某个View前需要关闭autoresizing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO; // 将autuoresizing关闭
[self.view addSubview:blueView];
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
2> 创建约束条件
-
创建约束条件
NSLayoutConstraint *blueLeftCon = [NSLayoutConstraint
constraintWithItem:blueView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:30];
-
将约束条件添加到对应的控件上
[self.view addConstraint:blueLeftCon];
// 2.设置约束条件
/*
attribute :
NSLayoutAttributeLeft = 1,
NSLayoutAttributeRight,
NSLayoutAttributeTop,
NSLayoutAttributeBottom,
NSLayoutAttributeLeading,
NSLayoutAttributeTrailing,
NSLayoutAttributeWidth,
NSLayoutAttributeHeight,
NSLayoutAttributeCenterX,
NSLayoutAttributeCenterY,
NSLayoutAttributeBaseline,
NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
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
relateBy :
NSLayoutRelationLessThanOrEqual = -1,
NSLayoutRelationEqual = 0,
NSLayoutRelationGreaterThanOrEqual = 1,
*/
NSLayoutConstraint *blueLeftCon = [NSLayoutConstraint
constraintWithItem:blueView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:30];
NSLayoutConstraint *blueBottomCon = [NSLayoutConstraint
constraintWithItem:blueView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-30];
NSLayoutConstraint *blueHeightCon = [NSLayoutConstraint
constraintWithItem:blueView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:0.0
constant:50];
// 添加约束条件
[self.view addConstraint:blueLeftCon];
[blueView addConstraint:blueHeightCon];
[self.view addConstraint:blueBottomCon];
NSLayoutConstraint *redRightCon = [NSLayoutConstraint
constraintWithItem:redView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:-30];
NSLayoutConstraint *redHeightCon = [NSLayoutConstraint
constraintWithItem:redView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:0];
NSLayoutConstraint *redWidthCon = [NSLayoutConstraint
constraintWithItem:redView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0];
NSLayoutConstraint *redMarginCon = [NSLayoutConstraint
constraintWithItem:redView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:30];
NSLayoutConstraint *redBottomCon = [NSLayoutConstraint
constraintWithItem:redView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0];
[self.view addConstraint:redRightCon];
[self.view addConstraint:redHeightCon];
[self.view addConstraint:redWidthCon];
[self.view addConstraint:redMarginCon];
[self.view addConstraint:redBottomCon];
4.VFL语言
pVFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
NSDictionaryOfVariableBindings(...)
5. Masonry实现自动布局
1> 导入Masonry框架,将核心代码文件夹Masonry导入到项目中,并把此文件夹下的info.plist文件删除
2> 创建约束条件
/*
left/equalTo : 后面跟对象
mas_left/mas_equalTo : 后面直接跟常量
*/
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(blueView.mas_right);
make.top.equalTo(blueView.mas_bottom).offset(30);
make.left.equalTo(self.view.mas_centerX);
make.height.equalTo(blueView.mas_height);
}];