美文网首页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)

    可以先看一下这里,最后不要忘了给个赞啊!iOS8:// http://www.cocoachina.com/ios...

  • iOS Masonry常用方法

    Masonry就是为屏幕适配而生的三方框架. Masonry基础API 更新约束和布局 Masonry示例代码 常...

  • 全屏幕适配

    说起屏幕适配, 估计很多人都会想到autoLayout, 想到Masonry, 但是今天说的屏幕适配与这自动布局没...

  • iOS autoLayout

    autolayout 基本的常识 现在主流的屏幕适配是sizeClass + auotoLayout ,以前aut...

  • 今天遇到的坑(屏幕适配问题,UIAlertView问题),以及s

    屏幕适配问题 在做EyptBeacon项目时,在storyboard中使用AutoLayout和SizeClass...

  • 版本适配

    屏幕适配 代码适配 Masonry UIView+AutoLayout 可视化适配 autoLayout 系统适配...

  • 适配详解

    图片适配、控件适配,xib适配。Masonry //图片适配 //3gs和4的屏幕缩放系数是1. 4s~6s屏幕缩...

  • 横竖屏适配-SizeClass - (Obj-C)

    通过SizeClass的方式,在StoryBoard中点击如图位置: 通过提示信息可以判断适配屏幕类型:默认模式:...

  • 屏幕适配

    屏幕适配的思想就是让布局效果在任意机型上得到适配,不会出现布局错位等问题 屏幕适配从两方面来说,首先屏幕适配第一就...

  • iOS Masonry详解

    现在iPhone手机屏幕越来越多, 屏幕适配也越来越重要. Masonry就是为屏幕适配而生的三方框架. Maso...

网友评论

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

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