屏幕适配
屏幕适配发展历史
-
iPhone3GS/iPhone4
- 没有屏幕适配可言
- 全部用frame,bounds,center进行布局
- 很多这样的现象: 坐标值.宽度.高度值全部写死
// 例如 UIButton *btn = [[UIButton alloc] init]; btn.frame = CGRectMake(0,0,320-a,480-b); -
iPad出现/iPhone横屏出现
- Autoresizing技术出现
让横竖屏适配,相对简单
让'子控件'可以跟随'父控件'的行为自动发生相应的改变;
外围的四条线--代表距离边的距离固定
内部的两条线--代表可以垂直/水平可以拉伸
前提:关闭Autolayout功能
-
局限性
- 只能解决子控件和父控件的相对关系问题
- 不能解决兄弟控件相对位置关系
-
用代码实现Autoresizing
redView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth; // 一般在子控件放到父控件之前,用Autoresizing; [blueView addSubview:redView]; /** UIViewAutoresizingNone = 0, UIViewAutoresizingFlexibleLeftMargin = 1 << 0, 距离父控件左边的间距是伸缩的（不固定的） UIViewAutoresizingFlexibleRightMargin = 1 << 2, 距离父控件右边的间距是伸缩的（不固定的） UIViewAutoresizingFlexibleTopMargin = 1 << 3, 距离父控件顶部的间距是伸缩的（不固定的） UIViewAutoresizingFlexibleBottomMargin = 1 << 5, 距离父控件底部的间距是伸缩的（不固定的） UIViewAutoresizingFlexibleWidth = 1 << 1, 宽度跟随父控件的宽度进行自动伸缩 UIViewAutoresizingFlexibleHeight = 1 << 4, 高度跟随父控件的高度进行自动伸缩 */
- Autoresizing技术出现
-
iOS 6.0 开始出现了Autolayout,(Xcode 5.0)iOS 7.0 开始火
- 核心概念:参照,约束
- 警告(黄点):frame不匹配约束;
- 错误(红点):1.约束冲突,2.缺少约束;
约束添加动画代码
// 注意: 更改约束的代码不用放在要执行动画的block中
self.spacingContraint.constant = 50;
self.widthContraint.constant = 100;
// 执行约束改变的动画
[UIView animateWithDuration:2.0 animations:^{
// self.blueView的约束动画执行语句;
[self.blueView layoutIfNeeded];
}];
-
添加约束的规则
- 对于两个同层级view之间的约束关系,添加到他们的父view上
- 对于两个不同层级view之间的约束关系,添加到他们最近的共同的父view上
- 对于有层级关系的两个view之间的约束关系,添加到层级较高的父view上
-
代码创建约束
// 不要讲autresizing的约束转化成为autolayout的约束; blueView.translatesAutoresizingMaskIntoConstraints = NO; // 宽度约束 NSLayoutConstraint *widthCon = [NSLayoutConstraint constraintWithItem:<#(nonnull id)#> attribute:<#(NSLayoutAttribute)#> relatedBy:<#(NSLayoutRelation)#> toItem:<#(nullable id)#> attribute:<#(NSLayoutAttribute)#> multiplier:<#(CGFloat)#> constant:<#(CGFloat)#>] [blueView addConstraint:<#(nonnull NSLayoutConstraint *)#>]; // 高度约束 NSLayoutConstraint *heightCon = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:300]; [blueView addConstraint:heightCon]; // 右侧约束 NSLayoutConstraint *rightCon = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20]; [self.view addConstraint:rightCon]; // 底部约束 NSLayoutConstraint *bottonCon = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20]; // 注意添加到self.view上 [self.view addConstraint:bottonCon];
-
VFL语言
- visual format language 可视化语言
- 苹果为了简化约束的代码而退出的语言
- 大部分的约束可以用vfl语言表示,但是还是有一部分不能用vfl;
-
Masonry框架的使用(简化代码);
- 使用步骤:
- 添加Masonry到工程中
- 添加两个宏,导入主头文件
- 注意:两个宏一定要放到主头文件之前
//这个方法只会添加新的约束 [blueView mas_makeConstraints:^(MASConstraintMaker *make) { }]; // 这个方法会将以前的所有约束删掉，添加新的约束 - 使用步骤:
[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
}];
// 这个方法将会覆盖以前的某些特定的约束
[blueView mas_updateConstraints:^(MASConstraintMaker *make) {
}];
```
- 约束的类型：
- 尺寸：width\height\size
- 边界：left\leading\right\trailing\top\bottom
- 中心点：center\centerX\centerY
- 边界：edges
- make_equalTo和equalTo的选择
- mas_equalTo：这个方法会对参数进行包装
- equalTo：这个方法不会对参数进行包装
- mas_equalTo的功能强于 > equalTo
- 好用的两个宏
```objc
//define this constant if you want to use Masonry without the 'mas_' prefix
// 如果想要在编程的时候去掉mas_这个东西就可以引入这个宏
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
// 如果想使用自动包装定义下面的宏
#define MAS_SHORTHAND_GLOBALS
注意: 必须放在#import "Masonry.h"之前
```
- 增加可读性方法
```objc
-(MASConstraint *)with {
return self;
}
-(MASConstraint *)and {
return self;
}
```
使用autolayout注意点
- 一定要拥有父控件之后,再添加约束
- 关闭Autoresizing功能
