2019獨角獸企業重金招聘Python工程師標準>>>

• 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 inif 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~ 上班第一天就要下雨。。。:(

轉載于:https://my.oschina.net/mengshuai/blog/614857

總結

以上是生活随笔為你收集整理的Swift开发笔记-Mac OS X 天气预报应用开发(Xcode7.2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。