IOS适配

2016-06-17 本文已影响334人 IIronMan

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

}

IOS适配

分为两个部分：VFL代码适配和Masonry框架适配

1.VFL代码适配

具体的代码如下

2.Masonry框架适配

具体的代码如下

猜你喜欢

热点阅读