当前位置: > > > Swift - 带有多section分区的collectionView的使用样例

Swift - 带有多section分区的collectionView的使用样例

UICollectionView 组件和 UITableView 组件一样,也是可以设置多个 section(分区、分组)。每个 section 我们可以设置不同的 headerfooter,同时每个分区内还可以显示不同数量和内容的单元格。
虽然我们也可以在 tableViewCell 中嵌入 collectionView 来实现同样的效果,但会更加麻烦些,特别是如果每个 collectionView 内单元格数量不同,collectionView 还要实现动态高度。
所以如果能满足需求的话,还是建议使用多 section collectionView 来实现。

1,效果图

(1)collectView 的每一个分区对应一个月份的图书列表。
(2)分区头显示月份标题。分区尾背景设为灰色,内容为空。
(3)分区内单元格显示当月所有书籍封面图片,数量不定,分区高度自适应。

2,实现步骤

(1)打开 StoryBoard,删除默认的 View Controller。拖入一个 Collection View Controller,并将其设置为初始 VC

(2)选中这个 Scene,点击菜单“Editor”->“Embed In”->“Navigation Controller”添加一个导航控制器。

(3)选中 Collection View,在其属性面板中保持 Layout 属性为 Flow 不变。勾选上“Section Header”和“Section Footer”,分别增加分区头和分区尾。

(4)调整好头部的尺寸,并将其 Identifier 设置为 HeaderView

(5)往头部中拖入一个 Label 并设置好相关约束。同时将 Label Tag 设置为 1

(6)调整好分区尾部的尺寸,将其背景色设为灰色。同时将其 Identifier 设置为 FooterView

(7)调整好单元格尺寸,将其 Identifier 设置为 MyCell


(8)往单元格里拖入一个 ImageView,并设置好相关约束。同时将 ImageView Tag 设为 1

(9)选中 Collection View,在尺寸样式面包中设置好内边距和单元格间距。

(10)新建一个 CollectionViewController 类(继承 UICollectionViewController)。并在 StoryBoard 中作绑定。

(11)CollectionViewController.swift 完整代码如下
import UIKit

//每月书籍
struct BookPreview {
    var title:String
    var images:[String]
}

class CollectionViewController: UICollectionViewController {
    
    //所有书籍数据
    let books = [
        BookPreview(title: "五月新书", images: ["0.jpg", "1.jpg","2.jpg", "3.jpg",
                                               "4.jpg","5.jpg","6.jpg"]),
        BookPreview(title: "六月新书", images: ["7.jpg", "8.jpg", "9.jpg"]),
        BookPreview(title: "七月新书", images: ["10.jpg", "11.jpg", "12.jpg", "13.jpg"])
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    //获取分区数
    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return books.count
    }
    
    //获取每个分区里单元格数量
    override func collectionView(_ collectionView: UICollectionView,
                                 numberOfItemsInSection section: Int) -> Int {
        return books[section].images.count
    }
    
    //分区的header与footer
    override func collectionView(_ collectionView: UICollectionView,
                                 viewForSupplementaryElementOfKind kind: String,
                                 at indexPath: IndexPath) -> UICollectionReusableView {
        var reusableview:UICollectionReusableView!
        
        //分区头
        if kind == UICollectionElementKindSectionHeader{
            reusableview = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
                                        withReuseIdentifier: "HeaderView", for: indexPath)
            //设置头部标题
            let label = reusableview.viewWithTag(1) as! UILabel
            label.text = books[indexPath.section].title
        }
        //分区尾
        else if kind == UICollectionElementKindSectionFooter{
            reusableview = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
                                        withReuseIdentifier: "FooterView", for: indexPath)
            
        }
        return reusableview
    }
    
    //返回每个单元格视图
    override func collectionView(_ collectionView: UICollectionView,
                            cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //获取单元格
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell",
                                                      for: indexPath)
        //设置单元格中的图片
        let imageView = cell.viewWithTag(1) as! UIImageView
        imageView.image = UIImage(named: books[indexPath.section].images[indexPath.item])
        return cell
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
源码下载hangge_1592.zip
评论2
  • 2楼
    2018-01-13 16:39
    bashan

    good,讲解非常详细..学到了

    站长回复

    多谢夸奖。欢迎常来看看,我会持续更新下去的。

  • 1楼
    2017-06-02 16:41
    Gio

    如何在视图中使用这个UICollectionView啊

    站长回复

    文章末尾有完整的工程源码,你下载下来看看就知道了。