Swift开发笔记-Mac OS X 天气预报应用开发(Xcode7.2)

概述OS X应用开发现状 目标设计 后台数据Api Xcode Start 新建项目 布局 取消缩放 设置Window居中 Layout 设置ViewController背景 初始化UI,建立Outlet Cocoapod导入第三方开源库 使用Alamofire获取远程api天气数据并显示 显示网络图片 解析数据并显示在CollectionView THE END OS X应用开发现状 Mac OS普 OS X应用开发现状 目标设计 后台数据Api Xcode Start 新建项目 布局 取消缩放 设置Window居中 Layout 设置ViewController背景 初始化UI,建立Outlet Cocoapod导入第三方开源库 使用Alamofire获取远程api天气数据并显示 显示网络图片 解析数据并显示在CollectionView THE END OS X应用开发现状 Mac OS普及程度低，市场需求低 网上教程太少，极客学院没有相关的视频，cocoachina翻了10分钟没找到个入门教程。 OC/Swift程序员大多都去开发iPad/iPhone的App 当当的书就只有两本仅仅提到了OS X的，其他都是iOS。（我都买了也看了） 国内程序员们靠OS X 的Appstore赚钱的太少。

还好，过年假期，我现在有这个时间来研究，也有这个兴趣来研究。。。。

该App涉及技术点：

Xcode auto Layout NSVIEwController NSTextFIEld NSCollectionVIEw【坑太多】 NSImageVIEw CocoaPods Alamofire SwiftyJsON 目标设计

首先用Sketch花了1个小时时间设计了一个App的UI.因为不想把第一个完整App做的有阴影，看着不爽，也想顺便体验切图的流程。

其实还有两个功能没有设计上去，一个是穿衣指数，另外就是城市切换，当然本来想的是每个城市有个不同的背景图片会更好。这个有时间再去迭代.

Sketch的plugin很好用，之前的设计师们在PS里面切图还是很苦逼的事情，现在基本上点几下鼠标就OK。

其实我开着Sketch也不用标坐标给自己看...导出几张背景图搞定。

后台数据API

天气预报的数据网上大把，juhe.cn或者APIstore.baIDu.com有很多，用的URL不公布了，Json格式如下：

{    ret: 0,city: "北京",weather: [        {            date: "2016-02-13",week: "星期六",lunar: "正月初六",temp: "-6℃~4℃",weather: "阴转多云",wind: "北风4-5 级",fl: "",img: "http://mobile.weather.com.cn/images/dayb/02.png",dressing_index: "冷",dressing_advice: "天气冷，建议着棉服、羽绒服、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣、冬大衣或厚羽绒服。",uv_index: "弱"        },{            date: "2016-02-14",week: "星期日",lunar: "正月初七",temp: "-6℃~1℃",weather: "晴",wind: "微风",img: "http://mobile.weather.com.cn/images/dayb/00.png"        },...    ]}

Xcode Start 新建项目

首先创建一个OS X的 Application

下一步选择使用Swift

布局

首先把切图拖入Assets.xcassets文件夹

然后单击Main.storyBoard进入UI界面(Interface Builder)

取消缩放

取消OS X 的最大化与窗口缩放功能，是因为UI设计不允许全屏使用

设置Window居中

默认App打开时与所在的设备相对位置，这里设为水平垂直居中

Layout

点击VIEwController里面的VIEw开始拖入控件并autoLayout,Layout方式与iOS相同，尽量使用autolayout,Update Frames后，保证没有waring.

按住Ctrl然后拖动当前的imageVIEw到父级的VIEw就可以设置与父级vIEw的位置关系，从而确定imageVIEw的位置，如果在确定ImageVIEw位置计算上存在分歧（ambiguous）就会出现waring，虽然可能不会影响程序运行结果，但是我们是严谨的程序员不是么？...为什么允许waring存在。

依次按照布局画好，另外布局有两种方案，就是是否启用nsstackview的问题，nsstackview有vertical horizontal两种，类似AndroID里面的linearlayout,主要作用是在窗口缩放，以及动画的时候，能保持很好的相对比例，不至于UI错乱，另外的作用就是动态创建时，代码赶紧很多不需要额外的写constraints代码。
如下所示，布局花费时间比较长。

另外的方案不使用StackVIEw直接布局
整体页面比较简单：

完成后如下所示：

详细请搜索[swift AutoLayout]

设置VIEwController背景

我在Interface Builder没找到更改NSVIEw背景的方法，采用了如下代码方式解决。

1.最外层的NSVIEw拖到VIEwController中，建立Outlet，命名为Box

2.VIEwController.swft vIEwDIDLoad(){}中增加

self.vIEw.wantsLayer = true

3.VIEwController.swft vIEwWillAppear(){}中增加

//background为Assets.xcassets中资源名称Box.layer?.backgroundcolor = NScolor(patternImage:NSImage(named: "background")!).CGcolor

初始化UI,建立Outlet

把需要 *** 作的NS对象从Interface Builder选择Referencing Outlets然后拖到编辑器中。

会自动创建以下代码

@IBOutlet weak var windLevel: NSTextFIEld!    @IBOutlet weak var dateLabel: NSTextFIEld!    @IBOutlet weak var weatherText: NSTextFIEld!    @IBOutlet weak var tempLabelLow: NSTextFIEld!    @IBOutlet weak var tempLabelHigh: NSTextFIEld!    @IBOutlet weak var weatherIcon: NSImageVIEw!

Cocoapod导入第三方开源库

1.在命令行依次执行以下代码，安装cocoapods：

#更换taobao镜像gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/#安装cocoapodssudo gem install cocoapods

2.关闭Xcode项目，进入项目目录，在Weather-Forcast.xcodeproj文件同级目录创建文件podfile，文件内容如下：

platform :osx,'10.11'use_frameworks!pod 'SwiftyJsON',:git => 'https://github.com/SwiftyJsON/SwiftyJsON.git'pod 'Alamofire','~> 3.0'

3.打开Weather-Forcast.xcworkspace，注意不是之前的Weather-Forcast.xcodeproj
4.import Alamofire不报错说明导入正常，项目结构如下图所示

使用Alamofire获取远程API天气数据并显示

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 {                    ...                                    }                                        }

其中data实际为NSDictionary，可以直接使用

self.windLevel.stringValue = data["weather"]!![0]["wind"] as! String

将Json数据显示到windLevel（NSTextFIEld）
另外因为导入了SwiftyJsON也可以使用如下方式，优雅解析

let Json = JsON(data)self.windLevel.stringValue = Json["weather"][0]["wind"].string

显示网络图片

显示图片第三方类库很多，这里采用原生的方式：

//获得远程图片URLlet imgurl = data["weather"]!![0]["img"] as! String//转化为NSURLlet url:NSURL = NSURL(string:imgurl)!//转为NSImage对象self.weatherIcon.image = NSImage(byReferencingURL: url)

运行之后如下图所示

解析数据并显示在CollectionVIEw

现在就剩下最恶心的NSCollectionVIEw了，恶心的原因是XCode 7.2在Interface Builder的
NSCollectionVIEw有个BUG,只要拖进来，默认的segue会直接报错提示:UnkNown segue relationship: Prototype

由于比较复杂，写在了这篇文章里面

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

THE END

终于搞定了。。。忙活了一个假期 Oh~ 上班第一天就要下雨。。。:(

总结

以上是内存溢出为你收集整理的Swift开发笔记-Mac OS X 天气预报应用开发(Xcode7.2)全部内容，希望文章能够帮你解决Swift开发笔记-Mac OS X 天气预报应用开发(Xcode7.2)所遇到的程序开发问题。

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