分为两个部分：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]; }]; }
网友评论