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