Masonry入門

參考文章:
http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/
Demo地址:https://github.com/LiuDongiOS/MasonryDemo
入門進階表:(一定要先addSubview)

入門進階表.png

1:不堪一擊,實現(xiàn)以下效果:

居中顯示一個view.png
居中顯示一個view.png

代碼實現(xiàn):


  UIView *sv = [UIView new];
  [sv showPlaceHolder];
  sv.backgroundColor = [UIColor blackColor];
 
  [self.view addSubview:sv];
 [sv mas_makeConstraints:^(MASConstraintMaker *make) {

   make.left.right.equalTo(@0);
   make.height.equalTo(@200);
   make.center.equalTo(self.view);

 }];
 

2:初學乍練,實現(xiàn)?以下效果:

在上一個基礎之上添加一個子view略小于其superView(邊距為10).png
在上一個基礎之上添加一個子view略小于其superView(邊距為10).png

代碼實現(xiàn):

  UIView *sv1 = [UIView new];
  [sv1 showPlaceHolder];
  sv1.backgroundColor = [UIColor redColor];
  [sv addSubview:sv1];
  [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 第一種方式
//    make.top.equalTo(sv).with.offset(10);
//    make.left.equalTo(sv).with.offset(10);
//    make.right.equalTo(sv).with.offset(-10);
//    make.bottom.equalTo(sv).with.offset(-10);
   //第二種方法
    //基于某個view四周進行約束
//    make.edges.equalTo(sv).insets(UIEdgeInsetsMake(20, 10, 20, 10));
//    
    //第三種方法
    make.top.and.left.and.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
 
  }];
 

3:初窺門徑,實現(xiàn)以下效果:

![讓兩個高度為150的view(sv的子view)水平居中且等寬且等間隔排列 間隔為10(自動計算其寬度).png . . .]](http://upload-images.jianshu.io/upload_images/1259755-79f1e17503f0375f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

讓兩個高度為150的view(sv的子view)水平居中且等寬且等間隔排列 間隔為10(自動計算其寬度).png

代碼實現(xiàn):

int padding1 = 10;
  UIView *sv2 = [UIView new];
  sv2.backgroundColor = [UIColor colorWithRed:0.000 green:1.000 blue:0.502 alpha:1.000];
  [sv2 showPlaceHolder];
  [self.view addSubview:sv2];
 
 
  UIView *sv3 = [UIView new];
  sv3.backgroundColor = [UIColor colorWithRed:0.000 green:1.000 blue:0.502 alpha:1.000];
  [sv3 showPlaceHolder];
  [self.view addSubview:sv3];
 
  [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.mas_equalTo(150);
    make.centerY.mas_equalTo(sv.mas_centerY);
    make.width.equalTo(sv3);
    make.left.equalTo(sv).with.offset(padding1);
    make.right.equalTo(sv3.mas_left).with.offset(-padding1);
   
 
  }];
 

  [sv3 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.mas_equalTo(@150);
    make.centerY.mas_equalTo(sv.mas_centerY);
    make.width.equalTo(sv2);
    make.left.equalTo(sv2.mas_right).with.offset(padding1);
    make.right.equalTo(sv.mas_right).with.offset(-padding1);
   

  }];

4.略有小成,實現(xiàn)以下效果:

黑,灰倆個view.黑色view的左、右邊距為20,上邊距為80, 下邊距灰色view 20,寬度自適應,高度與灰色view平分整個界面(不包含頭部的標題和按鈕所占高度).灰色view寬度為黑色view的一半(即左邊以中線起始),右、下邊距與黑色view相同,高度與黑色view相同).png
黑,灰倆個view.黑色view的左、右邊距為20,上邊距為80, 下邊距灰色view 20,寬度自適應,高度與灰色view平分整個界面(不包含頭部的標題和按鈕所占高度).灰色view寬度為黑色view的一半(即左邊以中線起始),右、下邊距與黑色view相同,高度與黑色view相同).png

代碼實現(xiàn):

