如何適配？
- 不同版本適配
- 不同屏幕尺寸適配，不同屏幕方向（橫豎屏）
點(diǎn)與像素
- 1、用戶(hù)：屏幕是由無(wú)數(shù)個(gè)像素組成的，開(kāi)發(fā)者：屏幕是由無(wú)數(shù)個(gè)點(diǎn)組成的，點(diǎn)又是由像素組成的
- 2、非retina與retina屏
- 非retina屏幕(3GS) ： 1個(gè)點(diǎn)由1個(gè)像素組成
- retina屏幕：1個(gè)點(diǎn)由2 x 2個(gè)像素組成
設(shè)備分辨率
fbl.png
自動(dòng)布局的多種方式
1、Autoresizing
都是
約束父子關(guān)系, 所以Autoresizing只能約束父子控件之間的關(guān)系,不能約束兄弟控件之間的關(guān)系-
方式一：storyboard實(shí)現(xiàn)
-
注意： Storyboard中勾選上左邊, 就代表當(dāng)前控件和父控件的左邊的距離是固定的
Snip20151026_14.png
-
-
方式二：純代碼實(shí)現(xiàn)
- 注意1：代碼中的上下左右和Storyboard中的是相反的
- Storyboard中勾選上左邊, -> 當(dāng)前控件和父控件的左邊的距離是固定的
- 代碼中如果寫(xiě)上FlexibleLeftMargin，->當(dāng)前控件和父控件的左邊是可拉伸的
- 注意1：代碼中的上下左右和Storyboard中的是相反的
規(guī)律
UIViewAutoresizingFlexibleLeftMargin // 左邊可以伸縮
UIViewAutoresizingFlexibleRightMargin // 右邊可以伸縮
UIViewAutoresizingFlexibleTopMargin // 頂部可以伸縮
UIViewAutoresizingFlexibleBottomMargin // 底部可以伸縮
// 以下兩個(gè)和Storyboard中的是一樣的
UIViewAutoresizingFlexibleWidth // 寬度可以伸縮
UIViewAutoresizingFlexibleHeight // 高度可以伸縮
- 代碼實(shí)現(xiàn)，紅色View隨著其父控件的寬度與高度拉伸而拉伸
-
效果：
Snip20151026_15.png
-
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 1.創(chuàng)建父控件
UIView *greenView = [[UIView alloc] init];
greenView.frame = CGRectMake(0, 0, 200, 200);
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
self.greenView = greenView;
// 2.創(chuàng)建子控件
UIView *redView = [[UIView alloc] init];
redView.frame = CGRectMake(0, 0, 100, 100);
redView.backgroundColor = [UIColor redColor];
[greenView addSubview:redView];
// 3.設(shè)置子控件的autoresizing
// 紅色子控件，隨著父控件，寬度與高度可拉伸
redView.autoresizingMask = UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight;
}
- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event
{
self.greenView.frame = CGRectMake(0, 0, 300, 300);
}
-
點(diǎn)擊視圖，讓父控件寬高增大，子控件也隨父控件拉伸了
Snip20151026_17.png
Autolayout 自動(dòng)布局
1、Autolayout 代碼實(shí)現(xiàn)
- 在創(chuàng)建約束之后，需要將其添加到作用的view上
- 約束規(guī)則
-
對(duì)于兩個(gè)同層級(jí)view之間的約束關(guān)系，添加到它們的父view上
1.png -
對(duì)于兩個(gè)不同層級(jí)view之間的約束關(guān)系，添加到他們最近的共同父view上
2.png
-
-
對(duì)于有層次關(guān)系的兩個(gè)view之間的約束關(guān)系，添加到層次較高的父view上
3.png
- 一個(gè)NSLayoutConstraint對(duì)象就代表一個(gè)約束
- 創(chuàng)建約束對(duì)象的常用方法
+(id)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)attr1relatedBy:(NSLayoutRelation)relationtoItem:(id)view2attribute:(NSLayoutAttribute)attr2multiplier:(CGFloat)multiplierconstant:(CGFloat)c;
- 自動(dòng)布局的核心計(jì)算公式
obj1.property1=（obj2.property2* multiplier）+constantvalue
需求：設(shè)置一個(gè)redView寬高100，現(xiàn)實(shí)在屏幕中間
+代碼實(shí)現(xiàn)Autolayout的注意點(diǎn)
- 1、如果通過(guò)代碼來(lái)設(shè)置Autolayout約束, 那么必須先禁用Autoresizing
```objc
redView.translatesAutoresizingMaskIntoConstraints = NO;
- 2、通過(guò)代碼添加Autolayout約束, 添加約束之前必須保證控件已經(jīng)在父控件上了
- 3、不用再給view設(shè)置frame
+ 創(chuàng)建約束 方法分析： [NSLayoutConstraint constraintWithItem: .......]
```objc
/*
Item == first item
attribute == first item需要設(shè)置的約束類(lèi)型
relatedBy == Relatio(等于)
toItem == Second item
attribute == Second item的約束類(lèi)型
multiplier == 乘以
constant == 加上多少
*/
// redView 的 centerX = self.view的centerX * 1.0 + 0.0
NSLayoutConstraint *xCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
- 代碼實(shí)現(xiàn)
// 1.創(chuàng)建控件
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
2、基于Autolayout的動(dòng)畫(huà)
- 注意: 強(qiáng)制更新界面：會(huì)更新當(dāng)前控件和當(dāng)前控件所有的子控件
[添加了約束的view layoutIfNeeded];
- 代碼實(shí)現(xiàn)：動(dòng)畫(huà)
#import "ViewController.h"
@interface ViewController ()
// 約束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topCos;
@property (weak, nonatomic) IBOutlet UIView *redView;
@end
@implementation ViewController
- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event
{
self.topCos.constant += 150;
[UIView animateWithDuration:2.0 animations:^{
// 強(qiáng)制更新界面
// 會(huì)更新當(dāng)前控件和當(dāng)前控件所有的子控件
[self.redView layoutIfNeeded];
}];
}
@end
VFL添加約束
Visual Format Language，“可視化格式語(yǔ)言”，VFL是蘋(píng)果公司為了簡(jiǎn)化Autolayout的編碼而推出的抽象語(yǔ)言
VFL示例
H:[cancelButton(72)]-12-[acceptButton(50)]
pcanelButton寬72，acceptButton寬50，它們之間間距12
H:[wideView(>=60@700)]
pwideView寬度大于等于60point，該約束條件優(yōu)先級(jí)為700（優(yōu)先級(jí)最大值為1000，優(yōu)先級(jí)越高的約束越先被滿(mǎn)足）
V:[redBox][yellowBox(==redBox)]
豎直方向上，先有一個(gè)redBox，其下方緊接一個(gè)高度等于redBox高度的yellowBox
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上，F(xiàn)ind距離父view左邊緣默認(rèn)間隔寬度，之后是FindNext距離Find間隔默認(rèn)寬度；再之后是寬度不小于20的FindField，它和FindNext以及父view右邊緣的間距都是默認(rèn)寬度。（豎線(xiàn)“|”表示superview的邊緣）
- VFL的使用
- 使用VFL來(lái)創(chuàng)建約束數(shù)組
pformat：VFL語(yǔ)句
popts：約束類(lèi)型
pmetrics：VFL語(yǔ)句中用到的具體數(shù)值
pviews：VFL語(yǔ)句中用到的控件
+(NSArray*)constraintsWithVisualFormat:(NSString*)format options:(NSLayoutFormatOptions)optsmetrics:(NSDictionary*)metrics views:(NSDictionary*)views;
- 創(chuàng)建一個(gè)字典（內(nèi)部包含VFL語(yǔ)句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)
Snip20151026_18.png
Masonry 第三方框架
- 注意: 在Storyboard中約束是可以重復(fù)添加的, 通過(guò)Masonry添加約束也是可以重復(fù)的, 要注意重復(fù)添加導(dǎo)致的錯(cuò)誤和沖突
- 添加、更新、移除約束
- 添加約束 makeConstraints:
- 每次都會(huì)添加新的約束, 也就是會(huì)導(dǎo)致重復(fù)添加
- 添加約束 makeConstraints:
[self.blueVeiw makeConstraints:^(MASConstraintMaker *make) {
// make.height.equalTo(100);
// }];
+ 更新約束 updateConstraints
- 特點(diǎn): 如果沒(méi)有設(shè)置過(guò), 就添加一個(gè)新的，如果已經(jīng)設(shè)置過(guò)了, 就更新以前設(shè)置的那一個(gè)
```objc
[self.blueVeiw updateConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(100);
}];
- 清空約束 remakeConstraints
[self.blueVeiw remakeConstraints:^(MASConstraintMaker *make) {
}];
- 1、添加簡(jiǎn)化宏定義
#import "ViewController.h"
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
// 只要添加這個(gè)宏, 就可以去掉Masonry框架中對(duì)象訪(fǎng)問(wèn)對(duì)象屬性前面的mas_屬性, 和方法前的mas_前綴
// 例如添加前的寫(xiě)法
/*
make.left.equalTo(self.view.mas_left).with.offset(20);
*/
// 例如添加后的寫(xiě)法
/*
make.left.equalTo(self.view.left).with.offset(20);
*/
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS
// 只要添加上這個(gè)宏, 給equalTo傳遞參數(shù)的時(shí)候, 就可以直接傳遞基本數(shù)據(jù)類(lèi)型 ,系統(tǒng)會(huì)自動(dòng)包裝
// 如果沒(méi)有添加上面這個(gè)宏, 那么給equalTo傳遞參數(shù)的時(shí)候, 必須傳遞對(duì)象
// 如果要傳遞基本數(shù)據(jù)類(lèi)型必須使用mas_equalTo
// 只需要在導(dǎo)入Masonry.h之前, 添加上面的兩個(gè)宏, 就可以簡(jiǎn)化代碼
#import "Masonry.h"
-
2、實(shí)現(xiàn)紅色view是藍(lán)色寬度一半。。。。
Snip20151026_19.png
// 1.創(chuàng)建兩個(gè)View, 并且添加到父控件
UIView *blueVeiw = [[UIView alloc] init];
blueVeiw.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueVeiw];
self.blueVeiw = blueVeiw;
UIView *redVeiw = [[UIView alloc] init];
redVeiw.backgroundColor = [UIColor redColor];
[self.view addSubview:redVeiw];
// 2.禁止紅色View的Autgoresizing
blueVeiw.translatesAutoresizingMaskIntoConstraints = NO;
redVeiw.translatesAutoresizingMaskIntoConstraints = NO;
// 3.添加藍(lán)色的約束
[blueVeiw makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.left).offset(20);
make.right.equalTo(self.view.right).offset(-20);
make.top.equalTo(self.view.top).offset(20);
make.height.equalTo(50);
}];
// 4.添加紅色的約束
[redVeiw makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(blueVeiw.bottom).offset(20);
make.height.equalTo(blueVeiw.height);
make.right.equalTo(blueVeiw.right);
make.width.equalTo(blueVeiw.width).multipliedBy(0.5);
}];
sizeClasses
sizeclasses的組成: Compact/Regular/Any
圖片中的設(shè)置: height = Any & compact
代表寬度是任意的, 高度是緊湊的
*==Any
- ==Compact
+ ==Regular
前面的是寬度, 后面的是高度
Any: 任意的
compact: 緊湊的
Regular:正常的
Snip20151026_20.png
