UICollectionView学习笔记(Swift)

经过对UICollectionView的简单使用，对它的用法还不是很熟悉，再次学习一下

UICollectionView是用来展示数据的一种视图，和UITableVIew一样，它也继承自UIScrollView，需要实现dataSource和delegate等协议，但他在布局方面比UITableView灵活很多，也更加复杂。

首先是初始化：

UICollectionView的初始化和UITableView不同，必须要有UICollectionViewLayout。
UICollectionViewLayout是抽象类，我们可以选择重写父类或者使用官方提供的子类进行初始化。
以下是简单的layout初始化代码：

func createBasicListLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewFlowLayout()
    let itemWidth = (view.frame.width - 30) / 2
    layout.itemSize = CGSize(width: itemWidth, height: itemWidth * 1.5 )
    layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    layout.scrollDirection = .vertical
    return layout
}

以下是UICollectionView的初始化代码：

let layout = createBasicListLayout()
let collectionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
view.addSubview(collectionView)

和UITableView一样，需要实现dataSource和delegate等协议

// 承接上方的代码
collectionView.dataSource = self
collectionView.delegate = self

接下来实现代理方法

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .black
        return cell
    }
}

到此一个简单的UICollectionView就实现了，效果见下图

UICollectionViewDataSource重要的部分代理方法

//以下是两个必须要实现的代理方法
// 返回每个分区的cell数量 
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // return count
}

// 返回UICollectionCell 
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // return cell
}

//以下是可以不实现的代理方法
//返回分区个数，不实现默认返回1
func numberOfSections(in collectionView: UICollectionView) -> Int {
    // return count
}

//返回行头或行尾视图，不实现默认返回nil
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    // return view
}

UICollectionViewDelegate重要的部分代理方法

// UICollectionViewDelegate的代理方法全部不必须实现
// 是否显示高亮
func collectionView(_ collectionView: UICollectionView, shouldHighlightItemAt indexPath: IndexPath) -> Bool {
    // return Bool
}
// 高亮消失
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
    // code
}
// 高亮    
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    // code
}
// 按下cell
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    // code
}
// cell将要显示
func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    // code
}

上面实现的简单collectionView，每个cell都是一样的样式，对于复杂场景，就可以通过UICollectionViewDelegateFlowLayout自定义布局

// 以下方法全部不必须实现
// 设置cell的大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if indexPath.row == 0{ 
        return CGSize(width: 50, height: 50)
}
    return CGSize(width: 120, height: 120)
}
// 设置section的insets
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
     // return insets
}
// 设置section的headerView大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    // return size
}

// 设置section的footerView大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
    // return size
}

代码007普通

打赏 收藏 海报 链接