UIView *blackView = [UIView new];
  blackView.backgroundColor = [UIColor blackColor];
  [blackView showPlaceHolder];
  [self.view addSubview:blackView];
 
  UIView *grayView = [UIView new];
  grayView.backgroundColor = [UIColor lightGrayColor];
  [grayView showPlaceHolder];
  [self.view addSubview:grayView];

  [blackView mas_makeConstraints:^(MASConstraintMaker *make) {
  //添加左,上邊距的約束
  //mas_equal的支持CGSIZE CGPOINT NSNUMBER UIEDGEINSETS
    make.top.mas_equalTo(80);
    make.left.mas_equalTo(20);
    //添加右邊約束
    make.right.mas_equalTo(-20);
 
   
   
  }];
 

  [grayView mas_makeConstraints:^(MASConstraintMaker *make) {
    //添加右下約束
    make.bottom.right.mas_equalTo(-20);
    //添加高度約束,讓高度等于blackview
    make.height.equalTo(blackView);
    //添加上邊約束
    make.top.equalTo(blackView.mas_bottom).offset(20);
    //添加左邊距
    make.left.equalTo(self.view.mas_centerX).offset(0)
    ;
   
   
   
   
  }];

5:駕輕就熟,實現(xiàn)以下效果:


綠,紅,藍三個view.綠色view的上邊距為80、左邊距為20,右邊距self.view的X中線為10. 紅色view的上邊距80、右邊距為 20,左邊距綠色view 20. 綠、紅寬度自適應. 藍色view的上邊距綠、紅view為 20, 左、右、下邊距為20,高度與綠, 紅view相同.png

綠,紅,藍三個view.綠色view的上邊距為80、左邊距為20,右邊距self.view的X中線為10. 紅色view的上邊距80、右邊距為 20,左邊距綠色view 20. 綠、紅寬度自適應. 藍色view的上邊距綠、紅view為 20, 左、右、下邊距為20,高度與綠, 紅view相同

代碼實現(xiàn):

//第一步:
  UIView *greenView = [UIView new];
  greenView.backgroundColor = [UIColor greenColor];
  [greenView showPlaceHolder];
  [self.view addSubview:greenView];
 
  UIView *redView = [UIView new];
  redView.backgroundColor = [UIColor redColor];
  [redView showPlaceHolder];
  [self.view addSubview:redView];
 
  UIView *blueView = [UIView new];
  blueView.backgroundColor = [UIColor blueColor];
  [blueView showPlaceHolder];
  [self.view addSubview:blueView];
  //第二步
 
 
 
  [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
   
   
    make.top.mas_equalTo(80);
    make.left.mas_equalTo(20);
    make.right.mas_equalTo(self.view.mas_centerX).offset(-10);
   
   
   
   
  }];
 
 
  [redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(80);
    make.right.mas_equalTo(-20);
    make.left.mas_equalTo(greenView.mas_right).offset(20);
   
   
  }];
 
  [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.top.mas_equalTo(redView.mas_bottom).offset(20);
    make.left.mas_equalTo(20);
    make.bottom.right.equalTo(@-20);

    make.height.mas_equalTo(redView);
    make.height.mas_equalTo(greenView);
   

  }];

6.融會貫通,實現(xiàn)以下效果.


垂直居中顯示輸入框, 左右邊距為 10,高度為 40. 當鍵盤擋住輸入框時,輸入框自動向上彈到鍵盤上方。.png

垂直居中顯示輸入框, 左右邊距為 10,高度為 40. 當鍵盤擋住輸入框時,輸入框自動向上彈到鍵盤上方。.png

代碼實現(xiàn):

//這里我把距離bottom的距離設定了定值了在橫屏鍵盤消失的時候會回到屏幕上方,
//這里讓大家理解更新約束的用法.
- (void)viewDidLoad {
  [super viewDidLoad];
  [self creatBackButton];
  self.textField = [UITextField new];
  self.textField.backgroundColor = [UIColor redColor];
  self.textField.frame = CGRectMake(10, self.view.frame.size.height /2, self.view.frame.size.width - 20, 40);
  [self.textField showPlaceHolder];
 [self.view addSubview:self.textField];
  [self.textField mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.right.mas_equalTo(-10);
    make.centerX.equalTo(self.view);
    make.bottom.mas_equalTo(-350);
    make.height.mas_equalTo(40);
   
  }];
 
 // 注冊鍵盤通知
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillChangeFrameNotification:) name:UIKeyboardWillChangeFrameNotification object:nil];
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHideNotification:) name:UIKeyboardWillHideNotification object:nil];
 
  // Do any additional setup after loading the view.
}

