UIKit:UICollectionView初体验

//
//  ViewController.swift
//  UIKitTest
//
//  Created by travey on 2018/11/9.
//  Copyright © 2018 ZhouShijie. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // 首先方块的布局,注意这里是方块之间的,而不是方块内部的,这个layout是Table没有的哦
        // 我们采用流式布局UICollectionViewFlowLayout,它继承UICollectionViewLayout
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 150, height: 150) // 设置方块长宽
        layout.scrollDirection = UICollectionView.ScrollDirection.horizontal // 设置滑动的方向是水平还是竖直,这里选择的是水平
        // Ps. 下面的间距是针对滑动方向而言的,是相对的而不是绝对的
        layout.minimumLineSpacing = 30 // 行最小间距
        layout.minimumInteritemSpacing = 10 // 列最小间距
        
        // 创建一个网格
        let collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) // 传入的第二个参数要选择布局,我们用上面设置好的布局就可以了
        collectionView.register(NSClassFromString("UICollectionViewCell"), forCellWithReuseIdentifier: "cell") // 不同于TableView,网格的cell必须要注册
        // 实现代理
        collectionView.delegate = self
        collectionView.dataSource = self
        self.view.addSubview(collectionView)
    }
    
    // 返回section数
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    // 返回对应section的方块数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    // 返回对应的cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) // 取一个
        if indexPath.row == 5 {
            cell.backgroundColor = UIColor.red
        } else {
            cell.backgroundColor = UIColor.green
        }
        return cell
    }

}

我们还可以对每个cell进行大小的设置

//
//  ViewController.swift
//  UIKitTest
//
//  Created by travey on 2018/11/9.
//  Copyright © 2018 ZhouShijie. All rights reserved.
//

import UIKit

// 这里继承了UICollectionViewDelegateFlowLayout,这个类是UICollectionViewDelegate的子类,因此无需再次继承UICollectionViewDelegate
class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // 首先方块的布局,注意这里是方块之间的,而不是方块内部的,这个layout是Table没有的哦
        // 我们采用流式布局UICollectionViewFlowLayout,它继承UICollectionViewLayout
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 150, height: 150) // 设置方块长宽
        layout.scrollDirection = UICollectionView.ScrollDirection.vertical // 设置滑动的方向是水平还是竖直,这里选择的是水平
        // Ps. 下面的间距是针对滑动方向而言的,是相对的而不是绝对的
        layout.minimumLineSpacing = 10 // 行最小间距
        layout.minimumInteritemSpacing = 30 // 列最小间距
        
        // 创建一个网格
        let collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) // 传入的第二个参数要选择布局,我们用上面设置好的布局就可以了
        collectionView.register(NSClassFromString("UICollectionViewCell"), forCellWithReuseIdentifier: "cell") // 不同于TableView,网格的cell必须要注册
        // 实现代理
        collectionView.delegate = self
        collectionView.dataSource = self
        self.view.addSubview(collectionView)
    }
    
    // 返回section数
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    // 返回对应section的方块数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 9
    }
    
    // 返回对应的cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) // 取一个
        if indexPath.row == 5 {
            cell.backgroundColor = UIColor.red
        } else {
            cell.backgroundColor = UIColor.green
        }
        return cell
    }
    
    
    // 在这里可以设置每个方块的大小
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let temp = indexPath.row % 3
        // 0表示第一列,1是第二列,2是第三列
        switch temp {
        case 0:
            return CGSize(width: 80, height: 80)
        case 1:
            return CGSize(width: 140, height: 140)
        case 2:
            return CGSize(width: 40, height: 40)
        default:
            return CGSize(width: 0, height: 0)
        }
    }

}

猜你喜欢

转载自blog.csdn.net/shijie97/article/details/83899188