在这一篇中,我们使用一个开源控件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,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。
2.3 添加新控件:我们需要显示的详情内容有bugs的名字(name),图片(image),和评分(rating),额外的,我们还需要添加两个Label来说明一下每个区域的含义,界面的最终样子大概如下图
对于名字 (name) 我们使用NSTextField 控件,它具有显示和编辑的功能
对应图片(image)我们使用控件NSImageView
对应评分(rating)我们使用导入的开源控件EDStarRating 控件,为此我们需要从控件库中拖拽一个叫做“Custom View”的控件,后面再设置它
2.4 设置EDStarRating控件,并修改label的文字
上一步里的Custom View是NSView类型,我们需要把它指定为EDStarRating
然后我们把第一个label名称改为Name,第二个labe的名称改为Rating
编译运行程序,如果没有错误,界面大概是下面的样子
😳 Rating下面的控件不见了!别担心,它就在那里,只是我们还没有对它进行设置,接下来我们给控件来绑定到控制器的属性。
记得import EDStarRating.h头文件
当用户点击table view的任意一行时,我们要获取用户选中的Bug数据,并展示详情视图信息,这里我们要处理三个环节:
第一,我们要知道table view 的哪一行被点选了。当table view被选中某行的时候,它会告知它的delegate,通过tableViewSelectionDidChange方法告知被选中的行(row),我们需要在这个方法处理。
第二,我们要获取选中行相关的数据
第三,根据数据,显示详情视图信息
2.5 MasterViewController.m中的代码实现
在Mac OSX10.10 之前,初始化view的代码需要写在控制器的loadView方法中,现在编译运行,随意点选table view 中的某一行,我们就可以看到实际效果了
由于image view 默认没有缩放图片,导致图片看起来比较小,我们可以在xib中选中image view 设置它的“Scaling”属性,达到想要的效果
再次运行,查看效果
现在你可以点击某一行,右边将会显示出对应的界面效果,你也可以更改名称里的文字和评分,但它们都不会有什么效果,下面我们来实现添加和删除的功能
首先我们要添加两个按钮(Gradient Button),一个增加新行,设置image为 NSAddTemplate,另一个删除选中行,设置image 为NSRemoveTemplate ,效果如下:
2.6 在MasterViewController.m中分别为两个按钮添加操作方法(为按钮添加方法的步骤与iOS相同,选中按钮控件,按住control键拖拽到对应文件类中)addBug 和deleteBug,代码如下:
点击运行,如果没有错误的话,我们就可以通过+按钮来添加一个新行,-按钮来删除选中的行。现在我们已经实现在table view 中添加或者删除数据来,那么接下来,我们来实现编辑现有的数据功能,同样,我们要为NSTextField添加事件监听方法(与iOS的UITextField一样)
再次运行程序,没有错误的话,我们可以在右侧详情视图的text field中修改左侧table view 选中行的名称了。接下来我们实现修改评分功能,这个非常容易,只要实现EDStarRating控件的一个代理方法就够啦。看下图:
运行程序,现在我们可以进行评分修改功能了,在右侧详情视图的操作都会保存到数据模型中,并且会影响到左侧table view 数据展示。
好了,现在我们只剩下最后一件事情了:允许用户更换图片! 那么我们先在image view下添加一个按钮来让用户点击,当用户点选按钮时,我们要给用户提供一个图片选择的窗口。
2.7 为新添加的按钮增加事件处理:(与之前的+按钮操作相同)代码如下:
在按钮响应的方法里,我们使用了一个新的控件类:IKPictureTaker,这个控件可以让你从电脑中选取图片或者从摄像头拍照,当用完成图片选择时,IKPictuerTaker会调用代理回调方法通知控制器,关于IKPictureTaker更详细的使用方法,有兴趣的可以到这个链接学习IKPictureTaker
为了能够让IKPictureTaker正常使用,需要导入#import <Quartz/Quartz.h> 并且要手动添加Quartz.framework到工程项目中
经过上面的设置,现在运行程序,如果没有出错,你就可以得到一个可以进行图片替换啦
关于本篇的代码,可以从github上下载demo code
到这里大家已经算初步入门了,这仅仅是个开始,后面还有一篇关于应用的细化小知识,抽空翻译整理后再补上...