快捷導(dǎo)航

iOS實(shí)現(xiàn)九宮格自動(dòng)生成視圖

更新時(shí)間：2019年03月24日 15:43:41 作者：燃燒的鑰匙

這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)九宮格自動(dòng)生成視圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在移動(dòng)開發(fā)里有相當(dāng)多的時(shí)候需要使控件呈現(xiàn)九宮格格式的分布，最常見的如

圖案解鎖界面：

相冊管理界面：

單獨(dú)創(chuàng)建一個(gè)這樣界面的步驟相當(dāng)繁瑣，要?jiǎng)?chuàng)建父視圖用于控制每一個(gè)單獨(dú)的控件，而控件添加的時(shí)候還要判斷每一格的位置，而且代碼復(fù)用性不高，因?yàn)槊恳环N九宮格視圖的控件邊距，控件的寬高不同。

所以，是否可以寫一個(gè)這樣的模塊，只需要提供一個(gè)子控件的frame就能夠生成一個(gè)完整的九宮格視圖呢？

以下是我的思路：

首先肯定是用一個(gè)類來管理整個(gè)模塊的，所以創(chuàng)建一個(gè)UISodokuView類繼承于UIScrollView：
——為什么是scollView？
——因?yàn)楫?dāng)需要添加的控件數(shù)量較大時(shí)，顯然會(huì)超出手機(jī)屏幕范圍，只有用scrollView才能完全顯示，也就是說，只要用戶提供了單個(gè)控件的frame、控件數(shù)量以及每一行控件的個(gè)數(shù)，就能夠確定UIScrollView的contentSize大小，從而添加。

UISodokuView類

.h文件

@interface UISodokuView : UIScrollView
//基礎(chǔ)控件的frame
@property(nonatomic,assign)CGRect itemFrame;
//要添加的控件數(shù)量
@property(nonatomic,assign)NSInteger itemsNumber;
//每一行控件數(shù)量
@property(nonatomic,assign)NSInteger itemsNumberInOneLine;
//存儲(chǔ)控件的array
@property(nonatomic,strong)NSMutableArray *itemsArray;
//scrollView寬度
@property(nonatomic,assign)NSInteger scrollViewWidth;
//scrollView高度
@property(nonatomic,assign)NSInteger scrollViewHeight;

//初始化，但并沒有添加控件
-(instancetype)initWithItemFrame:(CGRect)frame andItemsNumber:(NSInteger)itemsNumber andItemsNumberInOneLine:(NSInteger)itemsInOneLine;

這里我添加到scrollView上面每一個(gè)控件是一個(gè)默認(rèn)背景為白色的UIView對象，并存儲(chǔ)到itemsArray里面，用戶想讓每一個(gè)控件顯示什么可以通過獲取數(shù)組對象進(jìn)行再添加。

.m文件

@implementation UISodokuView

-(instancetype)initWithItemFrame:(CGRect)frame andItemsNumber:(NSInteger)itemsNumber andItemsNumberInOneLine:(NSInteger)itemsInOneLine{
 self = [super init];
 if (self) {
 //初始化
 _itemsArray = [NSMutableArray array];
 _itemFrame = frame;
 _itemsNumber = itemsNumber;
 _itemsNumberInOneLine = itemsInOneLine;
 self.frame = CGRectZero;
 }
 [self layoutModule];
 return self;
}

-(void)layoutModule{
 //獲取item寬高和橫向縱向間距
 NSInteger itemWidthGap = _itemFrame.origin.x;
 NSInteger itemHeightGap = _itemFrame.origin.y;
 NSInteger width = _itemFrame.size.width;
 NSInteger height = _itemFrame.size.height;
 
 //容器寬度
 _scrollViewWidth = itemWidthGap * (_itemsNumberInOneLine + 1) + width * _itemsNumberInOneLine;
 
 //總行數(shù)
 NSInteger numberOfLines = 0;
 if (_itemsNumber%_itemsNumberInOneLine == 0) {
 numberOfLines = _itemsNumber/_itemsNumberInOneLine;
 }else{
 numberOfLines = _itemsNumber/_itemsNumberInOneLine + 1;
 }
 _scrollViewHeight = itemHeightGap*(numberOfLines + 1) + height*numberOfLines - 2;
 
 //確定scrollView的frame，默認(rèn)y軸邊距200
 self.frame = CGRectMake(0, 200, _scrollViewWidth,height + itemHeightGap*2);
 self.contentSize = CGSizeMake(_scrollViewWidth, _scrollViewHeight);
 self.scrollEnabled = YES;
 self.backgroundColor = [UIColor lightGrayColor];
 
 //創(chuàng)建并添加控件
 NSInteger line = 1;
 NSInteger row = 1;
 
 for (int i = 1;i <= _itemsNumber ; i++) {
 UIView *item = [[UIView alloc] initWithFrame:_itemFrame];
 item.backgroundColor = [UIColor whiteColor];
 [_itemsArray addObject:item];
 [self addSubview:item];
 //判斷處于第幾行
 line = i/_itemsNumberInOneLine + 1;
 //判斷處于第幾列
 row = i % _itemsNumberInOneLine;
 if (row == 0) {
 row = _itemsNumberInOneLine;
 line -= 1;
 }
 item.frame = CGRectMake(row*itemWidthGap + (row-1)*width, line*itemHeightGap + (line-1)*height, width, height);
 }
}

這里有些數(shù)據(jù)是默認(rèn)的：

——scrollView的可視范圍：寬度由控件frame確定，高度默認(rèn)顯示一行控件，可滾動(dòng)，
——scrollView位置默認(rèn)左邊距為0，上邊距為200；

這些都可由用戶根據(jù)自己情況作更改，所以相當(dāng)方便。

一下是一個(gè)使用例子：

UISodokuView * sv = [[UISodokuView alloc] initWithItemFrame:CGRectMake(10, 10, 100, 120) andItemsNumber:10 andItemsNumberInOneLine:3];
 [self.view addSubview:sv];