iOS开发 纯代码创建UICollectionView 听语音

iOS开发 纯代码创建UICollectionView

听语音

• 
  

• 1

• 2

• 3

• 4

• 5

• 6

• 7

分步阅读

一键约师傅

百度师傅高质屏和好师傅，解救你的碎屏机

      习惯了使用xib和StoryBoard创建UICollectionView项目工程的伙伴，需要转换使用纯代码来实现，想避免碰更多的壁，就需要认真 了解创建UICollectionView过程了。创建UICollectionView比创建UITableView更加复杂，初始化方式也是相对奇 特。以下是使用纯代码创建UICollectionView的方法。

工具/原料

• MAC OS X操作系统：：OS X 10.11.5

• 编译环境：Xcode 7.3.1

方法/步骤

1. 1

   创建工程项目和视图控制器

         创建工程项目UICollectionView，新建一个UIViewController。选中工程，右键-New File…选择“Cocoa Touch Class”-Next，给个合理的名称ViewController，再Next完成。

         在AppDelegate.m文件包含#import "ViewController.h"。添加代码：

   UINavigationController *navC = [[UINavigationController alloc]initWithRootViewController:[[ViewController alloc]init]];

       self.window.rootViewController = navC;//将navC设置为根视图控制器。

   修改一下ViewController的显示样式，执行编译，run一下，效果如图。

   

2. 2

   创建自定义UICollectionViewCell

        选中工程，右键-New File…选择“Cocoa Touch Class”-Next，选择继承于UICollectionViewCell类，给个合理的名称CollectionViewCell，再Next完成。

         1、自定义所需要的控件，比如UIImageView：

   @property(nonatomic ,strong)UIImageView *imgView;

         2、初始化控件，在方法- (id)initWithFrame:(CGRect)frame中实现：

   self.imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 30, 150, 140)];

   self.imgView.backgroundColor = [UIColor groupTableViewBackgroundColor];

   [self addSubview:self.imgView];

   

   

3. 3

   实现初始化UICollectionView方法

         1、在ViewController.h添加事件代理和数据源代理<UICollectionViewDataSource,UICollectionViewDelegate>。

         2、在ViewController.m创建UICollectionView。需要使用UICollectionViewFlowLayout来创建， 使用方法- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;如果只用普通的init方法，是实现不了的。

         3、设置flowLayout的属性。

         4、初始化CollectionViewCell和头部。

   

   

4. 4

   实现UICollectionView的Delegate、DataSource方法

         1、返回Items个数：collectionView: numberOfItemsInSection: 

         2、返回Sections个数：numberOfSectionsInCollectionView:

         3、返回Cell显示内容：collectionView: cellForItemAtIndexPath:

         4、返回头部尾部显示内容：collectionView: viewForSupplementaryElementOfKind: atIndexPath:

         5、选中时调用的方法：collectionView: didSelectItemAtIndexPath:

   

5. 5

   显示CollectionView及设置数据源

         在viewDidLoad方法内：[self.view addSubview:self.collectionView];

   代 码self.collectionView会自动调用setter、getter方法。即调用- (UICollectionView *)collectionView方法初始化并返回collectionView。然后addSubview:到self.view上。配合广告栏和定时 器，完成显示。

   

   END

代码下载地址

• https://github.com/cjq002/UICollectionView-Pure-code.git

• 代码运行效果如图。

  

  END