iOS流布局UICollectionView系列七——三维中的球型布局
iOS流布局UICollectionView系列七——三维中的球型布局
- 发布时间: 2015/10/29 13:25
- 阅读: 1487
- 收藏: 23
- 点赞: 1
- 评论: 5
一、引言
通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑布流布局,再到平面中的圆环布局,我们突破了线性布局的局限,在后面,我们将布局扩展到了空间,在Z轴上进行了平移,我们实现了一个类似UIPickerView的布局模型,其实我们还可以再进一步,类比于平面布局,picKerView只是线性排列布局在空间上的旋转与平移,这次,我们更加充分了利用一下空间的尺寸,来设计一个圆球的布局模型。以下是前几篇博客地址:
1.初识与简单实用UICollectionView:http://my.oschina.net/u/2340880/blog/522613
2.UICollectionView的代理方法:http://my.oschina.net/u/2340880/blog/522682
3.实用FlowLayout进行更灵活布局:http://my.oschina.net/u/2340880/blog/522748
4.自定义FlowLayout进行瀑布流布局:http://my.oschina.net/u/2340880/blog/522806
5.平面圆环布局的实现:http://my.oschina.net/u/2340880/blog/523064
6.将布局从平面应用到空间:http://my.oschina.net/u/2340880/blog/523341
二、将布局扩展为空间球型
在viewController中先实现一些准备代码:
- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.MyLayout * layout = [[MyLayout alloc]init];UICollectionView * collect = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 400) collectionViewLayout:layout];collect.delegate=self;collect.dataSource=self;//这里设置的偏移量是为了无缝进行循环的滚动,具体在上一篇博客中有解释collect.contentOffset = CGPointMake(320, 400);[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];[self.view addSubview:collect];
}-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{return 1;
}
//我们返回30的标签
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{return 30;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];label.text = [NSString stringWithFormat:@"%ld",(long)indexPath.row];[cell.contentView addSubview:label];return cell;
}- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.
}
//这里对滑动的contentOffset进行监控,实现循环滚动
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{if (scrollView.contentOffset.y<200) {scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x, scrollView.contentOffset.y+10*400);}else if(scrollView.contentOffset.y>11*400){scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x, scrollView.contentOffset.y-10*400);}if (scrollView.contentOffset.x<160) {scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x+10*320,scrollView.contentOffset.y);}else if(scrollView.contentOffset.x>11*320){scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x-10*320,scrollView.contentOffset.y);}
}
这里面的代码比较上一篇博客中的并没有什么大的改动,只是做了横坐标的兼容。
在我们的layout类中,将代码修改成如下:
-(void)prepareLayout{[super prepareLayout];}
//返回的滚动范围增加了对x轴的兼容
-(CGSize)collectionViewContentSize{return CGSizeMake( self.collectionView.frame.size.width*([self.collectionView numberOfItemsInSection:0]+2), self.collectionView.frame.size.height*([self.collectionView numberOfItemsInSection:0]+2));
}
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{return YES;
}-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{UICollectionViewLayoutAttributes * atti = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];//获取item的个数int itemCounts = (int)[self.collectionView numberOfItemsInSection:0];atti.center = CGPointMake(self.collectionView.frame.size.width/2+self.collectionView.contentOffset.x, self.collectionView.frame.size.height/2+self.collectionView.contentOffset.y);atti.size = CGSizeMake(30, 30);CATransform3D trans3D = CATransform3DIdentity;trans3D.m34 = -1/900.0;CGFloat radius = 15/tanf(M_PI*2/itemCounts/2);//根据偏移量 改变角度//添加了一个x的偏移量float offsety = self.collectionView.contentOffset.y;float offsetx = self.collectionView.contentOffset.x;//分别计算偏移的角度float angleOffsety = offsety/self.collectionView.frame.size.height;float angleOffsetx = offsetx/self.collectionView.frame.size.width;CGFloat angle1 = (float)(indexPath.row+angleOffsety-1)/itemCounts*M_PI*2;//x,y的默认方向相反CGFloat angle2 = (float)(indexPath.row-angleOffsetx-1)/itemCounts*M_PI*2;//这里我们进行四个方向的排列if (indexPath.row%4==1) {trans3D = CATransform3DRotate(trans3D, angle1, 1.0,0, 0);}else if(indexPath.row%4==2){trans3D = CATransform3DRotate(trans3D, angle2, 0, 1, 0);}else if(indexPath.row%4==3){trans3D = CATransform3DRotate(trans3D, angle1, 0.5,0.5, 0);}else{trans3D = CATransform3DRotate(trans3D, angle1, 0.5,-0.5,0);}trans3D = CATransform3DTranslate(trans3D, 0, 0, radius);atti.transform3D = trans3D;return atti;
}-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{NSMutableArray * attributes = [[NSMutableArray alloc]init];//遍历设置每个item的布局属性for (int i=0; i<[self.collectionView numberOfItemsInSection:0]; i++) {[attributes addObject:[self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]]];}return attributes;
}
布局效果如下:
滑动屏幕,这个圆球是可以进行滚动的。
TIP:这里我们只平均分配了四个方向上的布局,如果item更加小也更加多,我们可以分配到更多的方向上,使球体更加充实。
iOS流布局UICollectionView系列七——三维中的球型布局相关推荐
- iOS流布局之UICollectionView简单应用
iOS流布局UICollectionView系列一--初识与简单使用UICollectionView 一.简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITable ...
- ONNX系列七 --- 在Python中使用可移植的ONNX AI模型
目录 安装和导入ONNX运行时 载入ONNX模型 使用ONNX运行时进行预测 摘要和后续步骤 参考文献 下载源547.1 KB 系列文章列表如下: ONNX系列一 --- 带有ONNX的便携式神经网络 ...
- 图层几何学 -- iOS Core Animation 系列二
<图层树和寄宿图 -- iOS Core Animation 系列一>介绍了图层的基础知识和一些属性方法.这篇主要内容是学习下图层在父图层上怎么控制位置和尺寸的. 1.布局 首先看一张例图 ...
- Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager)
Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager) 本篇主要讲解iOS开发中的网络监控 前言 在开发中,有时候我们需要获取这些信息: 手机是否联网 ...
- iOS性能优化系列篇之“列表流畅度优化”工具篇
这一篇文章是iOS性能优化系列文章的的第二篇,主要内容是关于列表流畅度的优化.在具体内容的阐述过程中会结合性能优化的总体原则进行分析,所以建议大家在阅读这篇文章前先阅读一下上一篇文章:iOS性能优化系 ...
- 1小时学会:最简单的iOS直播推流(七)h264/aac 硬编码
最简单的iOS 推流代码,视频捕获,软编码(faac,x264),硬编码(aac,h264),美颜,flv编码,rtmp协议,陆续更新代码解析,你想学的知识这里都有,愿意懂直播技术的同学快来看!! 源 ...
- iOS 视频捕获系列Swift之AVFoundation(一)
iOS 视频捕获系列之AVFoundation(一) AVCaptureMovieFileOutput系列 在iOS开发过程中,或多或少的都涉及视频的操作. 尤其在去年直播行业的带动下,移动端对视频的 ...
- Web前端开发人员和设计师必读文章推荐【系列七】
这篇文章主要收录了十二月份发布在梦想天空的优秀文章,特别推荐给Web开发人员和设计师阅读.梦天空博客关注前端开发技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐 ...
- Docker系列 七. Docker 安装Jenkins
Docker系列 七. Docker 安装Jenkins Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集 ...
最新文章
- 优秀开发者和差的开发者之间区别
- react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
- [bzoj2301][HAOI2011]Problem b
- is null和is not null运算符
- 下载文件旁边附的MD5/SHA256等有什么用途?
- “QMYSQL: Unable to allocate a MYSQL object“ 解决方法
- 信息抽取--关键词提取
- C++远航之封装篇——数据的封装
- 【openMV】OpenMV4基础知识
- H5炫酷特效系列1——canvas满屏幕变换爱心示例
- linux进程闭锁,4. ps 进程查看器
- dp线和hdmi区别_各类视频线有什么区别?应该怎么选呢?
- 米莱狄机器人怎么那么多_王者荣耀米莱狄攻略,团战技能好了就丢,操作最简单上分法师...
- java 各组件单击总数_java 获取面板上有多少个组件
- 【火炉炼AI】深度学习008-Keras解决多分类问题
- 教你如何把书本上的字快速弄到电脑上
- Bootable USB Stick
- Android 房贷计算
- 用Python摘抄《大道争锋》中的诗句
- Mac查看本地ip地址