ios九宫格布局

作者: coderhlt | 来源:发表于2017-06-26 11:48 被阅读64次

    一、按钮实现

    • 确定所需的一列item的最大个数
      static NSInteger const corlmax = 4;
    • 确定item之间的间距
      static CGFloat const margin = 20;
    • 计算item的宽度
      [UIScreen mainScreen].bounds.size.width-(corlmax - 1) * margin) / corlmax
    • 循环创建按钮,根据按钮将要分布所在的行和所在的列确定x,y
      int row=i/corlmax;//所在行
      int col=i%corlmax;//所在列
      CGFloat x= (itemWH+margin)col;
      CGFloat y =(itemWH+margin)
      row;
      按钮的总行数: Rows = (count - 1) / cols + 1
      按钮的总宽度:width=总列数一个宽度+(总列数-1)间距
      按钮的总高度:height=总行数一个宽度+(总行数-1)间距
    #import "ViewController.h"
    static NSInteger const corlmax = 4;
    static CGFloat const margin = 20;
    #define itemWH ([UIScreen mainScreen].bounds.size.width-(corlmax - 1) * margin) / corlmax
    @interface ViewController ()
    @end
    @implementation ViewController
    - (void)viewDidLoad {
        [super viewDidLoad];
        for (int i = 0; i < 10; i++) {
            int row=i/corlmax;//所在行
            int col=i%corlmax;//所在列
            //创建按钮
            UIButton *btn= [UIButton buttonWithType:UIButtonTypeCustom];
            btn.backgroundColor=[UIColor redColor];
            CGFloat x= (itemWH+margin)*col;
            CGFloat y =(itemWH+margin)*row;
            btn.frame=CGRectMake(x, y, itemWH,  itemWH);
            [self.view addSubview:btn];
        }
    }
    

    二、UICollectionview实现

    #import "ViewController.h"
    static NSInteger const cols = 4;
    static CGFloat const margin = 10;
    #define itemWH ([UIScreen mainScreen].bounds.size.width - 20-(cols - 1) * margin) / cols
    static NSString * const ID = @"cell";
    @interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
    @property (nonatomic, weak) UICollectionView *collectionView;
    @end
    @implementation ViewController
    - (void)viewDidLoad {
        [super viewDidLoad];
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        // 设置item尺寸
        layout.itemSize = CGSizeMake(itemWH, itemWH);
        layout.minimumInteritemSpacing = margin;
        layout.minimumLineSpacing = margin;
        // 创建UICollectionView
        UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 375, 667) collectionViewLayout:layout];
        [self.view addSubview:collectionView];
        collectionView.backgroundColor=[UIColor whiteColor];
        _collectionView = collectionView;
        collectionView.dataSource = self;
        collectionView.delegate=self;
        collectionView.scrollEnabled = NO;
        [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
    }
    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
    {
        return 20;
    }
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        // 从缓存池取
     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
        cell.backgroundColor=[UIColor redColor];
        return cell;
    }
    

    三、补充:根据item的个数动态确定collectionview高度

          collectionView高度 = rows * itemWH
    
         1.确定item的个数
          NSInteger count = _squareItems.count;
    
         2.获得collectionview的总行数
          NSInteger rows = (count - 1) / cols + 1;
            // Rows = (count - 1) / cols + 1,collectionview万能公式计算总行数
      
          3.// 设置collectioView高度
           self.collectionView.frame=CGRectMake(0, 0, 375, rows*itemWH);
            ```

    相关文章

      网友评论

        本文标题:ios九宫格布局

        本文链接:https://www.haomeiwen.com/subject/rfbdcxtx.html