iOS 自定义九宫格，行、列可变

项目开发中，难免会遇到类似于九宫格这样的布局。很多元素均匀排列，对于一页展示不完的用滚动视图展示。这种一般用于有几大功能模块，或者电子商务方面商品展示。实现方式有多种，但各有局限性。下面就我知道的做一下简单总结，如有更好的意见，希望能家一起交流，学习！

1、当视图所需滚动方向是上下滚动时，可利用UITabelView,在其cell上添加自定义元素实现。（优点：利用这种方式，不用担心每个自定义 cell会因为屏幕大小的不同而产生缩放比例不协调导致视图变形 ，因为在不同的手机型号上，UITabelView自己有对cell的显示进行处理，大屏幕相应放大，小屏幕相应缩小；缺点：由于系统的UITabelView是默认支持上下滚动的，所以所得九宫格视图只支持上下滚动）。

2、使用UICollectionView实现九宫格视图，

3、完全自定义视图（优点：可完全按照自身想法进行布局等；缺点：在匹配各机型屏幕上会比较繁琐）；

下面将自定义布局部分的代码附上，希望大家多多指点！

#import "SquaresView.h"

#define DEVICE_WIDTH    [UIScreen mainScreen].bounds.size.width

#define DEVICE_HEIGHT   [UIScreen mainScreen].bounds.size.height

#define ITEMS_X 3

#define ITEMS_Y 4

#define GAP_LEFT     30

#define GAP_TOP      10

#define CELL_WIDTH   self.frame.size.width*1.0/ITEMS_Y-2*GAP_LEFT

#define CELL_HEIGHT  (self.frame.size.height*1.0/ITEMS_X-2*GAP_TOP)

@interface SquaresView()<UIScrollViewDelegate>

@property (nonatomic,strong)UIPageControl *pageControl;

@end

@implementation SquaresView

{

    

   UIScrollView *squareContent;

   NSInteger number;

   NSInteger pages;

   NSInteger currentPage;

   NSInteger currentRow;

}

-(id)init{

    

   self = [superinit];

   if (self) {

       squareContent = [[UIScrollViewalloc]init];

       squareContent.scrollEnabled =YES;

       squareContent.delegate =self;

        // 设置整页滚动

       squareContent.pagingEnabled =YES;

       squareContent.bounces =NO;

        squareContent.showsHorizontalScrollIndicator =NO;

        [selfaddSubview:squareContent];

       number = 0;

       currentPage = 0;

       currentRow = 0;

    }

    return self;

    

}

- (void)drawRect:(CGRect)rect {

   

    [selfreloadData];

    //创建UIPageControl对象

   UIPageControl *pageControl = [[UIPageControlalloc]init];

   self.pageControl = pageControl;

    pageControl.frame =CGRectMake(0,self.frame.size.height+20,DEVICE_WIDTH, 30);

    //配置pageControl

    pageControl.numberOfPages =pages;

    pageControl.pageIndicatorTintColor = [UIColorlightGrayColor];

    pageControl.currentPageIndicatorTintColor = [UIColorblackColor];

    //将页面控制器视图添加到self.View中

    [selfaddSubview:pageControl];

    

}

-(void)reloadData{

    

    //设置九宫格内容视图frame

    squareContent.frame =CGRectMake(0,0, self.frame.size.width,self.frame.size.height);

    number = [self.squareVGieDatasourcenumberOfCells];

   NSInteger items = ITEMS_X*ITEMS_Y;

    //确定有多少页

   if (number<=items) {

       pages = 1;

    }else{

        

       if (number%items!=0){

            

           pages = number/items+1;

        }else{

            

           pages = number/items;

        }

    }

    squareContent.contentSize =CGSizeMake(ITEMS_Y*pages*(CELL_WIDTH+2*GAP_LEFT),ITEMS_X*(CELL_HEIGHT+2*GAP_TOP));

    

    //确定每个cell的frame

    NSMutableArray *frameArray = [[NSMutableArrayalloc]init];

   for (int i =0; i < number; i++) {

        

        //cell个数确定行列数

       NSInteger row = 0;

       NSInteger low = 0;

        //确定当前cell所在页面以判断所在列数和行数

       currentPage = i/items;

        row = (i-currentPage*items)/ITEMS_Y;

        low = i%ITEMS_Y+ITEMS_Y*currentPage;

        CGRect frame =CGRectMake(GAP_LEFT+low*(CELL_WIDTH+2*GAP_LEFT),GAP_TOP+row*(CELL_HEIGHT+2*GAP_TOP),CELL_WIDTH, CELL_HEIGHT);

        [frameArrayaddObject:[NSValuevalueWithCGRect:frame]];

    }

    //创建cell

   NSInteger counter = 0;

   for (NSValue *valuein frameArray) {

        

       CGRect frame = [value CGRectValue];

       SquareCell *squareCell = [self.squareVGieDatasourcecellForIndex:counter squareView:self];

        squareCell.itemBtn.tag = counter;

        squareCell.squareView =self;

        [squareCellsetFrame:frame];

        [squareContentaddSubview:squareCell];

        counter++;

    }

}

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

    

    //确定当前所在页面的下标

   CGPoint p = scrollView.contentOffset;

    NSUInteger index = p.x/self.frame.size.width;

   self.pageControl.currentPage = index;

    

}

@end