swift中UICollectionView的使用

2016-12-17  本文已影响0人  不安分心
class MainViewController: UIViewController {

    // 屏幕的宽和高
    let width = UIScreen.main.bounds.width
    let height = UIScreen.main.bounds.height
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 加载UICollectionView
        self.setupCollectionView()
    }
    
    // MARK: 加载UICollectionView
    func setupCollectionView() {
        // 1. 定义collectionView的布局类型,流布局
        let layout = UICollectionViewFlowLayout()
        // 2. 设置cell的大小
        layout.itemSize = CGSize(width: width/2, height: height/3)
        // 3. 滑动方向
        /**
         默认方向是垂直
         UICollectionViewScrollDirection.vertical  省略写法是.vertical
         水平方向
         UICollectionViewScrollDirection.horizontal 省略写法是.horizontal
         */
        layout.scrollDirection = .vertical
        // 4. 每个item之间最小的间距
        layout.minimumInteritemSpacing = 0
        // 5. 每行之间最小的间距
        layout.minimumLineSpacing = 0
        // 6. 定义一个UICollectionView 
        let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: width, height: height), collectionViewLayout: layout)
        collectionView.backgroundColor = UIColor.red
        
        // 7. 设置collectionView的代理和数据源
        collectionView.delegate = self
        collectionView.dataSource = self;
        
        // 8. collectionViewCell的注册
        collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCell")
        // 9. header 的注册
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headView")
        
        self.view.addSubview(collectionView)
    }
}

extension MainViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    
    // MARK: UICollectionViewDataSource 代理方法
    /**
        该方法为可选方法,默认为1
        return: collectionView中section的个数
     */
    func numberOfSections(in collectionView: UICollectionView) -> Int {
         return 1
    }
    
    // MARK: UICollectionviewDataSource  代理方法
    /**
        改方法为必选方法
        return: section中的item的个数
     */
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
         return 8
    }
    
    // MARK: UICollectionviewDataSource  代理方法
    /**
     改方法为必选方法
     return: 绘制collectionView的cell
     */
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! CollectionViewCell
        cell.imageView.image = UIImage(named: "\((indexPath as NSIndexPath).row + 2).png")
        cell.label.text = "美景\((indexPath as NSIndexPath).row + 1)"
        return cell
    }
    
    // MARK: UICollectionViewDelegate的代理方法
    /**
        Description: 当点击某个item之后的回应
     */
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("(\((indexPath as NSIndexPath).section), \((indexPath as NSIndexPath).row))")
    }

    // MARK: UICollectionViewDelegateFlowLayout的代理方法
    /**
        return: header的大小
     */
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize(width: width, height: 17)
    }
    
    /**
        可以定制不同的item
        return: item的大小
     */
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if (indexPath as NSIndexPath).row % 2 == 1 {
            return CGSize(width: width/2, height: height/3)
        }
        else {
            return CGSize(width: width/2, height: height/2)
        }
    }

}
上一篇 下一篇

猜你喜欢

热点阅读