iOS流布局UICollectionView系列五——圆环布局的实现

简介:

iOS流布局UICollectionView系列五——圆环布局的实现

一、引言

        前边的几篇博客,我们了解了UICollectionView的基本用法以及一些扩展,在不定高的瀑布流布局中,我们发现,可以通过设置具体的布局属性类UICollectionViewLayoutAttributes来设置设置每个item的具体位置,我们可以再扩展一下,如果位置我们可以自由控制,那个布局我们也可以更加灵活,就比如创建一个如下的circleLayout:

这种布局方式在apple的官方文档中也有介绍,是UICollectionView的一个应用示例。

二、设计一个圆环布局

        接着我们以前的想法,依然时候随机颜色的色块来表达我们的item,先自定义一个layout类,这个类继承于UICollectionViewLayout,UICollectionLayout是一个布局抽象基类,我们要使用自定义的布局方式,必须将其子类化,可能你还记得,我们在进行瀑布流布局的时候使用过UICollectionViewFlowLayout类,这个类就是继承于UICollectionViewLayout类,系统为我们实现好的一个布局方案。

?
1
2
3
4
@interface MyLayout : UICollectionViewLayout
//这个int值存储有多少个item
@property(nonatomic,assign) int  itemCount;
@end

我们需要重写这个类的三个方法,来进行圆环布局的设置,首先是prepareLayout,为布局做一些准备工作,使用collectionViewContentSize来设置内容的区域大小,最后使用layoutAttributesForElementsInRect方法来返回我们的布局信息字典,这个前面瀑布流布局的思路是一样的:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@implementation MyLayout
{
     NSMutableArray * _attributeAttay;
}
-( void )prepareLayout{
     [super prepareLayout];
     //获取item的个数
     _itemCount = ( int )[self.collectionView numberOfItemsInSection:0];
     _attributeAttay = [[NSMutableArray alloc]init];
     //先设定大圆的半径 取长和宽最短的
     CGFloat radius = MIN(self.collectionView.frame.size.width, self.collectionView.frame.size.height)/2;
     //计算圆心位置
     CGPoint center = CGPointMake(self.collectionView.frame.size.width/2, self.collectionView.frame.size.height/2);
     //设置每个item的大小为50*50 则半径为25
     for  ( int  i=0; i<_itemCount; i++) {
         UICollectionViewLayoutAttributes * attris = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
         //设置item大小
         attris.size = CGSizeMake(50, 50);
         //计算每个item的圆心位置
         /*
          .
          . .
          .   . r
          .     .
          .........
          */
         //计算每个item中心的坐标
         //算出的x y值还要减去item自身的半径大小
         float  x = center.x+cosf(2*M_PI/_itemCount*i)*(radius-25);
         float  y = center.y+sinf(2*M_PI/_itemCount*i)*(radius-25);
      
         attris.center = CGPointMake(x, y);
         [_attributeAttay addObject:attris];
     }
     
    
     
}
//设置内容区域的大小
-(CGSize)collectionViewContentSize{
     return  self.collectionView.frame.size;
}
//返回设置数组
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
     return  _attributeAttay;
}

在viewController中代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
- ( 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 registerClass:[UICollectionViewCell  class ] forCellWithReuseIdentifier:@ "cellid" ];
     [self.view addSubview:collect];
}
 
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
     return  1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
     return  10;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
     UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@ "cellid"  forIndexPath:indexPath];
     cell.layer.masksToBounds = YES;
     cell.layer.cornerRadius = 25;
     cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
     return  cell;
}

如上非常简单的一些逻辑控制,我们就实现哦圆环布局,随着item的多少,布局会自动调整,如果不是UICollectionView的功劳,实现这样的功能,我们可能要写上一阵子了^_^。


目录
相关文章
|
3月前
|
安全 iOS开发
iOS页面布局:UIScrollView的布局问题
iOS页面布局:UIScrollView的布局问题
70 8
|
Swift iOS开发
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
|
iOS开发
iOS布局中的抗被拉伸、抗压缩优先级
iOS布局中的抗被拉伸、抗压缩优先级
702 0
|
iOS开发
IOS15上纯代码布局之导航控制器的导航条为透明的问题
IOS15上纯代码布局之导航控制器的导航条为透明的问题
229 0
|
Java iOS开发
IOS学习笔记十三(使用类别实现非正式协议)
IOS学习笔记十三(使用类别实现非正式协议)
127 0
|
20天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
7天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
11天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
13天前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。
|
16天前
|
安全 IDE Swift
探索iOS开发之旅:从初学者到专家
在这篇文章中,我们将一起踏上iOS开发的旅程,从基础概念的理解到深入掌握核心技术。无论你是编程新手还是希望提升技能的开发者,这里都有你需要的指南和启示。我们将通过实际案例和代码示例,展示如何构建一个功能齐全的iOS应用。准备好了吗?让我们一起开始吧!