Masonry布局九宫格

宝儿姐镇楼图

这个是结合别人代码和自己需求的代码。可以满足日常使用
1、布局代码

//Objective-C ----> Masonry
/**
 多视图布局

 @param viewArray 视图数组
 @param column 列数
 @param tbSpeace 视图上下间距
 @param lrSpeace 视图左右间距
 @param topSpeace 和父视图上间距
 @param lrSuperViewSpeace 父视图左右间距
 @param superView 父视图
 @param viewHeight 视图高度
 */
- (void)wd_masLayoutSubViewsWithViewArray:(NSArray<UIView *> *)viewArray
                              columnOfRow:(NSInteger)column
                    topBottomOfItemSpeace:(CGFloat)tbSpeace
                      leftRightItemSpeace:(CGFloat)lrSpeace
                     topOfSuperViewSpeace:(CGFloat)topSpeace
                 leftRightSuperViewSpeace:(CGFloat)lrSuperViewSpeace
                          addToSubperView:(UIView *)superView
                               viewHeight:(CGFloat)viewHeight{
  
                    CGFloat viewWidth = superView.bounds.size.width;
                    CGFloat itemWidth = (viewWidth - lrSuperViewSpeace * 2 - (column - 1) * lrSpeace) / column * 1.0f;
                    CGFloat itemHeight = viewHeight;
                    UIView *last = nil;
  
                    for (int i = 0; i < viewArray.count; i++) {
                        UIView *item = viewArray[i];
                        [superView addSubview:item];

                        [item mas_makeConstraints:^(MASConstraintMaker *make) {
                            make.width.mas_equalTo(itemWidth);
                            make.height.mas_equalTo(itemHeight);
                          
                            CGFloat top = topSpeace + (i / column) * (itemHeight + tbSpeace);
                            make.top.mas_offset(top);
                            if (!last || (i % column) == 0) {
                                make.left.mas_offset(lrSuperViewSpeace);
                            }else{
                                make.left.mas_equalTo(last.mas_right).mas_offset(lrSpeace);
                            }
                        }];
                      
                        last = item;
                    }
}

//Swift ----> SnapKit
  
  /// 多视图布局
  ///
  /// - Parameters:
  ///   - viewArray: 视图数组
  ///   - columnOfRow: 列数
  ///   - topBottomOfItemSpeace: 视图上下间距
  ///   - leftRightItemSpeace: 视图左右间距
  ///   - topOfSuperViewSpeace: 和父视图上间距
  ///   - leftRightSuperViewSpeace: 父视图左右间距
  ///   - addToSubperView: 父视图
  ///   - viewHeight: 视图高度
  func wd_masLayoutSubViews(viewArray:Array<UIView>,
                            columnOfRow:Int,
                            topBottomOfItemSpeace:CGFloat,
                            leftRightItemSpeace:CGFloat,
                            topOfSuperViewSpeace:CGFloat,
                            leftRightSuperViewSpeace:CGFloat,
                            addToSubperView:UIView,
                            viewHeight:CGFloat) -> Void {
    
    
      let viewWidth = addToSubperView.bounds.width
      let tempW = leftRightSuperViewSpeace * 2 + CGFloat(columnOfRow - 1) * leftRightItemSpeace
      let itemWidth = (viewWidth - tempW) / CGFloat(columnOfRow)
      let itemHeight = viewHeight
    
      print(leftRightSuperViewSpeace,leftRightItemSpeace,itemWidth)
    
      var lastView:UIView?
    
      for (i, _) in viewArray.enumerated() {
      
          let item = viewArray[i]
          addToSubperView.addSubview(item)
      
          item.snp.makeConstraints { (make) in
              make.width.equalTo(itemWidth)
              make.height.equalTo(itemHeight)
              let top = topOfSuperViewSpeace + CGFloat(i / columnOfRow) * (itemHeight + topBottomOfItemSpeace)
              make.top.equalTo(top)
        
              if !(lastView != nil) || i%columnOfRow == 0 {
                  make.left.equalTo(leftRightSuperViewSpeace)
              } else {
                  make.left.equalTo((lastView?.snp.right)!).offset(leftRightItemSpeace)
              }
          
              lastView = item
          }
      }
  }

2、示例代码

//Objective-C ----> Masonry
#define random(r, g, b, a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:(a)/255.0]

#define randomColor random(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256))

NSMutableArray *viewArray = [NSMutableArray array];
  
  UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
  [self.view addSubview:scrollView];
  
  for (int i=0; i<100; i++) {
      UIButton *view = [[UIButton alloc] init];
      view.backgroundColor = randomColor;
      [view setTitle:[NSString stringWithFormat:@"%d",i] forState:UIControlStateNormal];
      [view setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
      [viewArray addObject:view];
  }
  
  [self wd_masLayoutSubViewsWithViewArray:viewArray
                              columnOfRow:3
                    topBottomOfItemSpeace:15
                      leftRightItemSpeace:20
                     topOfSuperViewSpeace:0
                 leftRightSuperViewSpeace:0
                          addToSubperView:scrollView
                               viewHeight:100];
  // 计算scrollView的contentSize
  scrollView.contentSize = CGSizeMake(0, 100+(15+100) * viewArray.count/3);


//Swift ----> SnapKit
    let scrollView = UIScrollView.init(frame: self.view.frame)
    self.view.addSubview(scrollView)
    
    var viewArray = Array<UIView>.init()
    
    for i in 0...100 {
        let button = UIButton.init(type: .custom)
        button.setTitle("\(i)", for: .normal)
        button.setTitleColor(UIColor.black, for: .normal)
        button.backgroundColor = UIColor.init(red: CGFloat(arc4random_uniform(256)) / 255.0,
                                              green: CGFloat(arc4random_uniform(256)) / 255.0,
                                              blue: CGFloat(arc4random_uniform(256)) / 255.0,
                                              alpha: 1)
        viewArray.append(button)
    }
    
    scrollView.contentSize = CGSize(width: 0, height: 100+(15+100) * viewArray.count/3)
    
    wd_masLayoutSubViews(viewArray: viewArray,
                         columnOfRow: 3,
                         topBottomOfItemSpeace: 15,
                         leftRightItemSpeace: 20,
                         topOfSuperViewSpeace: 0,
                         leftRightSuperViewSpeace: 0,
                         addToSubperView: scrollView,
                         viewHeight: 100)

3、效果图

效果图.gif
4、如果需要看Demo的话，地址在这
https://github.com/wudan-ios/Masonry-SnpKit-.git