美文网首页iOS、swift技术交流!
屏幕适配(Masonry布局sizeclass)

屏幕适配(Masonry布局sizeclass)

作者: 光明程辉 | 来源:发表于2016-02-23 13:43 被阅读399次

    可以先看一下这里,最后不要忘了给个赞啊!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
    1. 继承性
      • : 其它8种情况都会继承
      • : 会被- - \ + -继承
      • : 会被+ - \ + +继承
    1. sizeclass和autolayout的作用
      sizeclass:仅仅是对屏幕进行了分类
      autolayout:对屏幕中各种元素进行约束(位置\尺寸)
    01.png

    选择view controller


    02.png

    相关文章

      网友评论

      本文标题:屏幕适配(Masonry布局sizeclass)

      本文链接:https://www.haomeiwen.com/subject/mtwbkttx.html