iOS實(shí)現(xiàn)九宮格自動生成視圖
在移動開發(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í),顯然會超出手機(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; //存儲控件的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對象,并存儲到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)顯示一行控件,可滾動,
——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];
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Xcode 8構(gòu)建版本iTunes Connect獲取不到應(yīng)用程序狀態(tài)的辦法
這篇文章主要介紹了關(guān)于解決Xcode 8構(gòu)建版本iTunes Connect獲取不到應(yīng)用程序狀態(tài)的辦法,需要的朋友可以參考下2017-03-03iOS適配https證書問題(AFNetworking3.0為例)
本篇文章主要介紹了iOS適配https問題(AFNetworking3.0為例)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02iOS中定位當(dāng)前位置坐標(biāo)及轉(zhuǎn)換為火星坐標(biāo)的方法
這篇文章主要介紹了iOS中獲取當(dāng)前位置坐標(biāo)及轉(zhuǎn)換為火星坐標(biāo)的方法,這里的火星坐標(biāo)指的是我國專門研制的一種加密的坐標(biāo)系統(tǒng)...需要的朋友可以參考下2016-02-02快速解決低版本Xcode不支持高版本iOS真機(jī)調(diào)試的問題方法
這篇文章主要介紹了快速解決低版本Xcode不支持高版本iOS真機(jī)調(diào)試的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02