ios 屏幕適配 autolayout | Masonry 使用

1.  autolayout 屬性設置： 

  autolyout 對齊方式
  autolayout 相對其他控件距離、寬高、相對於其他控件寬高， 如下圖屬性

設置對齊方式： 

 設置距離、寬高屬性

 。 

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.  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