iOS6新特征：UICollectionView高级使用示例之CircleLayout

DEMO

下面再看看Demo运行的效果图，通过这样的一个Demo，我们可以看出，使用UICollectionView可以很方便的制作出照片浏览等应用。并且需要开发者写的代码也不多。

程序刚刚启动时，已经默认加载了20个cell

当点击程序的非cell位置，程序会自动的添加图片到UICollectionView中

当点击UICollectionView中的某个cell，则该cell从UICollectionView中移除

下面我也把相关的代码贴出来，代码文件的目录如下图所示


AppDelegate介绍
在AppDelegate的方法didFinishLaunchingWithOptions中，创建一个ViewController，注意：此处的ViewController是继承自UICollectionViewController，在此需要给ViewController传递一个Layout，此处传递了CircleLayout的一个对象实例。这是layout对象是与collection view相关的，layout控制了collection view如何显示它里面的cells和supplementary views。如下面这行关键的代码

[csharp] view plaincopy

  1. 1       self.viewController = [[ViewController alloc] initWithCollectionViewLayout:[[CircleLayout alloc] init]];

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.h
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import <UIKit/UIKit.h>
  10. 10
  11. 11  @class ViewController;
  12. 12
  13. 13  @interface AppDelegate : UIResponder <UIApplicationDelegate>
  14. 14
  15. 15  @property (strong, nonatomic) UIWindow *window;
  16. 16
  17. 17  @property (strong, nonatomic) ViewController *viewController;
  18. 18
  19. 19  @end

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.m
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import "AppDelegate.h"
  10. 10
  11. 11  #import "ViewController.h"
  12. 12  #import "CircleLayout.h"
  13. 13
  14. 14  @implementation AppDelegate
  15. 15
  16. 16  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  17. 17  {
  18. 18      self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
  19. 19
  20. 20      self.viewController = [[ViewController alloc] initWithCollectionViewLayout:[[CircleLayout alloc] init]];
  21. 21
  22. 22      self.window.rootViewController = self.viewController;
  23. 23      [self.window makeKeyAndVisible];
  24. 24      return YES;
  25. 25  }
  26. 26
  27. 27  @end

ViewController介绍

ViewController是继承自UICollectionViewController，它负责显示Collection View的所有内容。通常在这里实现Collection View的dataSource和delegate。下面的代码实现了如下两个方法：
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;

并且给collectionView添加了Tap手势识别功能，以便用户在Tap的时候，对item进行相应的添加和删除功能。

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.m
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import <UIKit/UIKit.h>
  10. 10
  11. 11  @interface ViewController : UICollectionViewController
  12. 12
  13. 13  @property (nonatomic, assign) NSInteger cellCount;
  14. 14
  15. 15  @end

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.m
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import "ViewController.h"
  10. 10  #import "Cell.h"
  11. 11
  12. 12  @implementation ViewController
  13. 13
  14. 14  -(void)viewDidLoad
  15. 15  {
  16. 16      self.cellCount = 20;
  17. 17      UITapGestureRecognizer* tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
  18. 18      [self.collectionView addGestureRecognizer:tapRecognizer];
  19. 19      [self.collectionView registerClass:[Cell class] forCellWithReuseIdentifier:@"MY_CELL"];
  20. 20      [self.collectionView reloadData];
  21. 21      self.collectionView.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
  22. 22
  23. 23      UIImageView* imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon.png"]];
  24. 24      imageView.center = self.collectionView.center;
  25. 25      [self.collectionView addSubview:imageView];
  26. 26  }
  27. 27
  28. 28  - (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;
  29. 29  {
  30. 30      return self.cellCount;
  31. 31  }
  32. 32
  33. 33  - (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;
  34. 34  {
  35. 35      Cell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"MY_CELL" forIndexPath:indexPath];
  36. 36      return cell;
  37. 37  }
  38. 38
  39. 39  - (void)handleTapGesture:(UITapGestureRecognizer *)sender {
  40. 40
  41. 41      if (sender.state == UIGestureRecognizerStateEnded)
  42. 42      {
  43. 43          CGPoint initialPinchPoint = [sender locationInView:self.collectionView];
  44. 44          NSIndexPath* tappedCellPath = [self.collectionView indexPathForItemAtPoint:initialPinchPoint];
  45. 45          if (tappedCellPath!=nil)
  46. 46          {
  47. 47              self.cellCount = self.cellCount - 1;
  48. 48              [self.collectionView performBatchUpdates:^{
  49. 49                  [self.collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:tappedCellPath]];
  50. 50
  51. 51              } completion:nil];
  52. 52          }
  53. 53          else
  54. 54          {
  55. 55              self.cellCount = self.cellCount + 1;
  56. 56              [self.collectionView performBatchUpdates:^{
  57. 57                  [self.collectionView insertItemsAtIndexPaths:[NSArray arrayWithObject:[NSIndexPath indexPathForItem:0 inSection:0]]];
  58. 58              } completion:nil];
  59. 59          }
  60. 60      }
  61. 61  }
  62. 62
  63. 63  @end

