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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Vue学习笔记之表单绑定输入

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

7610
来自专栏JackeyGao的博客

在网页中显示ansi终端颜色

终端命令为了可以友好的显示大多数都支持了颜色显示。 在终端中良好的颜色显示, 能够让我们处理问题更加高效,但是在运维开发中, 难免要在 web 网页中操作服务器...

39320
来自专栏lhyt前端之路

前端路由0.前言1.哈希路由2.history路由

后端有后端路由,根据路由返回特定的网页,代表者是传统的mvc模式,模板引擎+node。前端也有前端的路由,我们用三大框架做spa的时候,总是和路由离不开关系。主...

18720
来自专栏全栈之路

vue项目引入markdown

git地址:https://github.com/showdownjs/showdown 其实引入markdown挺简单的:

88110
来自专栏飞雪无情的博客

Android技术文档翻译--工具属性(Tools Attributes)

原文地址 http://tools.android.com/tech-docs/tools-attributes

12630
来自专栏Crossin的编程教室

在 Win 控制台中实现菜单

本教室的 hymyg 同学实现了两个控制台下的实用模块,发在了论坛上。我觉得挺不错的,于是分享其中的一个给大家。对项目感兴趣,想进一步了解细节的,可以在公众号里...

29950
来自专栏向治洪

用xml来编写动画

我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法。不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,...

22750
来自专栏互联网软件技术

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1)

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费

39060
来自专栏小俊博客

Windows10中的键盘快捷方式

Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌...

16620
来自专栏从零开始学自动化测试

python测试开发django-7.模板继承

打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了。

10730

扫码关注云+社区

领取腾讯云代金券