iOS开发 纯代码创建UICollectionView

听语音


  • iOS开发 纯代码创建UICollectionView1

  • iOS开发 纯代码创建UICollectionView2

  • iOS开发 纯代码创建UICollectionView3

  • iOS开发 纯代码创建UICollectionView4

  • iOS开发 纯代码创建UICollectionView5

  • iOS开发 纯代码创建UICollectionView6

  • iOS开发 纯代码创建UICollectionView7

分步阅读

一键约师傅

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

      习惯了使用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一下,效果如图。

    iOS开发 纯代码创建UICollectionView

  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];

    iOS开发 纯代码创建UICollectionView

    iOS开发 纯代码创建UICollectionView

  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和头部。

    iOS开发 纯代码创建UICollectionView

    iOS开发 纯代码创建UICollectionView

  4. 4

    实现UICollectionView的Delegate、DataSource方法

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

          2、返回Sections个数:numberOfSectionsInCollectionView:

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

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

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

    iOS开发 纯代码创建UICollectionView

  5. 5

    显示CollectionView及设置数据源

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

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

    iOS开发 纯代码创建UICollectionView

    END

代码下载地址

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

  • 代码运行效果如图。

    iOS开发 纯代码创建UICollectionView

    END