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普及程度低，市场需求低

网上教程太少，极客学院没有相关的视频，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: "微风",
fl: "",
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/ 
#安装cocoapods
sudo 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

显示网络图片

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

//获得远程图片URL
let imgUrl = data["weather"]!![0]["img"] as! String

//转化为NSURL
let 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~ 上班第一天就要下雨。。。:(