Swift 纯代码走进 UICollectionView

社区开发Bison • 于 2015-10-29 17:14:11 +0800 • 最后由 iBcker2015-11-10 04:38:06 +0800 11362 阅读

file

Swift对于一门新的iOS编程语言,他的崛起是必然的

我们这群老程序员们学习新的技能也是必然的

不接受新技能将被这大群体无情的淘汰

So 我欣然接受这门看似不成熟的语言

下面我们说说Swift中比较常见的控件UICollectionView

首先我们设置一个全局的UICollectionView和一个数据源

var colltionView : UICollectionView?
var dataArr = NSMutableArray()

然后设置UICollectionView的3个代理
UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout
接下来我们要做的是override func viewDidLoad()方法中初始化一些必要的对象

```

override func viewDidLoad() {     super.viewDidLoad()     var layout = UICollectionViewFlowLayout()     colltionView = UICollectionView(frame: CGRectMake(0, 0, width, height), collectionViewLayout: layout)     //注册一个cell     colltionView! .registerClass(HomeCell.self, forCellWithReuseIdentifier:"cell")     //注册一个headView     colltionView! .registerClass(HomeHeadView.self, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "headView")     colltionView?.delegate = self;     colltionView?.dataSource = self;

    colltionView?.backgroundColor = UIColor.whiteColor()     //设置每一个cell的宽高     layout.itemSize = CGSizeMake((width-30)/2, 250)     self.view .addSubview(colltionView!)     self .getData() } ```

然后我们实现UICollectionView的代理方法

``` //返回多少个组 func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {

    return 1 } //返回多少个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! HomeCell     var model = GoodsModel()     model = dataArr[indexPath.row] as! GoodsModel     let url : NSURL = NSURL(string: model.imageurl as String)!     cell.imgView!.hnksetImageFromURL(url)     cell.layer.borderWidth = 0.3;     cell.layer.borderColor = UIColor.lightGrayColor().CGColor     cell.titleLabel!.text = model.shortname     cell.priceLabel!.text = "¥"+model.pprice     cell.readLabel!.text = "💗"+model.likecount     return cell } //返回HeadView的宽高 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize{

    return CGSize(width: width, height: height/1.6) }

//返回自定义HeadView或者FootView,我这里以headview为例 func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView{     var v = Home_HeadView()     if kind == UICollectionElementKindSectionHeader{

    v = colltionView!.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "headView", forIndexPath: indexPath) as! Home_HeadView     }     return v } //返回cell 上下左右的间距 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets{     return UIEdgeInsetsMake(5, 10, 5, 10) }

```

然后我们来获取数据,这里的话我用的是Alamofire进行的网络请求,URL不方便透露

``` //获取数据 func getData(){     Alamofire.request(.GET, GoodsUrl).responseJSON() { (req, _, JSON, _) -> Void in

        if let j = JSON as? NSDictionary{             var data = j.valueForKey("data")as! NSArray

            for dict in data{                 var model = GoodsModel()                 model.Analytical(dict as! NSDictionary)                 self.dataArr.addObject(model)             }

            self.colltionView!.reloadData()         }     } }

```

接下来让我们看下cell里面究竟写了些什么玩意

```

class Home_Cell: UICollectionViewCell {

    let width = UIScreen.mainScreen().bounds.size.width//获取屏幕宽     var imgView : UIImageView?//cell上的图片     var titleLabel:UILabel?//cell上title     var priceLabel:UILabel?//cell上价格     var readLabel:UILabel?//cell上的阅读量

override init(frame: CGRect) {

    super.init(frame: frame)     //初始化各种控件     imgView = UIImageView(frame: CGRectMake(0, -10, (width-30)/2, 200))     self .addSubview(imgView!)     titleLabel = UILabel(frame: CGRectMake(5, CGRectGetMaxY(imgView!.frame)-12, (width-40)/2, 50))     titleLabel?.numberOfLines = 0     titleLabel?.font = UIFont.boldSystemFontOfSize(14.0)     titleLabel?.textColor = UIColor.lightGrayColor()     self .addSubview(titleLabel!)

    priceLabel = UILabel(frame: CGRectMake(5, CGRectGetMaxY(titleLabel!.frame), (width-40)/2/2, 20))     priceLabel?.numberOfLines = 0     priceLabel?.font = UIFont.boldSystemFontOfSize(14.0)     priceLabel?.textColor = UIColor.lightGrayColor()     self .addSubview(priceLabel!)

    readLabel = UILabel(frame: CGRectMake((width-30)/2/2, CGRectGetMaxY(titleLabel!.frame), (width-40)/2/2, 20))     readLabel?.numberOfLines = 0     readLabel?.textAlignment = NSTextAlignment.Right     readLabel?.font = UIFont.boldSystemFontOfSize(14.0)     readLabel?.textColor = UIColor.lightGrayColor()     self .addSubview(readLabel!)

}

required init(coder aDecoder: NSCoder) {     fatalError("init(coder:) has not been implemented") }

}

```

