Xcode8+Swift3 纯代码模式实现 UICollectionView

开发环境

macOS Sierra 10.12、Xcode 8.0,如下图所示:

总体思路

1、建立空白的storyboard用于呈现列表(用 UICollectionView 实现)

2、自定义实现单个项目(UICollectionViewCell)的内容

3、将单个项目注册到列表(UICollectionView)中

4、将列表注册到页面(StoryBoard)中

5、运行查看效果

1、建立StoryBoard

本项目集成了 Tab Bar 和 Navigation Bar,整个项目(main.storyboard)试图如下所示:

这里在大厅页面(HomeNavItem Scene)呈现列表,如下图所示:

创建 HomeNavItemController.swift,作为上述页面的后台代码,关联方式如上图右上角 Custom Class 所示。

至此,界面端的工作就全部完毕了。

2、自定义单个单元格(HomeCollectionViewCell.swift),代码如下所示:

import UIKit;

class HomeCollectionViewCell: UICollectionViewCell {

    var title: UILabel?;   // 单元格中的内容,如需其它控件,可自行添加

    override init(frame: CGRect) {
        super.init(frame: frame);

        // 将 title 注册到单元格
        title = UILabel(frame: CGRect(x: 30, y: 0, width: UIScreen.main.bounds.width, height: 50));
        title?.textColor = UIColor.black;
        self.addSubview(title!);

        self.backgroundColor = UIColor.blue;   // 设置整个单元格背景颜色,测试单元格大小
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("Cell 初始化失败");
    }
}

3、将列表注册到页面中(HomeNavItemController.swift),同时,将单个单元格注册到页面中,代码如下所示:

 1 import UIKit;
 2
 3 class HomeNavItemController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
 4
 5     var colView: UICollectionView?;   // 创建一个列表
 6
 7     // 加载界面
 8     override func viewDidLoad() {
 9         super.viewDidLoad();
10
11         let layout = UICollectionViewFlowLayout();
12
13         colView = UICollectionView(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: self.view.bounds.height), collectionViewLayout: layout);
14
15         colView?.register(HomeCollectionViewCell.self, forCellWithReuseIdentifier: "colCell")
16
17         colView?.delegate = self;
18         colView?.dataSource = self;
19         colView?.backgroundColor = UIColor.white;
20
21         layout.itemSize = CGSize(width: 375, height: 300);
22
23         self.view.addSubview(colView!);
24     }
25
26     override func didReceiveMemoryWarning() {
27         super.didReceiveMemoryWarning();
28     }
29
30     // Cell 数量
31     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
32         return 10;
33     }
34
35     // Cell 具体内容
36     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
37         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "colCell", for: indexPath) as! HomeCollectionViewCell;
38         cell.title!.text = "这里是内容:\(indexPath.row)";
39         return cell;
40     }
41 }

4、运行查看效果,如下图所示:

最后,插一句,整个项目的结构图如下所示:

时间: 2024-10-31 05:47:20

Xcode8+Swift3 纯代码模式实现 UICollectionView的相关文章

iOS开发 纯代码创建UICollectionView

转:http://jingyan.baidu.com/article/eb9f7b6d8a81a5869364e8a6.html iOS开发 纯代码创建UICollectionView 习惯了使用xib和StoryBoard创建UICollectionView项目工程的伙伴,需要转换使用纯代码来实现,想避免碰更多的壁,就需要认真了解创建UICollectionView过程了.创建UICollectionView比创建UITableView更加复杂,初始化方式也是相对奇特.以下是使用纯代码创建UI

IOS之UI--小实例项目--添加商品和商品名(纯代码终结版)

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

(源码推荐)快速开发10几天时间纯代码高仿《内涵段子》

这个项目是用OC编写,如果有的朋友已经下载下来看了这个项目, 就会意识到这个项目没有一个storyboard或者是nib,不是因为不喜欢用storyboard或者nib,而是因为一直以来就想用纯代码写个项目,(好远大的梦想..开玩笑的..),但是项目是写出来的,光想不做不写是不行的,所以我就开始我的”内涵之旅“了. Github 地址 https://github.com/Charlesyaoxin/NeiHanDuanZI 日志: 8.30号:没怎么做东西,就是搭建了项目的架构,拉入了之前经常

iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三--纯代码的autoLayout及布局动画 一.引言 关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致.除了使用storyBoard进行布局约束的拖拽,有时我们也需要在代码中进行autolayout的布局设置,Masonry库可以方便的创建约束属性,实际上,我们也没有必要再使用系统原生的代码来创建和设置约束,这篇博客只作为使用的方法备忘.前几篇布局介绍的链接如下: 使用autoresizing进行界面布局:http://my.o

RHEL/CentOS纯文本模式下的开机自动登录

• Linux系统启动登录过程 Linux系统从启动到登录的整个过程大致如下: 1> 加载BIOS信息:包含了CPU/显卡/内存/硬盘/网卡等硬件信息.设备启动顺序.时钟信息等等 2> 根据BIOS的启动顺序信息,依次执行,直到找到引导文件 3> Boot Loader:加载启动引导文件 4> 加载内核,完成Linux核心环境的建立 5> 执行/sbin/init程序,读取配置文件/etc/inittab,设定运行等级,如level 3(这是加载完内核后,系统执行的第一个程序

不止于小程序 APICloud推出react native纯翻译模式的UI引擎

[快速阅读,文章概要]APICloud作为国内领先的API生态平台服务商,提供的APICloud移动云平台能够一站式的满足app开发.版本更新.API云服务集成.数据运营等移动全生命周期的管理.使开发者能够在2到3个月内"快速"开发一款app. 在<AI时代的移动技术革新>大会中,APICloud团队发布了小程序的技术规范兼容产品,一种类似于React Native技术的纯翻译模式的app UI引擎,能够让app开发者利用简单的网页模式技术开发真正原生体验的app. 同时A

纯代码 自动屏幕适配iPhone

代码判断,你也可以用xib自带的自动布局选项 我是用的纯代码写的 纯代码 自动屏幕适配iPhone,布布扣,bubuko.com

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中

Stroyboard(可视化界面)与纯代码

Stroyboard是苹果在 iOS 5 中引入的新技术,让纯代码变成了一个可视化的界面,让nib.xib有一种更加直观的展现,几十行甚至几百行的代码搞定的一个控件,现在只要动动手指就能完成一个控件了,初学者学到的绝大部分都是教你怎么使用StoryBoard的而不是怎么用纯代码,但是我自己更加喜欢纯代码,总觉得自己敲出来的代码更加能信任,修改起来也会更加简单. 一开始我以为纯代码跟可视化界面其实是一样的,看个人喜好选择用什么方法,后来查了资料发现,如果是一个大的项目,用可视化界面,那么团队就不能