一步一步,开始上手Mac 开发(二)

在这一篇中,我们使用一个开源控件EDStarRating对Bug进行rate的设置,你可以从这里下载Demo Resources,解压后拖入工程。

2.1 创建新的分组:Views, Helpers,Art,并将文件组织如下:

添加分组和文件

开始创建ScaryBugs详情展示部分,这就开始动手吧^_^

在iOS中,如果想展示下一个界面,一般需要创建两个不同的view,在用户操作table view的某一行时,切换不同的view来进行显示。

在OSX中,有一点不同,因为没有像iphone那样屏幕尺寸的限制,所以,只需要把view弄的再大一些我们可以在同一个view中添加更多的的内容。

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

拖拽后的view


2.3 添加新控件:我们需要显示的详情内容有bugs的名字(name),图片(image),和评分(rating),额外的,我们还需要添加两个Label来说明一下每个区域的含义,界面的最终样子大概如下图

对于名字 (name) 我们使用NSTextField 控件,它具有显示和编辑的功能

对应图片(image)我们使用控件NSImageView

对应评分(rating)我们使用导入的开源控件EDStarRating 控件,为此我们需要从控件库中拖拽一个叫做“Custom View”的控件,后面再设置它

添加控件后的view

2.4 设置EDStarRating控件,并修改label的文字

上一步里的Custom View是NSView类型,我们需要把它指定为EDStarRating

然后我们把第一个label名称改为Name,第二个labe的名称改为Rating

设置EDStarRating和label

编译运行程序,如果没有错误,界面大概是下面的样子

运行结果

😳 Rating下面的控件不见了!别担心,它就在那里,只是我们还没有对它进行设置,接下来我们给控件来绑定到控制器的属性。

记得import EDStarRating.h头文件

设置IBOutlet 属性

当用户点击table view的任意一行时,我们要获取用户选中的Bug数据,并展示详情视图信息,这里我们要处理三个环节:

第一,我们要知道table view 的哪一行被点选了。当table view被选中某行的时候,它会告知它的delegate,通过tableViewSelectionDidChange方法告知被选中的行(row),我们需要在这个方法处理。

第二,我们要获取选中行相关的数据

第三,根据数据,显示详情视图信息

2.5 MasterViewController.m中的代码实现

MasterViewController.m中的代码实现

在Mac OSX10.10 之前,初始化view的代码需要写在控制器的loadView方法中,现在编译运行,随意点选table view 中的某一行,我们就可以看到实际效果了

运行效果

由于image view 默认没有缩放图片,导致图片看起来比较小,我们可以在xib中选中image view 设置它的“Scaling”属性,达到想要的效果

调整image view 的Scaling

再次运行,查看效果

设置image view 后的运行效果

现在你可以点击某一行,右边将会显示出对应的界面效果,你也可以更改名称里的文字和评分,但它们都不会有什么效果,下面我们来实现添加和删除的功能

首先我们要添加两个按钮(Gradient Button),一个增加新行,设置image为 NSAddTemplate,另一个删除选中行,设置image 为NSRemoveTemplate ,效果如下:

拖拽两个按钮并设置

2.6 在MasterViewController.m中分别为两个按钮添加操作方法(为按钮添加方法的步骤与iOS相同,选中按钮控件,按住control键拖拽到对应文件类中)addBug 和deleteBug,代码如下:

按钮添加操作方法

点击运行,如果没有错误的话,我们就可以通过+按钮来添加一个新行,-按钮来删除选中的行。现在我们已经实现在table view 中添加或者删除数据来,那么接下来,我们来实现编辑现有的数据功能,同样,我们要为NSTextField添加事件监听方法(与iOS的UITextField一样)

NSTextField 添加事件响应方法

再次运行程序,没有错误的话,我们可以在右侧详情视图的text field中修改左侧table view 选中行的名称了。接下来我们实现修改评分功能,这个非常容易,只要实现EDStarRating控件的一个代理方法就够啦。看下图:

EDStarRatingProtocol 方法实现

运行程序,现在我们可以进行评分修改功能了,在右侧详情视图的操作都会保存到数据模型中,并且会影响到左侧table view 数据展示。

好了,现在我们只剩下最后一件事情了:允许用户更换图片! 那么我们先在image view下添加一个按钮来让用户点击,当用户点选按钮时,我们要给用户提供一个图片选择的窗口。

添加Push Button

2.7 为新添加的按钮增加事件处理:(与之前的+按钮操作相同)代码如下:

Change picture 按钮事件处理

在按钮响应的方法里,我们使用了一个新的控件类:IKPictureTaker,这个控件可以让你从电脑中选取图片或者从摄像头拍照,当用完成图片选择时,IKPictuerTaker会调用代理回调方法通知控制器,关于IKPictureTaker更详细的使用方法,有兴趣的可以到这个链接学习IKPictureTaker

为了能够让IKPictureTaker正常使用,需要导入#import <Quartz/Quartz.h> 并且要手动添加Quartz.framework到工程项目中

添加Quartz.framework

经过上面的设置,现在运行程序,如果没有出错,你就可以得到一个可以进行图片替换啦

关于本篇的代码,可以从github上下载demo code

到这里大家已经算初步入门了,这仅仅是个开始,后面还有一篇关于应用的细化小知识,抽空翻译整理后再补上... 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容