Swift OS X NSColectonView显示网络列表数据

概述目标 创建CollectionView 自定义Collection View Item 代码部分 目标 将远程Api数据（Json）使用alamofire解析，使用swiftyjson格式化并显示到CollectionView中 远程返回的Json格式如下 { ret: 0, city: "深圳", weather: [ { date: "2016- 目标 创建CollectionView 自定义Collection View Item 代码部分 目标

将远程API数据（Json）使用alamofire解析，使用swiftyJson格式化并显示到CollectionVIEw中
远程返回的Json格式如下

{    ret: 0,city: "深圳",weather: [    {        date: "2016-02-14",week: "星期日",lunar: "正月初七",temp: "10℃~19℃",weather: "小雨",wind: "东北风3-4 级",fl: "",img: "http://mobile.weather.com.cn/images/dayb/07.png",dressing_index: "较舒适",dressing_advice: "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",uv_index: "最弱"    },{        date: "2016-02-15",week: "星期一",lunar: "正月初八",temp: "9℃~13℃",weather: "小雨转阴",img: "http://mobile.weather.com.cn/images/dayb/07.png"    },{        date: "2016-02-16",week: "星期二",lunar: "正月初九",temp: "10℃~14℃",weather: "阴",wind: "微风",img: "http://mobile.weather.com.cn/images/dayb/02.png"    },{        date: "2016-02-17",week: "星期三",lunar: "正月初十 ",temp: "11℃~17℃",weather: "阴转多云",...}

最终显示效果为：

创建CollectionVIEw

首先在Interface Builder中拖入一个CollectionVIEw

当前的Xcode 7.2 会提示错误：...Main.storyboard: UnkNown segue relationship: Prototype
这是Xcode 7.2的BUG,也许以后Apple会Fix

这里需要删除掉segue与Collection VIEw Item，后面自己定义。

然后修改下CollectionVIEw的属性
Scroll DIEction为水平方向

还有两步 *** 作进行关联

将新建的CollectionVIEw与VIEwController建立Outlet，因为后面要在VIEwController中在加载数据之后刷新CollectionVIEw数据

将CollectionVIEw的datasource指向VIEwController，也就是说VIEwController同时充当CollectionVIEw 的数据源

自定义Collection VIEw Item

新建一个文件，选择OS X ->Source->Cocoa Class,并点击Next

输入Class:DayDetailsItem,继承自NSCollectionVIEwItem，同时创建XIB file

在DayDetailitem.swift中创建以下变量

@IBOutlet weak var weatherIcon: NSImageVIEw!@IBOutlet weak var tempLabel: NSTextFIEld!@IBOutlet weak var weekLabel: NSTextFIEld!

打开新建的DayDetailsItem.xib,绘制布局

找到Object并拖动到document Outline区域

并将Object的Class改为刚才创建的DayDetailitem

分别在三个元素点击右键，Reference Outlets中与Object关联

布局相关 *** 作已经完成下面开始写Controller的代码部分

代码部分

打开VIEwController.swift ，导入Alamofire

import Alamofire

让VIEwController实现UICollectionVIEwDataSource

class VIEwController: NSVIEwController,NSCollectionVIEwDataSource {    ...}

创建datas变量，保存API返回的JsON 数组

var datas: [JsON] = []

使用Alamofire获取数据

func getWeather(){                let url = "http://some-weather-API-url/"        Alamofire.request(.GET,url,parameters: ["foo": "bar"])            .responseJsON { response in                               if let data = response.result.value {                    let result = JsON(data)                                        //将Json 数据中的每天数据数组赋值给到self.datas                    self.datas = result["weather"].arrayValue                                        //刷新CollectionVIEw                    self.dayDetailCollectionVIEw.reloadData()                                    }                                        }

重写CollectionVIEwDataSource的两个方法

//定义CollectionVIEw中Item的数量func collectionVIEw(collectionVIEw: NSCollectionVIEw,numberOfItemsInSection section: Int) -> Int {        //datas为定义的[JsON]数据        return self.datas.count    }    //处理collectionVIEw的Item 即DayDetailsItem  func collectionVIEw(collectionVIEw: NSCollectionVIEw,itemForRepresentedobjectAtIndexPath indexPath: NSIndexPath) -> NSCollectionVIEwItem {        let item = collectionVIEw.makeItemWithIDentifIEr("DayDetailsItem",forIndexPath: indexPath) as! DayDetailsItem                /** indexPath.item为当前item的序号 从0开始         *  另外item为DayDetailsItem，data成员变量在后面定义         */        item.data = self.datas[indexPath.item]                        return item    }

打开DayDetailsItem.swift

////  DayDetailsItem.swift//  Weather////  Created by Kint on 16/2/13.//  copyright © 2016年 Kint. All rights reserved.//import Cocoaclass DayDetailsItem: NSCollectionVIEwItem {    @IBOutlet weak var weatherIcon: NSImageVIEw!    @IBOutlet weak var tempLabel: NSTextFIEld!    @IBOutlet weak var weekLabel: NSTextFIEld!        //data在赋值时去执行self.setupData()，用JsON格式方便API解析    var data:JsON?{        dIDSet{            self.setupData()        }    }    overrIDe func vIEwDIDLoad() {        super.vIEwDIDLoad()    }    func setupData(){        if let tempLabel = self.data?["temp"]{            self.tempLabel.stringValue = tempLabel.string!        }                if let weekLabel = self.data?["week"]{            self.weekLabel.stringValue = weekLabel.string!        }                if let icon = self.data?["img"]{            let url:NSURL = NSURL(string:icon.string!)!            self.weatherIcon.image = NSImage(byReferencingURL: url)        }    }    }

OK，Done！运行一下

现在按照API返回的数量超过5个，实际上这是可以滚动的。所以解析的时候只对前五个赋值即可。

总结

以上是内存溢出为你收集整理的Swift OS X NSColectonView显示网络列表数据全部内容，希望文章能够帮你解决Swift OS X NSColectonView显示网络列表数据所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。