ios 屏幕适配 autolayout | Masonry 使用

设置约束的方式： 1. 通过底部的面板  2. 拖按照ctrl键，选择一个控件拖向另外一个控件 3. 在左侧菜单控件列表，选择一个控件拖向另外一个控件  4. 在右侧约束面板，设置

1.  autolayout 属性设置： 

  autolyout 对齐方式
  autolayout 相对其他控件距离、宽高、相对于其他控件宽高， 如下图属性

设置对齐方式： 

A,B控件 上下左右对齐，还可中心点对齐,选择一个控件拖向另外一个控件

 设置距离、宽高属性

 。 

2.  案例1： 设置控件水平、垂直居中 

  设置 垂直 水平 对齐、  设置控件宽高 【 注意：确定控件x,y坐标，以及宽、高那么久不会报红约束 存在问题】

设置 水平 垂直 居中: 

设置宽高： 

最终效果显示： 

3.  案例2 ： 设置 兄弟 View之间的 约束

A控件 设置左边、顶部、高度约束   B 控件·设置右侧、底部约束 、 设置A、B控件等高, 设置A控件 距离右侧B 控件 距离

设置A控件 左边、顶部、高度约束

B 控件设置 右侧、 底部 约束

设置  登高、等宽

设置A控件 距离右侧B 控件 距离，最终效果

3.   autlayout使用小技巧

 默认宽高：  ImageView[设置图片以后] 、Button [文本宽高]
   设置 上下左右 约束都是0 ，不行 图片会被 压缩

4. 案例4  设置兄弟View 之间约束

A控件 设置左右 约束、设置高度   B控件 设置 右对齐、上间距、 等宽、 

然后设置   下面View宽度= 上面View宽度的/2

5.  案例5： 设置 按钮控件覆盖图片 按钮， 设置透明按钮， 做点击事件

  1. 设置图片  垂直 、水平 居中 
 2.   设置宽度 图片宽度    414*736
 3.   拖入按钮控件 ， 盖住图片按钮
 4.   设置 宽、高约束 图片控件
 5.     设置 水平、垂直  使用当前位置布局， 选择 Use Current Canvas Values

6. 设置控件平分：

 IOS 设置控件平分指导思想：ABCD 四个子控件 在 父控件View中
 1. 拖动父 View  设置 上下右约束0,高度 120 
 2. 首先拖动 4个 按钮 在父 View中，作为子View 

 3. 然后设置第一个按钮A  上下左右 为0
           第二个按钮B  上下右为0
           第三个按钮C  上下右为0 
           第四个按钮D  上下右为0

 然后选中 4个 按钮，设置等宽、等高即可

设置父控件高度包裹子控件：

1. 拖入父View, 设置左右下约束、高度(随便给)
2. 拖入三个控件设置平分A，B，C
3. 删除父View高度
4. 选择A控件，设置A控件底部等于父View底部

7.  Masonry 使用

Masonry 下载以后：启动Masonry , Masonry 就是库,拖入项目中 

启动Masonry IOS Example 

 拖入源文件的区别： 

1、Create groups : 拖入的资源文件中包含其他文件夹在项目中，但是在安装目录 bundle 下不会传文件夹 
   导入 包： #import "Masonry.h"  
2.  create folder refrences:  拖入的资源文件中包含其他文件夹在项目中, 在bundle目录下也会存在真实
文件夹     #import "masonry/Masonry.h"  
3.  不勾选 文件夹拖拽： 在项目中可以看到，但是打包以后不再安装包内 

 

 代码案例：

#import "ViewController.h"

// 解决 mas_
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND

// 解决 对数据的自动装箱
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS

#warning  宏定义一定要 放到 导入头文件之前 , 不然会影响编译

// 导入头文件
#import "Masonry.h"


@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
#warning Mansory 会自动的帮我们把autoresizing给关闭
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:redView];
    
    /**
     第一种写法
     
     [redView mas_makeConstraints:^(MASConstraintMaker *make) {
     // make 在这里就代表被约束的view,表示距离顶部20
     // 顶部
     make.top.equalTo(self.view.mas_top).offset(20);
     // 设置左侧, 表示距离左侧20
     make.left.equalTo(self.view.mas_left).offset(20);
     // 设置右侧
     make.right.equalTo(self.view.mas_right).offset(-20);
     
     // 设置高度 , 这里使用的时候: 装箱
	  // 这里 参数是 id 类型, 自动把 int 转化为 id 类型
     make.height.mas_equalTo(40);
     
     }];
     */
    
    
    /**
     第二种写法
     如果被约束view 的属性 和 参照view的属性相同的话可以省略掉
     [redView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.top.equalTo(self.view).offset(20);
     make.left.equalTo(self.view).offset(20);
     make.right.equalTo(self.view).offset(-20);
     make.height.mas_equalTo(40);
     }];
     */
    
    // 3. 如果想要省略掉 mas_ 导入  #define MAS_SHORTHAND
    
//    [redView makeConstraints:^(MASConstraintMaker *make) {
//        make.top.equalTo(self.view).offset(20);
//        make.left.equalTo(self.view).offset(20);
//        make.right.equalTo(self.view).offset(-20);
//        make.height.equalTo(40);
//    }];

    /**
     4.  如果, 被约束view两个属性 的值是相同的, 可以连写
     
     [redView mas_makeConstraints:^(MASConstraintMaker *make) {
     
     // 距离顶部和左边
     make.top.left.equalTo(self.view).offset(20);
     make.right.equalTo(self.view).offset(-20);
     make.height.mas_equalTo(40);
     
     }];
     */
    
    /**   5. 统一设置 
     [redView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.mas_equalTo(UIEdgeInsetsMake(20, 20, 20, 20));
     }];
     */
    
    //6.  默认的参照view 就是 自己的父view
    [redView makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.left.offset(20);
        make.right.offset(-20);
        make.height.equalTo(40);
    }];
    
    // 7. 蓝色的view
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    
    [self.view addSubview:blueView];
    
    [blueView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(redView.bottom).offset(20);
        make.right.equalTo(redView).offset(0);
        make.height.equalTo(redView);
        make.width.equalTo(redView).multipliedBy(0.5);
        
        
    }];
    
    
    /**
	8. 
     更新约束 , 在原有的基础上 , 对要更新的约束进行修改
     如果使用 makeConstraints 就会造成约束冲突， 把原来的约束都清空掉，设置新的
     [redView updateConstraints:^(MASConstraintMaker *make) {
     make.height.equalTo(80);
     }];
    */
    
    /**
     重新设置约束
     把原有所有的约束都清空掉, 然后设置新的
     
     [redView remakeConstraints:^(MASConstraintMaker *make) {
     
     make.height.equalTo(50);
     }];
     */
    
    
    
}


@end

约束动画：

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *redView;

// 选择 右侧属性 面板 , 拖入 top 约束即可
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topMargin;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    // 只是设置约束
    self.topMargin.constant += 20;
    
    [UIView animateWithDuration:0.5 animations:^{
        // 执行的动画必须是可动画的 alpha , frame ,bounds, hiden
        
        // self.view 调用这个方法, 会刷新他所有的子view的约束
        [self.view layoutIfNeeded];
    }];
}

@end