CollectionView一直用的不是很熟练, 今天用它铺了一个 个人中心页面下会出现的网格格式界面
效果如下:

0.0.png

首先要签订所需的协议:

import UIKit
//签订协议
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    let screenWidth = UIScreen.mainScreen().bounds.width
    let screenHeight = UIScreen .mainScreen().bounds.height
    let idenContentString = "idenContentString"

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        //单个滚动视图
        self.automaticallyAdjustsScrollViewInsets = true
        self.makeUICollectionView()
    }

开始设置UIcontrollectionView

func makeUICollectionView() {
        //设置 Layout
        let layout = UICollectionViewFlowLayout.init()
        //滚动方向
        layout.scrollDirection = UICollectionViewScrollDirection.Vertical
        //间隔
        let spacing:CGFloat = 1
        //水平间隔
        layout.minimumInteritemSpacing = spacing
        //垂直行间距
        layout.minimumLineSpacing = spacing
        //列数
        let columnsNum = 4
        //计算单元格的宽度
        let itemWidth = (screenWidth - spacing * CGFloat(columnsNum - 1)) / CGFloat(columnsNum)
        //设置单元格宽度和高度
        layout.itemSize = CGSizeMake(itemWidth, itemWidth)
        
        //设置collectionView
        let myCollectionView : UICollectionView = UICollectionView(frame: CGRectMake(0, 200, screenWidth, (screenWidth / 4) * 3 + 2), collectionViewLayout: layout)
        myCollectionView.collectionViewLayout = layout
        myCollectionView.delegate = self
        myCollectionView.dataSource = self
        myCollectionView.backgroundColor = UIColor.lightGrayColor()
        myCollectionView.registerClass(MyCollectionViewCell.self, forCellWithReuseIdentifier: idenContentString)
        self.view.addSubview(myCollectionView)
        
    }

实现CollectionView的协议方法:

//MARK: UICollectionViewDataSource
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 12
    }

//MARK:UICollectionViewDelegate
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        //点击的哪一个
        print("tap -- \(indexPath.row)")
    }
    
    //MARK:UICollectionViewDelegateFlowLayout
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        //分别距 上, 左, 下, 右的距离
        return UIEdgeInsetsMake(1, 0, 1, 0)
    }

接下来是设置cell也就是item上的内容(cell中的代码在下面):

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(idenContentString, forIndexPath: indexPath) as! MyCollectionViewCell
        
        if indexPath.row <= 9 {
            var titleArray = ["订单", "购物车", "优惠券", "积分商城", "收藏", "我的攻略", "邀请好友", "设置", "消息", "商户入驻"]
            //标题
            cell.titleLabel.text = titleArray[indexPath.row]
            
            cell.iconImageView.image = UIImage.init(named: "icon_\(indexPath.row)")
        }
        else
        {
            //后两个空出来
            cell.titleLabel.text = nil
            cell.iconImageView.backgroundColor = UIColor.clearColor()
        }
        cell.backgroundColor = UIColor.whiteColor()

        return cell
    }

图片名为了方便添加我是按照顺序这样命名的:

图片名.png

下面是MyCollectionViewCell中的代码:

import UIKit

class MyCollectionViewCell: UICollectionViewCell {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.iconImageView.frame = CGRectMake(frame.size.width / 3, frame.size.height / 3, frame.size.width / 3, frame.size.height / 3)
        //iconImageView.frame.origin.y
        self.titleLabel.frame = CGRectMake(0, iconImageView.frame.origin.y + iconImageView.frame.size.height + 5, frame.size.width, 15)
        self.contentView.addSubview(self.iconImageView)
        self.contentView.addSubview(self.titleLabel)
        
    }
    
    //不太清楚是什么的指定构造器 - =
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    var titleLabel : UILabel = {
        let label = UILabel()
        label.text = "标题"
        label.textAlignment = NSTextAlignment.Center
        label.font = UIFont.systemFontOfSize(10)
        return label
    }()
    
    var iconImageView : UIImageView = {
        
        let imageView  = UIImageView()
        return imageView
    }()
}

此处是DEMO