iPhone屏幕适配

屏幕适配

屏幕适配发展历史

• iPhone3GS/iPhone4

  • 没有屏幕适配可言
  • 全部用frame,bounds,center进行布局
  • 很多这样的现象: 坐标值.宽度.高度值全部写死

  // 例如
  UIButton *btn = [[UIButton alloc] init];
  btn.frame = CGRectMake(0,0,320-a,480-b);
  

• iPad出现/iPhone横屏出现

  • Autoresizing技术出现

    • 让横竖屏适配,相对简单

    • 让'子控件'可以跟随'父控件'的行为自动发生相应的改变;

    • 外围的四条线--代表距离边的距离固定

    • 内部的两条线--代表可以垂直/水平可以拉伸

    • 前提:关闭Autolayout功能

    • 局限性

      • 只能解决子控件和父控件的相对关系问题
      • 不能解决兄弟控件相对位置关系

    • 用代码实现Autoresizing

      redView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;
      // 一般在子控件放到父控件之前,用Autoresizing;
      [blueView addSubview:redView];
      /**
       UIViewAutoresizingNone                 = 0,
      UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,                          距离父控件左边的间距是伸缩的（不固定的）
       UIViewAutoresizingFlexibleRightMargin  = 1 << 2,                     距离父控件右边的间距是伸缩的（不固定的）
      UIViewAutoresizingFlexibleTopMargin    = 1 << 3,                      距离父控件顶部的间距是伸缩的（不固定的）
      UIViewAutoresizingFlexibleBottomMargin = 1 << 5,                      距离父控件底部的间距是伸缩的（不固定的）
      UIViewAutoresizingFlexibleWidth        = 1 << 1,                      宽度跟随父控件的宽度进行自动伸缩
      UIViewAutoresizingFlexibleHeight       = 1 << 4,                      高度跟随父控件的高度进行自动伸缩
      */
      

• iOS 6.0 开始出现了Autolayout,(Xcode 5.0)iOS 7.0 开始火

  • 核心概念:参照,约束
  • 警告(黄点):frame不匹配约束;
  • 错误(红点):1.约束冲突,2.缺少约束;

• 约束添加动画代码

// 注意: 更改约束的代码不用放在要执行动画的block中
    self.spacingContraint.constant = 50;
    self.widthContraint.constant = 100;
// 执行约束改变的动画
[UIView animateWithDuration:2.0 animations:^{
    // self.blueView的约束动画执行语句;
        [self.blueView layoutIfNeeded];
    }];

• 添加约束的规则

  • 对于两个同层级view之间的约束关系,添加到他们的父view上
  • 对于两个不同层级view之间的约束关系,添加到他们最近的共同的父view上
  • 对于有层级关系的两个view之间的约束关系,添加到层级较高的父view上

• 代码创建约束

  // 不要讲autresizing的约束转化成为autolayout的约束;
  blueView.translatesAutoresizingMaskIntoConstraints = NO;
  // 宽度约束
  NSLayoutConstraint *widthCon = [NSLayoutConstraint constraintWithItem:<#(nonnull id)#> attribute:<#(NSLayoutAttribute)#> relatedBy:<#(NSLayoutRelation)#> toItem:<#(nullable id)#> attribute:<#(NSLayoutAttribute)#> multiplier:<#(CGFloat)#> constant:<#(CGFloat)#>]
  [blueView addConstraint:<#(nonnull NSLayoutConstraint *)#>];
  // 高度约束
  NSLayoutConstraint *heightCon = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:300];
  [blueView addConstraint:heightCon];
  // 右侧约束
  NSLayoutConstraint *rightCon = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view   attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
  [self.view addConstraint:rightCon];
  // 底部约束
  NSLayoutConstraint *bottonCon = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view   attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
  // 注意添加到self.view上
  [self.view addConstraint:bottonCon];
  

• VFL语言

  • visual format language 可视化语言
  • 苹果为了简化约束的代码而退出的语言
  • 大部分的约束可以用vfl语言表示,但是还是有一部分不能用vfl;

• Masonry框架的使用(简化代码);

  • 使用步骤:
    • 添加Masonry到工程中
    • 添加两个宏,导入主头文件
    • 注意:两个宏一定要放到主头文件之前

  
  //这个方法只会添加新的约束
  [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
      }];
   // 这个方法会将以前的所有约束删掉，添加新的约束
  

[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
}];
// 这个方法将会覆盖以前的某些特定的约束
[blueView mas_updateConstraints:^(MASConstraintMaker *make) {
}];
```

- 约束的类型：
    - 尺寸：width\height\size
    - 边界：left\leading\right\trailing\top\bottom
    - 中心点：center\centerX\centerY
    - 边界：edges

- make_equalTo和equalTo的选择
    - mas_equalTo：这个方法会对参数进行包装
    - equalTo：这个方法不会对参数进行包装
    - mas_equalTo的功能强于 > equalTo

- 好用的两个宏
    ```objc
    //define this constant if you want to use Masonry without the 'mas_' prefix
    // 如果想要在编程的时候去掉mas_这个东西就可以引入这个宏
    #define MAS_SHORTHAND
    //define this constant if you want to enable auto-boxing for default syntax
    // 如果想使用自动包装定义下面的宏
    #define MAS_SHORTHAND_GLOBALS
    注意: 必须放在#import "Masonry.h"之前
    ```
- 增加可读性方法

```objc

-(MASConstraint *)with {
return self;
}

-(MASConstraint *)and {
return self;
}
```

使用autolayout注意点

• 一定要拥有父控件之后,再添加约束
• 关闭Autoresizing功能