是不是还觉得缺少点什么?没错,我们的headview是不是还没整啊?
接下来呢,我们看下UICollectionView的headview该怎么设置
重点在这里!首先headview要继承UICollectionReusableView
然后我们这个.m文件里面并没有看到override func viewDidLoad()这样的方法
那我们怎么办呢?
接下来就看我的了
我们点到我们继承的UICollectionReusableView里面去看里面有些什么方法
功夫不负有心人,😄终于找到了一个可以让我们用的方法
``` override func applyLayoutAttributes(layoutAttributes: UICollectionViewLayoutAttributes!){

} ```

我们可以把要自定义的UI 请求数据什么的都放这方法里面
也就相当于我们VC里面的override func viewDidLoad()这个方法
教程到结束
有任何问题可以留言,定期抽时间回复

版权归©Bison所有 未经允许不得转载。

 > 更多经验请点击
原文在:http://www.allluckly.cn/
 >最终效果图如下
(LBPersonalPageDemo)


技术交流群:511040024

回复: 14
  • iBcker 2015-10-29 17:39:51 +0800

    如静态库般Man😁

  • Bison 2015-10-29 17:41:11 +0800

    @iBcker 😄,站长么、、、、很荣幸呀。。。

  • Bison 2015-10-29 17:48:07 +0800

    @iBcker 有管理员之类的职位么、。。😄,随便赏赐我一个吧。。。。。

  • iBcker 2015-10-29 19:16:37 +0800 2

    @Bison 鉴于我目前很穷,先打赏一块钱😁

  • Bison 2015-10-29 19:21:22 +0800

    @iBcker 还可以打赏么。。。。。在哪开通呀。。。。多谢咯。。。😄

  • iBcker 2015-10-29 19:26:44 +0800 2

    @Bison 你支付宝···不过你这个打赏的提议不错!😄

  • Bison 2015-10-29 19:30:45 +0800 2

    @iBcker 是啊,感觉挺好的。。。。简书那个网站有。。。。然后我也就模仿搞了个。。。。😄

  • hugrup 2015-10-29 19:34:06 +0800

    @iBcker 来个一块钱的

    @Bison 你俩也是醉了,聊了一屏幕的表情···

    我也来一个 😄

  • Bison 2015-10-29 19:35:09 +0800

    @hugrup 这表情挺好玩的啊。。。。😓。。。。多来几个😄

  • kelby 2015-10-30 04:32:34 +0800

    楼上几位醉了 :joy:

  • adow 2015-10-30 17:20:38 +0800

    和 UITableViewCell 一样,UICollectionViewCell 最好在 contentView 上面添加子控件,不然有的时候会出现一些奇怪的问题,比如修改选中颜色什么的,还有如果要用 AutoLayout, 必须在 contentView 上面。

  • janesy 2015-10-31 00:23:54 +0800

    😄,,,我也来打赏一个

  • Bison 2015-11-10 04:24:47 +0800

    @iBcker 为啥我刚刚发布的文章不显示图片了呢。。。。

  • iBcker 2015-11-10 04:38:06 +0800

    @Bison 是不是连接啥的没对?哪个?我看下

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,见 Emoji cheat sheet
  • @name 会链接到用户页面,并会通知他
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
Ctrl+Enter