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:初學(xué)乍練,實現(xiàn)?以下效果:

在上一個基礎(chǔ)之上添加一個子view略小于其superView(邊距為10).png
在上一個基礎(chǔ)之上添加一個子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笨奠，寬度自適應(yīng)翎嫡，高度與灰色view平分整個界面(不包含頭部的標(biāo)題和按鈕所占高度).灰色view寬度為黑色view的一半（即左邊以中線起始），右绢慢、下邊距與黑色view相同婴梧，高度與黑色view相同).png
黑,灰倆個view.黑色view的左矗积、右邊距為20蔓倍，上邊距為80, 下邊距灰色view 20悬钳，寬度自適應(yīng)，高度與灰色view平分整個界面(不包含頭部的標(biāo)題和按鈕所占高度).灰色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)以下效果:


綠,紅,藍(lán)三個view.綠色view的上邊距為80聚谁、左邊距為20,右邊距self.view的X中線為10. 紅色view的上邊距80母剥、右邊距為 20,左邊距綠色view 20. 綠、紅寬度自適應(yīng). 藍(lán)色view的上邊距綠形导、紅view為 20, 左环疼、右、下邊距為20朵耕，高度與綠, 紅view相同.png

綠,紅,藍(lán)三個view.綠色view的上邊距為80炫隶、左邊距為20,右邊距self.view的X中線為10. 紅色view的上邊距80、右邊距為 20,左邊距綠色view 20. 綠憔披、紅寬度自適應(yīng). 藍(lán)色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. 當(dāng)鍵盤擋住輸入框時形娇，輸入框自動向上彈到鍵盤上方锰霜。.png

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

代碼實現(xiàn):

//這里我把距離bottom的距離設(shè)定了定值了在橫屏鍵盤消失的時候會回到屏幕上方,
//這里讓大家理解更新約束的用法.
- (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)約束和高度自適應(yīng).png

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

代碼實現(xiàn):

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

10:得心應(yīng)手,實現(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為下次約束的基準(zhǔn)
    lastView = view;
   
  }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市陶衅，隨后出現(xiàn)的幾起案子屡立，更是在濱河造成了極大的恐慌，老刑警劉巖搀军，帶你破解...
    沈念sama閱讀 216,372評論 6贊 498
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件膨俐，死亡現(xiàn)場離奇詭異勇皇，居然都是意外死亡，警方通過查閱死者的電腦和手機焚刺，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門敛摘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人乳愉，你說我怎么就攤上這事兄淫。” “怎么了蔓姚？”我有些...
    開封第一講書人閱讀 162,415評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵捕虽，是天一觀的道長。 經(jīng)常有香客問我赂乐，道長薯鳍，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,157評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任挨措，我火速辦了婚禮挖滤，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘浅役。我一直安慰自己斩松，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,171評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布觉既。 她就那樣靜靜地躺著惧盹，像睡著了一般。 火紅的嫁衣襯著肌膚如雪瞪讼。 梳的紋絲不亂的頭發(fā)上钧椰，一...
    開封第一講書人閱讀 51,125評論 1贊 297
  • 城市分裂傳說
    那天，我揣著相機與錄音符欠，去河邊找鬼嫡霞。 笑死，一個胖子當(dāng)著我的面吹牛希柿，可吹牛的內(nèi)容都是我干的诊沪。 我是一名探鬼主播，決...
    沈念sama閱讀 40,028評論 3贊 417
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼曾撤，長吁一口氣：“原來是場噩夢啊……” “哼端姚！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起挤悉，我...
    開封第一講書人閱讀 38,887評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤渐裸，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體橄仆，經(jīng)...
    沈念sama閱讀 45,310評論 1贊 310
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡剩膘，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了盆顾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片怠褐。...
    茶點故事閱讀 39,690評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖您宪，靈堂內(nèi)的尸體忽然破棺而出奈懒，到底是詐尸還是另有隱情，我是刑警寧澤宪巨，帶...
    沈念sama閱讀 35,411評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布磷杏，位于F島的核電站，受9級特大地震影響捏卓，放射性物質(zhì)發(fā)生泄漏极祸。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一怠晴、第九天 我趴在偏房一處隱蔽的房頂上張望遥金。 院中可真熱鬧，春花似錦蒜田、人聲如沸稿械。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0贊 22
  • 一樁弒父案冲粤，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽美莫。三九已至，卻和暖如春梯捕，著一層夾襖步出監(jiān)牢的瞬間厢呵，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1贊 268
  • 情欲美人皮
    我被黑心中介騙來泰國打工傀顾， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留述吸，地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2贊 368
  • 代替公主和親
    正文 我出身青樓锣笨，卻偏偏與公主長得像，于是被迫代替她去往敵國和親道批。 傳聞我的和親對象是個殘疾皇子错英，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2贊 353

推薦閱讀更多精彩內(nèi)容

  • # 一、框架概述 # 課程概述 1. laravel 4天（之前TP框架還是很大的區(qū)別）（國外框架） 2. 在線教...
    關(guān)進一閱讀 371評論 0贊 0
  • iOS布局有很多種方法隆豹，有原始的Frame布局椭岩，通過計算每一個控件的高度/寬度，來定義每一個控件的位置，簡單的只有...
    敲代碼的樹懶閱讀 1,168評論 0贊 3
  • 本章節(jié)主要介紹jenkins的使用 在前一章節(jié)中已經(jīng)介紹可jenkins安裝步驟判哥，不了解的可以參考前文：[jenk...
    haishuiaa閱讀 3,241評論 0贊 3
  • 一献雅、關(guān)于MySQL MySQL（Structured Query Language）是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，在...
    eRosicky閱讀 530評論 0贊 0
  • 【育兒】文集已建起，歡迎點擊查閱锌仅、關(guān)注章钾、互動交流！ 傾聽學(xué)生的感受和需求热芹〖總結(jié)他們的觀點。表達自己的感受和需求伊脓。邀...
    小塵老師閱讀 1,128評論 16贊 62