码迷,mamicode.com
首页 > 编程语言 > 详细

Xcode8+Swift3 纯代码模式实现 UICollectionView

时间:2016-09-25 20:25:43      阅读:558      评论:0      收藏:0      [点我收藏+]

标签:

开发环境

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

标签:

原文地址:http://www.cnblogs.com/jacksonwj/p/5906565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!