Cell介绍

在此自定义了一个简单的cell：继承自UICollectionViewCell。

当item在collection view的可视范围内时，UICollectionViewCell负责显示单个item数据的内容，你可以通过as-is关系来使用它，当然，也可以继承（subclass）自它，以添加一些额外的属性和方法。cell的layout和显示是有collection view管理的，并且cell与layout对象相互对应。

在这里，我使用继承（subclass）机制，来给cell添加了一个UIImageView，用来显示一副图片。代码很简单，看下面的具体时间即可。在.m文件里面对UIImageView进行了圆角处理。

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.m
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import <UIKit/UIKit.h>
  10. 10
  11. 11  @interface Cell : UICollectionViewCell
  12. 12
  13. 13  @property (strong, nonatomic) UIImageView* imageView;
  14. 14
  15. 15  @end

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.m
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import "Cell.h"
  10. 10
  11. 11  @implementation Cell
  12. 12
  13. 13  - (id)initWithFrame:(CGRect)frame
  14. 14  {
  15. 15      self = [super initWithFrame:frame];
  16. 16      if (self) {
  17. 17          self.contentView.layer.cornerRadius = 10.0;
  18. 18          [self.contentView setFrame:CGRectMake(0, 0, 75, 75)];
  19. 19          self.contentView.layer.borderWidth = 1.0f;
  20. 20          self.contentView.layer.borderColor = [UIColor whiteColor].CGColor;
  21. 21          self.contentView.backgroundColor = [UIColor underPageBackgroundColor];
  22. 22
  23. 23          self.imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"98_avatar_big.jpg"]];
  24. 24
  25. 25          self.imageView.layer.masksToBounds = YES;
  26. 26          self.imageView.layer.cornerRadius = 10.0;
  27. 27          [self.imageView setFrame:self.contentView.frame];
  28. 28          [self.contentView addSubview:self.imageView];
  29. 29      }
  30. 30      return self;
  31. 31  }
  32. 32
  33. 33  @end

CircleLayout介绍【在UICollectionView中，Layout非常重要】

CircleLayout继承自UICollectionViewLayout，在这里先简单介绍一下UICollectionViewLayout
UICollectionViewLayout类是一个抽象基类，通过继承它以生成collection view的layout信息。layout对象的职责就是决定collection view中cells，supplementary views和decoration views的位置，当collection view请求这些信息时，layout对象会提供给collection view。collection view就使用laout对象提供的信息把相关的view显示在屏幕上。
注意：要使用UICollectionViewLayout必须先子类化它

子类化时需要注意的事项：
layout对象不负责创建views，它只提供layout（布局），view的创建是在collection view的data source中。layout对象定义了view的位置和size等布局属性。

collection view有三种可视元素需要layout：
Cells：cells是layout管理的主要元素。每一个cell代表了collection view中的单个数据item。一个collection view可以把cell放到一个section中，也可以把cell分为多个section。layout的主要职责就是组织collection view的cells。

Supplementary views：supplementary view也显示数据，但是与cells不同。并不像cell，supplementary view不可以被用户选择。相反，可以使用supplementary view来给一个section实现类似页眉和页脚，当然不仅仅是section，也可以是整个collection view。supplementary view是可选的，并且他们的使用和位置是由layout对象定义的。

Decoration views：decoration view是用于装饰的，不可以被用户选择，并且它的相关数据没有与collection view绑定。decoration view是另外一种supplementary view。类似supplementary view，decoration view也是可选的，，并且他们的使用和位置是由layout对象定义的。

collection view会在许多不同时间里面，请求这些元素的layout对象以获得相关 layout信息。每一个出现在屏幕中的cell和view的位置是有layout对象提供的。类似的，每次从collection view中插入或者删除item，相应的layout也会被添加或者移除。当然，collection view总是会限制layout对象数目：即只针对屏幕的可视范围。

需要重载的方法
每个layout对象都需要实现下面的方法：

  • collectionViewContentSize
  • shouldInvalidateLayoutForBoundsChange:
  • layoutAttributesForElementsInRect:
  • layoutAttributesForItemAtIndexPath:
  • layoutAttributesForSupplementaryViewOfKind:atIndexPath: (如果layout 支持 supplementary views)
  • layoutAttributesForDecorationViewWithReuseIdentifier:atIndexPath: (如果layout 支持 decoration views)

