如何適配？
- 不同版本適配
- 不同屏幕尺寸適配，不同屏幕方向（橫豎屏）
點與像素
- 1抓艳、用戶：屏幕是由無數(shù)個像素組成的，開發(fā)者：屏幕是由無數(shù)個點組成的帚戳，點又是由像素組成的
- 2玷或、非retina與retina屏
- 非retina屏幕(3GS) ： 1個點由1個像素組成
- retina屏幕：1個點由2 x 2個像素組成
設(shè)備分辨率
fbl.png
自動布局的多種方式
1、Autoresizing
都是
約束父子關(guān)系, 所以Autoresizing只能約束父子控件之間的關(guān)系,不能約束兄弟控件之間的關(guān)系-
方式一：storyboard實現(xiàn)
-
注意： Storyboard中勾選上左邊, 就代表當前控件和父控件的左邊的距離是固定的
Snip20151026_14.png
-
-
方式二：純代碼實現(xiàn)
- 注意1：代碼中的上下左右和Storyboard中的是相反的
- Storyboard中勾選上左邊, -> 當前控件和父控件的左邊的距離是固定的
- 代碼中如果寫上FlexibleLeftMargin片任，->當前控件和父控件的左邊是可拉伸的
- 注意1：代碼中的上下左右和Storyboard中的是相反的
規(guī)律
UIViewAutoresizingFlexibleLeftMargin // 左邊可以伸縮
UIViewAutoresizingFlexibleRightMargin // 右邊可以伸縮
UIViewAutoresizingFlexibleTopMargin // 頂部可以伸縮
UIViewAutoresizingFlexibleBottomMargin // 底部可以伸縮
// 以下兩個和Storyboard中的是一樣的
UIViewAutoresizingFlexibleWidth // 寬度可以伸縮
UIViewAutoresizingFlexibleHeight // 高度可以伸縮
- 代碼實現(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);
}
-
點擊視圖位他，讓父控件寬高增大，子控件也隨父控件拉伸了
Snip20151026_17.png
Autolayout 自動布局
1产场、Autolayout 代碼實現(xiàn)
- 在創(chuàng)建約束之后鹅髓，需要將其添加到作用的view上
- 約束規(guī)則
-
對于兩個同層級view之間的約束關(guān)系，添加到它們的父view上
1.png -
對于兩個不同層級view之間的約束關(guān)系京景，添加到他們最近的共同父view上
2.png
-
-
對于有層次關(guān)系的兩個view之間的約束關(guān)系窿冯，添加到層次較高的父view上
3.png
- 一個NSLayoutConstraint對象就代表一個約束
- 創(chuàng)建約束對象的常用方法
+(id)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)attr1relatedBy:(NSLayoutRelation)relationtoItem:(id)view2attribute:(NSLayoutAttribute)attr2multiplier:(CGFloat)multiplierconstant:(CGFloat)c;
- 自動布局的核心計算公式
obj1.property1=（obj2.property2* multiplier）+constantvalue
需求：設(shè)置一個redView寬高100，現(xiàn)實在屏幕中間
+代碼實現(xiàn)Autolayout的注意點
- 1确徙、如果通過代碼來設(shè)置Autolayout約束, 那么必須先禁用Autoresizing
```objc
redView.translatesAutoresizingMaskIntoConstraints = NO;
- 2醒串、通過代碼添加Autolayout約束, 添加約束之前必須保證控件已經(jīng)在父控件上了
- 3、不用再給view設(shè)置frame
+ 創(chuàng)建約束 方法分析： [NSLayoutConstraint constraintWithItem: .......]
```objc
/*
Item == first item
attribute == first item需要設(shè)置的約束類型
relatedBy == Relatio(等于)
toItem == Second item
attribute == Second item的約束類型
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];
- 代碼實現(xiàn)
// 1.創(chuàng)建控件
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
2鄙皇、基于Autolayout的動畫
- 注意: 強制更新界面：會更新當前控件和當前控件所有的子控件
[添加了約束的view layoutIfNeeded];
- 代碼實現(xiàn)：動畫
#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:^{
// 強制更新界面
// 會更新當前控件和當前控件所有的子控件
[self.redView layoutIfNeeded];
}];
}
@end
VFL添加約束
Visual Format Language芜赌，“可視化格式語言”，VFL是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言
VFL示例
H:[cancelButton(72)]-12-[acceptButton(50)]
pcanelButton寬72伴逸，acceptButton寬50缠沈，它們之間間距12
H:[wideView(>=60@700)]
pwideView寬度大于等于60point，該約束條件優(yōu)先級為700（優(yōu)先級最大值為1000错蝴，優(yōu)先級越高的約束越先被滿足）
V:[redBox][yellowBox(==redBox)]
豎直方向上洲愤，先有一個redBox，其下方緊接一個高度等于redBox高度的yellowBox
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上漱竖，F(xiàn)ind距離父view左邊緣默認間隔寬度禽篱，之后是FindNext距離Find間隔默認寬度；再之后是寬度不小于20的FindField馍惹，它和FindNext以及父view右邊緣的間距都是默認寬度躺率。（豎線“|”表示superview的邊緣）
- VFL的使用
- 使用VFL來創(chuàng)建約束數(shù)組
pformat：VFL語句
popts：約束類型
pmetrics：VFL語句中用到的具體數(shù)值
pviews：VFL語句中用到的控件
+(NSArray*)constraintsWithVisualFormat:(NSString*)format options:(NSLayoutFormatOptions)optsmetrics:(NSDictionary*)metrics views:(NSDictionary*)views;
- 創(chuàng)建一個字典（內(nèi)部包含VFL語句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)
Snip20151026_18.png
Masonry 第三方框架
- 注意: 在Storyboard中約束是可以重復(fù)添加的, 通過Masonry添加約束也是可以重復(fù)的, 要注意重復(fù)添加導(dǎo)致的錯誤和沖突
- 添加玛界、更新、移除約束
- 添加約束 makeConstraints:
- 每次都會添加新的約束, 也就是會導(dǎo)致重復(fù)添加
- 添加約束 makeConstraints:
[self.blueVeiw makeConstraints:^(MASConstraintMaker *make) {
// make.height.equalTo(100);
// }];
+ 更新約束 updateConstraints
- 特點: 如果沒有設(shè)置過, 就添加一個新的悼吱，如果已經(jīng)設(shè)置過了, 就更新以前設(shè)置的那一個
```objc
[self.blueVeiw updateConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(100);
}];
- 清空約束 remakeConstraints
[self.blueVeiw remakeConstraints:^(MASConstraintMaker *make) {
}];
- 1慎框、添加簡化宏定義
#import "ViewController.h"
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
// 只要添加這個宏, 就可以去掉Masonry框架中對象訪問對象屬性前面的mas_屬性, 和方法前的mas_前綴
// 例如添加前的寫法
/*
make.left.equalTo(self.view.mas_left).with.offset(20);
*/
// 例如添加后的寫法
/*
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
// 只要添加上這個宏, 給equalTo傳遞參數(shù)的時候, 就可以直接傳遞基本數(shù)據(jù)類型 ,系統(tǒng)會自動包裝
// 如果沒有添加上面這個宏, 那么給equalTo傳遞參數(shù)的時候, 必須傳遞對象
// 如果要傳遞基本數(shù)據(jù)類型必須使用mas_equalTo
// 只需要在導(dǎo)入Masonry.h之前, 添加上面的兩個宏, 就可以簡化代碼
#import "Masonry.h"
-
2、實現(xiàn)紅色view是藍色寬度一半后添。笨枯。。遇西。
Snip20151026_19.png
// 1.創(chuàng)建兩個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.添加藍色的約束
[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
