天天看点

Swift UICollectionView 使用

1.Controller 中添加 UICollectionView 控件

import Foundation
import UIKit

class MainPageViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
    
    var collectionView:UICollectionView?;
    
    let CELL_ID = "cell_id";
    let HEAD_ID = "head_id";
    
    override func viewDidLoad() {
        super.viewDidLoad();
        
        self.view.backgroundColor = UIColor.blueColor();
        self.title = "首页";
        createCollectionView();
    }
    
    
    func createCollectionView() {
        
        let flowLayout = UICollectionViewFlowLayout();
        collectionView = UICollectionView(frame: CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT),collectionViewLayout:flowLayout);
        collectionView!.backgroundColor = UIColor.orangeColor();
        collectionView!.delegate = self;
        collectionView!.dataSource = self;
        
        collectionView!.registerClass(MainPageSectionZeroCell.self, forCellWithReuseIdentifier: CELL_ID);
        collectionView!.registerClass(MainPageSectionZeroHeadView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: HEAD_ID);
        
        self.view.addSubview(collectionView!);
    }
    
    //MARK: - UICollectionView 代理 

    //分区数   
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 3;
    }
    
    //每个分区含有的 item 个数
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20;
    }
    
    //返回 cell
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(CELL_ID, forIndexPath: indexPath) as! MainPageSectionZeroCell;
        
        return cell;
    }
    
    //每个分区的内边距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(10, 10, 10, 10);
    }
    
    //最小 item 间距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10;
    }
    
    //最小行间距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10;
    }
    
    //item 的尺寸
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSizeMake(SCREEN_WIDTH / 4.0 - 50 / 4.0, SCREEN_WIDTH / 4.0 - 50 / 4.0);
    }
    
    //每个分区区头尺寸
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSizeMake(SCREEN_WIDTH, 40);
    }
    
    //返回区头、区尾实例
    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        
        var headview = MainPageSectionZeroHeadView();
        
        if kind == UICollectionElementKindSectionHeader {
            
            headview = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: HEAD_ID, forIndexPath: indexPath) as! MainPageSectionZeroHeadView;
            
        }
        
        return headview;
      
    }
    
    //item 对应的点击事件
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        print("index is \(indexPath.row)");
    }
    
}

           

2. UICollectionViewCell 中添加需要的控件

import Foundation
import UIKit

class MainPageSectionZeroCell: UICollectionViewCell {
    
    override init(frame: CGRect) {
        super.init(frame: frame);
        
        let image = UIImage(named: "collts");
        let imageV = UIImageView(frame: CGRectMake(0, 0, frame.size.width, frame.size.height));
        imageV.image = image;
        
        self.addSubview(imageV);
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
           

3.区头 / 区尾 代码实现

import Foundation
import UIKit

class MainPageSectionZeroHeadView: UICollectionReusableView {
    
    override init(frame: CGRect) {
        super.init(frame: frame);
        
        self.backgroundColor = UIColor.whiteColor();
        let label = UILabel(frame: CGRectMake(0,0,self.frame.width,self.frame.height));
        label.text = "标题";
        self.addSubview(label);
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder) has not been implemented")
    }
}


           

注:Xib 使用方法与 OC 里面类似,可自行尝试