#pragma mark -- 鍵盤即將出現(xiàn) --
- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification {
 
  // 獲取鍵盤基本信息(動畫時長與鍵盤高度)
  NSDictionary *userInfo = [notification userInfo];
  CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
  CGFloat keyboardHeight = CGRectGetHeight(rect);
  CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
 
  // 修改下邊距約束
 [self.textField mas_updateConstraints:^(MASConstraintMaker *make) {
  
   
   make.bottom.mas_equalTo(-keyboardHeight);
   
   
 }];
 

  // 更新約束
  [UIView animateWithDuration:keyboardDuration animations:^{
   
    [self.view layoutIfNeeded];
  }];
}
#pragma mark -- 鍵盤即將消失 --
- (void)keyboardWillHideNotification:(NSNotification *)notification {
 
  // 獲得鍵盤動畫時長
  NSDictionary *userInfo = [notification userInfo];
  CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
 
  // 修改為以前的約束
   [self.textField mas_updateConstraints:^(MASConstraintMaker *make) {
    
     make.bottom.mas_equalTo(-350);

    
   }];
 

  // 更新約束
  [UIView animateWithDuration:keyboardDuration animations:^{
   
    [self.view layoutIfNeeded];
  }];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 
  [super touchesBegan:touches withEvent:event];
  [self.view endEditing:YES];
}

7.爐火純青,實現(xiàn)以下效果.


在UIScrollView順序排列50個view并自動計算contentSize.png

在UIScrollView順序排列50個view并自動計算contentSize.png

代碼實現(xiàn):

UIView *sv = [UIView new];
  sv.backgroundColor = [UIColor blackColor];
  [self.view addSubview:sv];
  [sv mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.left.right.equalTo(@0);
    make.top.equalTo(@80);
    make.bottom.equalTo(@0);
   
  }];
  UIScrollView *scrollView = [UIScrollView new];
  scrollView.backgroundColor = [UIColor whiteColor];
  [sv addSubview:scrollView];
  [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(sv);
  }];
 
  UIView *container = [UIView new];
  [scrollView addSubview:container];
  [container mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.edges.equalTo(scrollView);
    make.width.equalTo(scrollView);
   
  }];
 
  int count = 50;
 
  UIView *lastView = nil;
 
  for ( int i = 1 ; i <= count ; ++i )
  {
    UIView *subv = [UIView new];
    [container addSubview:subv];
    subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
                     saturation:( arc4random() % 128 / 256.0 ) + 0.5
                     brightness:( arc4random() % 128 / 256.0 ) + 0.5
                       alpha:0.6];
   
    [subv mas_makeConstraints:^(MASConstraintMaker *make) {
      make.left.and.right.equalTo(container);
      make.height.mas_equalTo(@(5*i + 5));
    //作答區(qū)  
      if (lastView) {
        make.top.mas_equalTo(lastView.mas_bottom);
      }else{
       
        make.top.mas_equalTo(container.mas_top);
       
      }
  
    }];
   
    lastView = subv;
    [lastView showPlaceHolder];
  }
 
 
  [container mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(lastView.mas_bottom);
  }];

8:出類拔萃,實現(xiàn)以下效果:

實現(xiàn)對tableView添加、更新、重置約束.png

實現(xiàn)對tableView添加、更新、重置約束.png

實現(xiàn)代碼:

//主要代碼
- (void)handleMake:(UIButton *)button{
 
  [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.top.mas_equalTo(80);
    make.left.mas_equalTo(self.view.mas_left);
    make.bottom.right.mas_equalTo(0);
   
 
  }];
 
 
}

