• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

swift 第八课 CollectView的 添加 footerView 、headerView

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

collectView 也是 iOS 很常用的瀑布流展示控件了,虽然使用过很多次,一直没有系统的总结过,尤其是在添加header 和footer view 的时候,很常见,写起来总觉得不是很流畅,这里着重备份下,留待备用……

这里贴上最终的成品样子:

 

刚刚做demo 做了好久,这个控件,我也是醉了……,既然做完了,写步骤。。。。。。

 

在铺设下自己创建的类:

再次提示 这个 header 和footer 一定要分开继承,刚刚自己就是在这里 耽搁了大部分的时间

 

约束完成之后,主要提示下 ,自己耽误这么长时间,做这个demo 的主要知识点吧:

1.在 storybord 写的view 布局,不用在 vc里面注册( regest 之类的 )了,这个是比较省事的

2.我还没有在storybord 找到 collectcell 的 layout 设置项,所以直接贴上layout 代码了,(如果真的有这个设置,希望找到后在回来修改……)

 

我果然还是习惯撸代码,语言不是我强项……唉,不懂的时候,再偷偷看注释吧

collectCell 类:

class CollectionViewCell: UICollectionViewCell {
    /**
demo 特别简单 ,这里只加载了一个按钮
*/ @IBOutlet weak var textButton: UIButton
! }

collect header and footer

import UIKit

class CollectionHeader: UICollectionReusableView {
   /**
好久不用代理了,觉得 这么写会比较简单触发点击事件……
*/ var headerButtonClick:((UIButton)
->Void)? @IBAction func didHeadButtonClick(_ sender: UIButton) { if (self.headerButtonClick != nil) { self.headerButtonClick!(sender) } } }
import UIKit

class CollectionFooter: UICollectionReusableView {
    
    var footerButtonClick:((UIButton)->Void)?
    
    @IBAction func didFooterButtonClick(_ sender: UIButton) {
        
        if self.footerButtonClick != nil {
            
            self.footerButtonClick!(sender )
        }
    }
}

view controller 类

import UIKit

class ViewController: UIViewController , UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var myCollectionView: UICollectionView!
 
    lazy var collectArr : Array<String> = {
        var arr = Array<String>()
        for i in 0...26{
            
            var str = String(format:"%c",putchar(64 + i))
            arr.append(str)
        }
        return arr
    }()
    
    /**
     flow layout
     */
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
        
        return CGSize.init(width: self.view.frame.size.width/3-30, height: 50)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets{
        
        return  UIEdgeInsets.init(top: 5, left: 5, bottom: 5, right: 5)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize{
        
        return CGSize(width:self.view.frame.size.width,height:60)
    }

   /**
    data source
     */
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.collectArr.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectCell", for: indexPath) as! CollectionViewCell
        cell.textButton.setTitle(self.collectArr[indexPath.item], for: .normal)
        return cell
    }
    
    /**
     delegate
     */
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
       collectionView .deselectItem(at: indexPath, animated: true)
    }
    
/**
重要的事情 说三遍,这已经这篇博客第三遍 提到 footer 和header 要分开继承,自己就是在这里耽搁了许久
在就是 这里好多的关键字要对应好
*/ func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath)
-> UICollectionReusableView{ var reusableView :UICollectionReusableView? if kind == UICollectionElementKindSectionFooter { let footer :CollectionFooter = collectionView.dequeueReusableSupplementaryView(ofKind:UICollectionElementKindSectionFooter, withReuseIdentifier: "footerView", for: indexPath) as! CollectionFooter footer.footerButtonClick = { ( btn: UIButton ) in print("footer view 按钮被点击") } reusableView = footer
}
else if kind == UICollectionElementKindSectionHeader { let header :CollectionHeader = collectionView.dequeueReusableSupplementaryView(ofKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView", for: indexPath) as! CollectionHeader
header.headerButtonClick
= { (btn :UIButton) in print("header view 按钮被点击") } reusableView = header } return reusableView! } /**
view controller 系统的方法
*/
override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }

 

终于写完了,有补充的积极给我留言……

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap