分為兩個部分：VFL代碼適配和Masonry框架適配
1.VFL代碼適配
一、VFL介紹
1、VFL全稱是Visual Format Language，翻譯過來是“可視化格式語言”
2、VFL是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言
3、VFL:需有橫豎兩個方向的約束
橫向: H:
豎向: V:
4、核心思想
約束視圖和視圖之間的關系來分配屏幕上的位置
4、使用autoLayout 必須把translatesAutoresizingMaskIntoConstraints禁用才可以使用
5、添加約束之前，一定要保證相關控件都已經在各自的父控件上不用再給view設置frame
6. 使用感受：寫過第一次VFL不想再寫第二次
二、VFL示例
1、在水平方向上 canelButton的寬是72，acceptButton寬是50，它們2個控件之間的間距是12
H:[cancelButton(72)]-12-[acceptButton(50)] ： 是一個字符串
2、在水平方向上 wideView寬度大于等于60point，該約束條件優先級為700（優先級最大值為1000，優先級越高的約束越先被滿足）
H:[wideView(>=60@700)]
3、豎直方向上，先有一個redBox，其下方緊接一個高度等于redBox高度的yellowBox
V:[redBox]-[yellowBox(==redBox)] 其中redBox是控件
4、(豎線“|” 表示superview的邊緣)水平方向上，Find距離父view左邊緣默認間隔寬度，之后是FindNext距離Find間隔默認寬度；再之后是寬度不小于20的FindField，它和FindNext以及父view右邊緣的間距都是默認寬度
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
三、使用步驟
1、禁用autoResizing resize |?ri??sa?z| 改變.....的大小
view.translatesAutoresizingMaskIntoConstraints = NO;
2、創建一個字典，內部包含VFL語句中用到的控件，
NSDictionaryOfVariableBindings(...)
3、使用VFL來創建約束數組
format ：VFL語句
opts ：約束類型
metrics ：VFL語句中用到的具體數值
views ：VFL語句中用到的控件
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
4、給父試圖添加數組約束
addConstraints
-
具體的代碼如下
/* * VFL 需要了解的內容 * * 1.蘋果推出的一種用代碼寫的autolayout可視化格式語言 * * 2.需要對橫豎兩個方向進行約束 * * 3.使用VFL前要禁用autoresing * * 4.給視圖添加約束之前要確保在父視圖上面 * * 使用感受：不在想使用第二次 */ //1.把視圖放到父視圖 UIView *view1 = [[UIView alloc]init]; view1.backgroundColor = [UIColor redColor]; [self.view addSubview:view1]; //2.禁用autoresing view1.translatesAutoresizingMaskIntoConstraints = NO; //3.綁定視圖 NSDictionary *dict = NSDictionaryOfVariableBindings(view1); //4.生成一個約束數組 NSArray *contrainH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view1]-10-|" options:nil metrics:nil views:dict]; NSArray *contrainV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-50-[view1]-50-|" options:nil metrics:nil views:dict]; //5.將約束添加到（父視圖上面）視圖上面 [self.view addConstraints:contrainH]; [self.view addConstraints:contrainV]; 效果圖：
VFL代碼配置過的視圖layout
2.Masonry框架適配
一、認識masonry
1、Masonry是一個輕量級的布局框架，實現一種更簡單的方式用代碼做autolayout布局
2、擁有自己的描述語法，采用更優雅的鏈式語法封裝自動布局
3、簡潔明了并具有高可讀性，而且同時支持 iOS 和 Mac OS X
4、使用masonry框架做布局，從此以后就可以拋棄CGRectMake了
二、在masonry中能夠添加autolayout約束有三個方法，
1、mas_makeConstraints 只負責新增約束 Autolayout不能同時存在兩條針對于同一對象的約束 否則會報錯
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
2、mas_updateConstraints 針對上面的情況 會更新在block中出現的約束 不會導致出現兩個相同約束的情況
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
3、mas_remakeConstraints則會清除之前的所有約束僅保留最新的約束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
PS：三種方法善加利用就可以應對各種情況了
三、masonry使用示例
1、用四個等寬等高的試圖，填充整個self.view
- 分析思路：先初始化視圖放到view上，再對其進行設置 mas_make/update/remake，再make.left/top.equalTo(self.view.mas_width/height).multipliedBy(0.5).offset(0);
效果圖
代碼如下：（代有規律，不用害怕）
-(void)layoutFourBlock
{
UIView *redView = [[UIView alloc]init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
UIView *greenView = [[UIView alloc]init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
UIView *blueView = [[UIView alloc]init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
UIView *brownView = [[UIView alloc]init];
brownView.backgroundColor = [UIColor brownColor];
[self.view addSubview:brownView];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left);
make.top.equalTo(self.view.mas_top);
make.width.equalTo(self.view.mas_width).multipliedBy(0.5).offset(0);
make.height.equalTo(self.view.mas_height).multipliedBy(0.5).offset(0);
}];
[greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(redView.mas_right);
make.top.equalTo(self.view.mas_top);
make.width.and.height.equalTo(redView);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left);
make.top.equalTo(redView.mas_bottom);
make.width.and.height.equalTo(redView);
}];
[brownView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(blueView.mas_right);
make.top.equalTo(greenView.mas_bottom);
make.width.and.height.equalTo(redView);
}];
}
2、讓兩個高度為150的view垂直居中且等寬且等間隔排列 間隔為10(自動計算其寬度)
效果圖
-
代碼如下：
-(void)layoutEqualwith { UIView *view2 = [[UIView alloc]init]; view2.backgroundColor = [UIColor redColor]; [self.view addSubview:view2]; UIView *view3 = [[UIView alloc]init]; view3.backgroundColor = [UIColor yellowColor]; [self.view addSubview:view3]; float padding = 20; [view2 mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view.mas_left).offset(padding); make.centerY.equalTo(self.view); make.height.equalTo(@150); make.width.equalTo(view3); }]; [view3 mas_makeConstraints:^(MASConstraintMaker *make) { make.right.equalTo(self.view.mas_right).offset(-padding); make.centerY.equalTo(self.view); make.width.equalTo(view2); make.height.equalTo(@150); make.left.equalTo(view2.mas_right).offset(padding); }]; }3、實現動畫
-
具體的代碼如下
-(void)masonryAnimation { redView = [[UIView alloc]init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; [redView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(@40); make.top.equalTo(@50); make.width.equalTo(self.view.mas_width).multipliedBy(0.6); make.height.equalTo(self.view.mas_height).multipliedBy(0.5); }]; } -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { [redView mas_makeConstraints:^(MASConstraintMaker *make) { make.height.equalTo(self.view.mas_height).multipliedBy(0.1); }]; [UIView animateWithDuration:2 animations:^{ [self.view layoutIfNeeded]; }]; }
