IOS適配

分為兩個部分: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];
      
      }];
    
    }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容