- (void)handleUp:(UIButton *)button{
  //更新你需要更新的約束
  [self.tableView mas_updateConstraints:^(MASConstraintMaker *make) {
   
    make.top.mas_equalTo(150);
   

  }];
 

}

- (void)handleRemark:(UIButton *)button{
  //不能針對一個view添加倆個約束
  [self.tableView mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(180);
    make.left.mas_equalTo(self.view.mas_left);
    make.bottom.right.mas_equalTo(-80);

  }];
 
}

9:出神入化,實現(xiàn)以下效果:

解析數(shù)據(jù), 實現(xiàn)約束和高度自適應.png

解析數(shù)據(jù), 實現(xiàn)約束和高度自適應.png

代碼實現(xiàn):

//用到了自定義cell 工程demo在下方鏈接
 [self.lableContent mas_makeConstraints:^(MASConstraintMaker *make) {
  
   make.edges.equalTo(self.contentView);
   
 }];
 

10:得心應手,實現(xiàn)以下效果:


九宮格.png
九宮格.png

代碼實現(xiàn):

//此代碼可以直接放在viewDidLoad
// 創(chuàng)建一個空view 代表上一個view
  __block UIView *lastView = nil;
  // 間距為10
  int intes = 10;
  // 每行3個
  int num = 3;
  // 循環(huán)創(chuàng)建view
  for (int i = 0; i < 9; i++) {
   
    UIView *view = [UIView new];
    [self.view addSubview:view];
    view.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0 ) saturation:( arc4random() % 128 / 256.0 ) + 0.5
                     brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:0.2];
   
    // 添加約束
   
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
      // 給個高度約束
      make.height.mas_equalTo(80);
     
      // 1. 判斷是否存在上一個view
      if (lastView) {
        // 存在的話寬度與上一個寬度相同
        make.width.equalTo(lastView);
      } else {
       
        if (i % num != 0) {
          make.width.mas_equalTo((view.superview.frame.size.width - (num + 1)* intes)/4);
        }
      }
      // 2. 判斷是否是第一列
      if (i % num == 0) {
        // 一:是第一列時 添加左側(cè)與父視圖左側(cè)約束
        make.left.mas_equalTo(view.superview).offset(intes);
      } else {
        // 二: 不是第一列時 添加左側(cè)與上個view左側(cè)約束
        make.left.mas_equalTo(lastView.mas_right).offset(intes);
      }
      // 3. 判斷是否是最后一列 給最后一列添加與父視圖右邊約束
      if (i % num == (num - 1)) {
        make.right.mas_equalTo(view.superview).offset(-intes);
      }
      // 4. 判斷是否為第一列
      if (i / num == 0) {
        // 第一列添加頂部約束
        make.top.mas_equalTo(view.superview).offset(intes*10);
      } else {
        // 其余添加頂部約束 intes*10 是我留出的距頂部高度
        make.top.mas_equalTo(intes * 10 + ( i / num )* (80 + intes));
      }
     
    }];
    // 每次循環(huán)結(jié)束 此次的View為下次約束的基準
    lastView = view;
   
  }

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • # 一、框架概述 # 課程概述 1. laravel 4天(之前TP框架還是很大的區(qū)別)(國外框架) 2. 在線教...
    關進一閱讀 492評論 0 0
  • iOS布局有很多種方法,有原始的Frame布局,通過計算每一個控件的高度/寬度,來定義每一個控件的位置,簡單的只有...
    敲代碼的樹懶閱讀 1,497評論 0 3
  • 本章節(jié)主要介紹jenkins的使用 在前一章節(jié)中已經(jīng)介紹可jenkins安裝步驟,不了解的可以參考前文:[jenk...
    haishuiaa閱讀 3,324評論 0 3
  • 一、關于MySQL MySQL(Structured Query Language)是一個關系型數(shù)據(jù)庫管理系統(tǒng),在...
    eRosicky閱讀 597評論 0 0
  • 如是家人張婷,種種子第11天 發(fā)心:我今不僅是為了我個人而聞思修,更是為了六道輪回一切如母有情眾生,愿一切如母有情...
    井田婷婷閱讀 245評論 2 4

友情鏈接更多精彩內(nèi)容