Swift純代碼走進UICollectionView

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(Home_Cell.self, forCellWithReuseIdentifier:"cell") //注冊一個headView colltionView! .registerClass(Home_HeadView.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! Home_Cell var model = GoodsModel() model = dataArr[indexPath.row] as! GoodsModel let url : NSURL = NSURL(string: model.image_url as String)! cell.imgView!.hnk_setImageFromURL(url) cell.layer.borderWidth = 0.3; cell.layer.borderColor = UIColor.lightGrayColor().CGColor cell.titleLabel!.text = model.short_name cell.priceLabel!.text = "￥"+model.p_price cell.readLabel!.text = "💗"+model.like_count return cell } //返回HeadView的寬高 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHe aderInSection 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/
最終效果圖如下