首页 > 代码库 > Xcode8+Swift3 纯代码模式实现 UICollectionView
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、运行查看效果，如下图所示：
最后，插一句，整个项目的结构图如下所示：
Xcode8+Swift3 纯代码模式实现 UICollectionView
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。