这些方法具体作用，可以查阅相关的sdk即可知晓。
当collection view中的数据发生了改变，如插入或删除item，那么collection view会请求这些item的layout对象，以更新layout信息。特别是，任意的item被移动，添加或者删除了，必须要有它相关的layout信息来更新相关的新位置。对于移动一个items，collection view会使用标准的方法来检索item的layout属性。对于item的插入和删除，collection view会调用一些不同的方法，你应该重载这些方法，以提供相关的layout信息：

  • initialLayoutAttributesForInsertedItemAtIndexPath:
  • initialLayoutAttributesForInsertedSupplementaryElementOfKind:atIndexPath:
  • finalLayoutAttributesForDeletedItemAtIndexPath:
  • finalLayoutAttributesForDeletedSupplementaryElementOfKind:atIndexPath:

下面的代码中就是使用到了item的插入和删除。所以重载了下面两个方法：

  • initialLayoutAttributesForInsertedItemAtIndexPath:
  • finalLayoutAttributesForDeletedItemAtIndexPath:

对于layout在collection view中的作用非常重大，你的画面显示什么效果就看你如何定义layout了。更多相关信息还请阅读相关sdk中的内容。在此不再进行详细的讲解。

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.m
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import <UIKit/UIKit.h>
  10. 10
  11. 11  @interface CircleLayout : UICollectionViewLayout
  12. 12
  13. 13  @property (nonatomic, assign) CGPoint center;
  14. 14  @property (nonatomic, assign) CGFloat radius;
  15. 15  @property (nonatomic, assign) NSInteger cellCount;
  16. 16
  17. 17  @end

