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