Swift纯代码 UICollectionView 分组显示、Cell圆角、选中变色

上一篇介绍了如何使用swift纯代码构建UIColletionView,本篇继续介绍如何对其分组、设置分组标题、cell 圆角、选中变色。 效果图如下:

效果图

1.设置Header布局SHomeHeader,继承自UICollectionReusableView。
//
//  SHomeHeader.swift
//
//  Created by wangjie on 16/5/4.
//  Copyright © 2016年 wangjie. All rights reserved.
//

import UIKit

class SHomeHeader: UICollectionReusableView {
    var titleLabel:UILabel?//title

    override init(frame: CGRect) {
        super.init(frame: frame)
        initView()
    }
    func initView(){
        titleLabel = UILabel(frame: CGRectMake(0, 0, SCREEN_WIDTH, 30))
        titleLabel?.backgroundColor = HEADER_BG_COLOR
        self .addSubview(titleLabel!)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}
2.为UICollectionReusableView注册header。
//注册header
collectionView!.registerClass(SHomeHeader.classForCoder(), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
3.自定义Header并设置宽高。
//设置HeadView的宽高
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize{
        return CGSize(width: SCREEN_WIDTH, height: headerHeight)
    }
    
    //返回自定义HeadView
    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView{
        var v = SHomeHeader()
        if kind == UICollectionElementKindSectionHeader{
            v = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: headerIdentifier, forIndexPath: indexPath) as! SHomeHeader
            let title:String = headerArr[indexPath.section] as! String
            v.titleLabel?.text = title
        }
        return v
    }
4.设置选中颜色及圆角Cell。
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        let cell = collectionView.cellForItemAtIndexPath(indexPath)
        cell!.layer.cornerRadius = 4
        cell?.backgroundColor = UIColor.yellowColor()
    }
    
    func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
        let cell = collectionView.cellForItemAtIndexPath(indexPath)
        cell!.layer.cornerRadius = 4
        cell?.backgroundColor = UIColor.whiteColor()
    }
5.自定义圆角带边框的UICollectionViewCell。
//
//  SHomeCell.swift
//
//  Created by wangjie on 16/5/4.
//  Copyright © 2016年 wangjie. All rights reserved.
//

import UIKit

class SHomeCell: UICollectionViewCell {
    
    var titleLabel:UILabel?//title
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        initView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func initView(){
        titleLabel = UILabel(frame: CGRectMake(0, 0, (SCREEN_WIDTH - 20)/3, (SCREEN_WIDTH - 20)/3))
        titleLabel?.layer.cornerRadius = 4
        titleLabel?.layer.borderWidth = 0.5
        titleLabel?.textAlignment = NSTextAlignment.Center
        titleLabel?.layoutMargins = UIEdgeInsets(top:0, left:0, bottom:0, right:0)

        self .addSubview(titleLabel!)
    }
}
6. UIViewController 完整代码。
//
//  SHomeViewController.swift
//
//  Created by wangjie on 16/5/4.
//  Copyright © 2016年 wangjie. All rights reserved.
//

import UIKit

class SHomeViewController:UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    
    var collectionView : UICollectionView?
    var dataArr = NSMutableArray()//数据源
    var headerArr = NSMutableArray()//分组标题
    let headerHeight:CGFloat = 30
    let cellHeight:CGFloat = (SCREEN_WIDTH - 20)/3
    let headerIdentifier:String = "headView"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        initView()
        initData()
    }
    
    func initView(){
        let layout = UICollectionViewFlowLayout()
        self.view.backgroundColor = UIColor.whiteColor()
        layout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);
        layout.minimumInteritemSpacing = 5; // this number could be anything <=5. Need it here because the default is 10.
        layout.minimumLineSpacing = 4.0 //设置行间距
        layout.itemSize = CGSizeMake((SCREEN_WIDTH - 20)/3, (SCREEN_WIDTH - 20)/3) // 20 is 2*5 for the 2 edges plus 2*5 for the spaces between the cells
        
        collectionView = UICollectionView(frame: CGRectMake(0, 20, SCREEN_WIDTH, SCREEN_HEIGHT), collectionViewLayout: layout)
        //注册一个cell
        collectionView!.registerClass(SHomeCell.self, forCellWithReuseIdentifier:"cell")
        collectionView?.delegate = self;
        collectionView?.dataSource = self;
        collectionView?.backgroundColor = UIColor.whiteColor()
        //设置每一个cell的宽高
        self.view.addSubview(collectionView!)
        //注册header
        collectionView!.registerClass(SHomeHeader.classForCoder(), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
        
    }
    
    func initData(){
        initHeaderData()
        initSelectionData()
        self.collectionView?.reloadData()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    //返回多少个组
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        
        return headerArr.count
    }
    
    //返回多少个cell
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dataArr.count
    }
    
    //返回自定义的cell
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! SHomeCell
        let title = dataArr[indexPath.row]
        cell.titleLabel?.text = title as? String
        return cell
        
    }
    
    func initHeaderData() {
        
        headerArr.addObject("header 1")
        headerArr.addObject("header 2")
        headerArr.addObject("header 3")
        
    }
    
    func initSelectionData() {
        
        dataArr.addObject("selection 1")
        dataArr.addObject("selection 2")
        dataArr.addObject("selection 3")
        
    }
    
    
    //设置HeadView的宽高
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize{
        return CGSize(width: SCREEN_WIDTH, height: headerHeight)
    }
    
    //返回自定义HeadView
    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView{
        var v = SHomeHeader()
        if kind == UICollectionElementKindSectionHeader{
            v = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: headerIdentifier, forIndexPath: indexPath) as! SHomeHeader
            let title:String = headerArr[indexPath.section] as! String
            v.titleLabel?.text = title
        }
        return v
    }
    
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        let cell = collectionView.cellForItemAtIndexPath(indexPath)
        cell!.layer.cornerRadius = 4
        cell?.backgroundColor = UIColor.yellowColor()
    }
    
    func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
        let cell = collectionView.cellForItemAtIndexPath(indexPath)
        cell!.layer.cornerRadius = 4
        cell?.backgroundColor = UIColor.whiteColor()
    }
    
}
7. 完整代码见:SwiftCollectionViewDemo

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18230
来自专栏儿童编程

声音功能让儿童编程更有创造性

导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

13940
来自专栏儿童编程

我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

15610
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.2K20
来自专栏儿童编程

什么样的人生才是有意义的人生——没有标准的标准答案

【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

1.8K50
来自专栏儿童编程

一张图理清《梅花易数》梗概

学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

32440
来自专栏儿童编程

儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

22470
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

30340
来自专栏儿童编程

天干地支五行八卦的对应关系

19790
来自专栏儿童编程

《动物魔法学校》儿童学编程Scratch之“外观”部分

导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

19240

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励