iOS:自定义collectionView解决各种复杂布局

2017-01-14 10:22:48来源:http://www.jianshu.com/p/ddfc5803ccbc作者:风御轩人点击

第七城市

前言:此篇既不讲关于collectionView的基础概念以及基本用法,也不堆叠过多代码,只是浅谈一下个人的一些见解与实际应用中的分析,抛砖引玉。


案例一

团购首页.png

如上图所示,这类布局非常常见,普遍的做法都是在底层创建scrollView,然后在上面循环创建自定义视图的button,最后再添加点击事件。


不过我在做这个布局的时候,感觉循环创建思路固然简单,但是由于实际需要,图片与文字都是后台获取的,实际写起来却是很复杂。于是想到了collectionView,这布局看着跟九宫格布局很相似,唯一的区别也就是左滑翻页了。


于是我就做了相应的尝试:


1.创建scrollView


UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 200)];    
scrollView.delegate = self;
//设置scrollView的滚动大小
scrollView.contentSize = CGSizeMake(2*SCREEN_WIDTH, 200);
scrollView.pagingEnabled = YES;
scrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:scrollView];

2.在scrollView上添加collectionView


_collectionView = [self collectionViewWithFrame:CGRectMake(0,0, 2*SCREEN_WIDTH, 200) layout:[self setLayoutWithItemSize:CGSizeMake(2*SCREEN_WIDTH/8, 80)]];
[scrollView addSubview:_collectionView];

3.在母视图上创建并添加pageControl


_pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(SCREEN_WIDTH/2-20, 170, 0, 20)];   
_pageControl.currentPage = 0;
_pageControl.numberOfPages = 2;
_pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
_pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
[self.view addSubview:_pageControl];

这样就大功告成了。至于scrollView添加与否看具体情况,如果一个页面只有一个collectionView视图,那就可以去掉scrollView,而设置collectionView的layout属性的scrollDirection为水平方向滚动,然后应该可以达到同样的效果。


案例二


首页.png

这个布局看似很简单,一眼望去,那就是个tableView,顶部轮播位于tableHeaderView, 然后每个小标题即是tableView的sectionHeaderView,最后再自定义相应的cell视图即可。


但是写的时候你就会发现,积分专区与团购专区里面的视图又需要循环创建四个imageView,再加上各自的点击事件,写完之后感觉很凌乱,代码逻辑甚是啰嗦,于是,我在这里再次使用了万能的collectionView来作为解决方案。


这里就简单介绍一下我的思路:
1.创建tableView, 然后返回2个分区,
第一分区包括积分专区与团购专区,
第二个分区包括为你推荐标签及以下部分,
轮播图依旧是tableHeaderView;


2.创建collectionView,然后返回2个分区,
第一个分区包括积分专区,
第二个分区包括团购专区,
然后将collectionView添加到tableView的第一个分区内;


3.最后自定义tableViewCell来完成为你推荐的布局即可完成整体布局。


案例三


新版布局.png

这布局从才艺访开始是可以无限加载的瀑布流,这里再借用案例二的解决方案显然不合适,collectionView属于无限加载类型,嵌入tableViewCell之后,高度问题很难解决,又需要自适应高度,非常损耗性能,高度固定又满足不了需求。


所以上图的布局,我彻底抛弃tableView,只采用collectionView来完成,结构清晰简单,又不涉及高度问题,至于思路经过以上两种方案之后,相信大家都很清楚:


才艺访及以上部分全部添加到collectionView的头部视图内,然后下半部分就是collectionView的主体部分。


具体思路就是以上这些,相信熟练掌握collectionView之后,各种复杂布局都可以迎刃而解,至于上面案例涉及到的具体代码就请移步至我的github仓库进行查看。


感慨:2016即将年终,谨以此系列文章致我即将逝去的Objective-C,明年就会是我的Swift展望新世界了。




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台