Swift开发笔记-Mac OS X 天气预报应用开发(Xcode7.2)
OS X应用开发现状
还好,过年假期,我现在有这个时间来研究,也有这个兴趣来研究。。。。 该App涉及技术点:
目标设计首先用Sketch花了1个小时时间设计了一个App的UI.因为不想把第一个完整App做的有阴影,看着不爽,也想顺便体验切图的流程。
Sketch的plugin很好用,之前的设计师们在PS里面切图还是很苦逼的事情,现在基本上点几下鼠标就OK。 后台数据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
布局首先把切图拖入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 使用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) 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的 由于比较复杂,写在了这篇文章里面 Swift OS X NSColectonView显示网络列表数据 THE END终于搞定了。。。忙活了一个假期 Oh~ 上班第一天就要下雨。。。:( (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |