屏幕适配（Masonry布局sizeclass）

可以先看一下这里，最后不要忘了给个赞啊！iOS8:
// http://www.cocoachina.com/ios/20141217/10669.html

最原始的写法！！！！

//建立一个红色的VIew
UIView *readView = [[UIView alloc] initWithFrame:CGRectZero];
readView.backgroundColor = [UIColor redColor];

// 取消停靠模式转化为约束的机制
readView.translatesAutoresizingMaskIntoConstraints = NO;
// 添加约束之前需要先添加到父视图之上
[self.view addSubview:readView];

//添加约束
// 添加第一个参数
/**
 *  参数1:该约束所关联的对象1
 *  参数2:该约束的类型
 *  参数3:大于等于、小于或恒等于
 *参数4:该约束所关联的对象2
 *参数5:约束类型
 参数6:比例
 参数7:具体的数值
 */
// 确定 X 坐标
 NSLayoutConstraint *leftLayout = [NSLayoutConstraint
                                  constraintWithItem:readView                                   attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual
                                  toItem:self.view     
                                  attribute:NSLayoutAttributeRight multiplier:1.0
                                       constant:-50];
// 确定Y 坐标
NSLayoutConstraint *right = [NSLayoutConstraint
                             constraintWithItem:readView 
                             attribute:NSLayoutAttributeBottom 
                             relatedBy:NSLayoutRelationEqual 
                             toItem:self.view 
                             attribute:NSLayoutAttributeBottom 
                             multiplier:1.0
                             constant:-50];

// 确定 width
 NSLayoutConstraint *widthLayout = [NSLayoutConstraint
                                    constraintWithItem:readView 
                                    attribute:NSLayoutAttributeWidth 
                                    relatedBy:NSLayoutRelationEqual toItem:nil 
                                    attribute:NSLayoutAttributeWidth
                                    multiplier:1.0
                                    constant:100];

NSLayoutConstraint *heightLayout = [NSLayoutConstraint
                                    constraintWithItem:readView 
                                    attribute:NSLayoutAttributeHeight 
                                    relatedBy:NSLayoutRelationEqual
                                    toItem:nil 
                                    attribute:NSLayoutAttributeHeight 
                                    multiplier:1.0 constant:100];

// 父视图也要添加这4个约束
[self.view addConstraints:@[leftLayout,right,widthLayout,heightLayout]];
  }

使用Masonry

• 首先引入库：

• 引入头文件：#import "Masonry.h"

• // multipliedBy 是 比例
  UIView *readView = [[UIView alloc] initWithFrame:CGRectZero];
  readView.translatesAutoresizingMaskIntoConstraints = NO;
  readView.backgroundColor = [UIColor blackColor];
  [self.view addSubview:readView];
  // 添加约束
  // 通过类别的方式添加的方法
  [readView mas_makeConstraints:^(MASConstraintMaker *make) {

  //        make.right.equalTo(self.view.mas_right).offset(-50);// 完整写法
    
    make.right.equalTo(self.view).offset(-50);
    make.bottom.equalTo(self.view).offset(-50);
    make.width.mas_equalTo(100);
    make.height.mas_equalTo(100);
    }];
  
    UIView *blueView = [[UIView alloc] initWithFrame:CGRectZero];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    blueView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:blueView];
  
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(readView.mas_left).offset(-50);
    make.bottom.equalTo(readView.mas_top).offset(-50);
    //        make.width.mas_equalTo(100);
    //        make.height.mas_equalTo(100);
    
    // multipliedBy 是 比例
    make.width.equalTo(readView).multipliedBy(1.0);
    make.height.equalTo(readView);
  }];
  

• 效果图：

  
  
  

  效果.png

屏幕适配

1> 发展历程
代码计算frame -> autoreszing(父控件和子控件的关系) -> autolayout(任何控件都可以产生关系) -> sizeclass

2> sizeclass

• 仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout
• 不再有横竖屏的概念, 只有屏幕尺寸的概念
• 不再有具体尺寸的概念, 只有抽象尺寸的概念
• 把宽度和高度各分为3种情况

1. Compact : 紧凑(小)
2. Any : 任意
3. Regular : 宽松(大)
4. 符号代表

• : Compact

• : Any

• : Regular

5. 继承性

• • : 其它8种情况都会继承
• • : 会被- - \ + -继承

• • : 会被+ - \ + +继承

6. sizeclass和autolayout的作用
   sizeclass:仅仅是对屏幕进行了分类
   autolayout:对屏幕中各种元素进行约束(位置\尺寸)

01.png

选择view controller

02.png