Swift純代碼 UICollectionView 分組顯示抖僵、Cell圓角、選中變色

上一篇介紹了如何使用swift純代碼構(gòu)建UIColletionView缘揪,本篇繼續(xù)介紹如何對其分組耍群、設(shè)置分組標(biāo)題、cell 圓角找筝、選中變色蹈垢。
效果圖如下:

效果圖
1.設(shè)置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并設(shè)置寬高。
//設(shè)置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.設(shè)置選中顏色及圓角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()//數(shù)據(jù)源
    var headerArr = NSMutableArray()//分組標(biāo)題
    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 //設(shè)置行間距
        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()
        //設(shè)置每一個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")
        
    }
    
    
    //設(shè)置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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末张足,一起剝皮案震驚了整個濱河市触创,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌为牍,老刑警劉巖哼绑,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吵聪,居然都是意外死亡凌那,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門吟逝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帽蝶,“玉大人,你說我怎么就攤上這事块攒±龋” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵囱井,是天一觀的道長驹尼。 經(jīng)常有香客問我,道長庞呕,這世上最難降的妖魔是什么新翎? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮住练,結(jié)果婚禮上地啰,老公的妹妹穿的比我還像新娘。我一直安慰自己讲逛,他們只是感情好亏吝,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盏混,像睡著了一般蔚鸥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上许赃,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天止喷,我揣著相機(jī)與錄音,去河邊找鬼混聊。 笑死启盛,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的技羔。 我是一名探鬼主播僵闯,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼藤滥!你這毒婦竟也來了鳖粟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤拙绊,失蹤者是張志新(化名)和其女友劉穎向图,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體标沪,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡榄攀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了金句。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片檩赢。...
    茶點(diǎn)故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖违寞,靈堂內(nèi)的尸體忽然破棺而出贞瞒,到底是詐尸還是另有隱情,我是刑警寧澤趁曼,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布军浆,位于F島的核電站,受9級特大地震影響挡闰,放射性物質(zhì)發(fā)生泄漏乒融。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一摄悯、第九天 我趴在偏房一處隱蔽的房頂上張望赞季。 院中可真熱鬧,春花似錦射众、人聲如沸碟摆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽典蜕。三九已至,卻和暖如春罗洗,著一層夾襖步出監(jiān)牢的瞬間愉舔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工伙菜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留轩缤,地道東北人。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像火的,于是被迫代替她去往敵國和親壶愤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫馏鹤、插件征椒、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,066評論 4 62
  • 時間:11月20日 學(xué)員:李睿航 任教老師:小美老師 教學(xué)目標(biāo): 一 : 題目3個,游樂場湃累,公園勃救,幼兒園 知道蹺蹺...
    Letnaturetakeit閱讀 220評論 0 0
  • [關(guān)鍵詞]幸運(yùn),感動治力,幸福 5.1在德陽自己出門吃午飯蒙秒,超好吃的一家叫“好吃的一bi”,邊吃邊擔(dān)心自己得禽流感宵统。但...
    wwwbb閱讀 178評論 0 1
  • 《水流朝東》 從長遠(yuǎn)的角度來看晕讲,人生要學(xué)會的一件事是在覺得生活沉悶時明白改變現(xiàn)狀的重要性。 改變不一定會往好的方向...
    點(diǎn)點(diǎn)星燈閱讀 466評論 0 1