[csharp] view plaincopy

  1. 01  //
  2. 02  //  AppDelegate.m
  3. 03  //  DevDiv_CollectionView_CircleLayout_Demo
  4. 04  //
  5. 05  //  Created by BeyondVincent on 12-7-3.
  6. 06  //  Copyright (c) 2012年 DevDiv. All rights reserved.
  7. 07  //
  8. 08
  9. 09  #import "CircleLayout.h"
  10. 10
  11. 11  #define ITEM_SIZE 70
  12. 12
  13. 13  @implementation CircleLayout
  14. 14
  15. 15  -(void)prepareLayout
  16. 16  {
  17. 17      [super prepareLayout];
  18. 18
  19. 19      CGSize size = self.collectionView.frame.size;
  20. 20      _cellCount = [[self collectionView] numberOfItemsInSection:0];
  21. 21      _center = CGPointMake(size.width / 2.0, size.height / 2.0);
  22. 22      _radius = MIN(size.width, size.height) / 2.5;
  23. 23  }
  24. 24
  25. 25  -(CGSize)collectionViewContentSize
  26. 26  {
  27. 27      return [self collectionView].frame.size;
  28. 28  }
  29. 29
  30. 30  - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path
  31. 31  {
  32. 32      UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
  33. 33      attributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
  34. 34      attributes.center = CGPointMake(_center.x + _radius * cosf(2 * path.item * M_PI / _cellCount),
  35. 35                                      _center.y + _radius * sinf(2 * path.item * M_PI / _cellCount));
  36. 36      return attributes;
  37. 37  }
  38. 38
  39. 39  -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
  40. 40  {
  41. 41      NSMutableArray* attributes = [NSMutableArray array];
  42. 42      for (NSInteger i=0 ; i < self.cellCount; i++) {
  43. 43          NSIndexPath* indexPath = [NSIndexPath indexPathForItem:i inSection:0];
  44. 44          [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
  45. 45      }
  46. 46      return attributes;
  47. 47  }
  48. 48
  49. 49  - (UICollectionViewLayoutAttributes *)initialLayoutAttributesForInsertedItemAtIndexPath:(NSIndexPath *)itemIndexPath
  50. 50  {
  51. 51      UICollectionViewLayoutAttributes* attributes = [self layoutAttributesForItemAtIndexPath:itemIndexPath];
  52. 52      attributes.alpha = 0.0;
  53. 53      attributes.center = CGPointMake(_center.x, _center.y);
  54. 54      return attributes;
  55. 55  }
  56. 56
  57. 57  - (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDeletedItemAtIndexPath:(NSIndexPath *)itemIndexPath
  58. 58  {
  59. 59      UICollectionViewLayoutAttributes* attributes = [self layoutAttributesForItemAtIndexPath:itemIndexPath];
  60. 60      attributes.alpha = 0.0;
  61. 61      attributes.center = CGPointMake(_center.x, _center.y);
  62. 62      attributes.transform3D = CATransform3DMakeScale(0.1, 0.1, 1.0);
  63. 63      return attributes;
  64. 64  }
  65. 65
  66. 66  @end  
    1. 原文：http://blog.csdn.net/eqera/article/details/8134994
时间： 2024-08-11 03:26:49

iOS6新特征：UICollectionView高级使用示例之CircleLayout的相关文章

iOS6新特征：UICollectionView介绍

http://blog.csdn.net/eqera/article/details/8134986 1.1. Collection View 全家福: UICollectionView, UITableView, NSCollectionView n   不直接等效于NSCollectionView n   也不替代UITableView----亲兄弟 为什么要使用Collection Views呢? n  可以高度定制内容的展现 n  管理数据最佳的做法 n  即使是处理大量数据,也非常的高

UICollectionView官方使用示例代码研究

注:这里是iOS6新特征汇总贴链接 iOS6新特征:参考资料和示例汇总 这个链接可以学习到UICollectionView的相关介绍:iOS6新特征:UICollectionView介绍 由于UICollectionView功能比较强大,在此,我们深入学习一下UICollectionView的官方使用示例代码,顺与大家分享一下心得. 一.获取官方示例代码 官方使用示例代码下载地址:如下图所示 下载后,解压将CollectionView目录拖放进一个目录下(如你的文稿目录) 二.加载示例代码 启动

HTML5表单新特征简介与举例

一.前言一撇 其实关于HTML5的表单特征早在去年你必须知道的28个HTML5特征.窍门和技术一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看.得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得fan墙的,所以这部分视频展示的内容,其实就是个空. 所以,这里打个补丁,把这部分内容完善下.本文的大致内容有: # input type=number / # input type=range / # i

Java多线程-新特征-阻塞队列ArrayBlockingQueue

阻塞队列是Java5线程新特征中的内容,Java定义了阻塞队列的接口java.util.concurrent.BlockingQueue,阻塞队列的概念是,一个指定长度的队列,如果队列满了,添加新元素的操作会被阻塞等待,直到有空位为止.同样,当队列为空时候,请求队列元素的操作同样会阻塞等待,直到有可用元素为止. 有了这样的功能,就为多线程的排队等候的模型实现开辟了便捷通道,非常有用. java.util.concurrent.BlockingQueue继承了java.util.Queue接口,可

ios新特征 ARC详解

IOS ARC 分类: IOS ARC2013-01-17 09:16 2069人阅读 评论(0) 收藏 举报 目录(?)[+] 关闭工程的ARC(Automatic Reference Counting) 顺带附上ARC教程 本文部分实例取自iOS 5 Toturail一书中关于ARC的教程和公开内容,仅用于技术交流和讨论.请不要将本文的部分或全部内容用于商用,谢谢合作. 欢迎转载本文,但是转载请注明本文出处:http://www.onevcat.com/2012/06/arc-hand-by

systemd新特征与使用介绍

写在前面: 博客书写牢记5W1H法则:What,Why,When,Where,Who,How. 本篇主要内容: ● Systemd新特征 ● Systemd核心概念:unit    unit常见类型    systemd关键特征    管理target units    unit文件格式 ● systemd配置文件读取顺序    开机流程    开机自启脚本配置 Systemd新特征: 系统引导时实现服务并行启动: 按需激活进程: 系统状态快照: 基于依赖关系定义服务控制逻辑: 核心概念:uni

Java线程：新特征-有返回值的线程

http://lavasoft.blog.51cto.com/62575/222082/ 2009-11-04 17:33:56 标签:返回值 职场 线程 休闲 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lavasoft.blog.51cto.com/62575/222082 Java线程:新特征-有返回值的线程 在Java5之前,线程是没有返回值的,常常为了“有”返回值,破费周折,而且代码很不好写.或者干脆绕过这道坎,

golang 1.3的新特征和目前进度

原文: 计划中的新特征:http://golang.org/s/go13todo 目前的进展情况:http://talks.golang.org/2014/go1.3.slide golang 1.3代码将在3.1冻结,6.1发布. 1.100% percise GC GC是垃圾回收器,percise GC不知道什么意思,应该是能够提升性能吧 2.copying stack 使用copy stack代替原来的split stack,解决所谓的"hot split"问题. 3.一系列的性

灵玖软件：大数据语言新特征发现

信息的基本单位是句子,一个句子可以较表达完整连贯的易于理解的语义.句子中起主要作用的往往是关键词.词组或短语,而句子中的其他成分只是起到进一步修饰连接的作用,它们只是对基本信息的细化和补充.一旦获取了这些有意义的关键信息,便能获取句子的基本信息.因此,新特征语言和有意义串发现对中文自然语言理解是很有意义的.发现频繁使用的新词和短语等有意义串不仅能改进分词准确率,也有着其他广泛的应用前景.其应用领域主要如下几个方面: 首先,是对信息检索索引词的分析.例如,"计算技术研究所"是一个完整的查