专栏首页macOS 开发学习一步一步,开始上手Mac 开发(二)

一步一步,开始上手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 条评论
登录 后参与评论

相关文章

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

    通过本文,你可以创建你的第一个Mac Application,编译并指定版本号,而且经过练习,你应该掌握:

    代码行者
  • 一步一步,开始上手Mac 开发(三)

    1.1 先选中MasterViewController.xib,重新调整view 的尺寸和排列内部的各个控件,(以你喜欢的方式)让控件看起来更协调,而且能够全部...

    代码行者
  • 开始一步一步学习Message App Extension

    点击右下角打开 Size Frame Dimensions 小图 300x300 中图 408x408 大图 618x618

    君赏
  • 使用MONO在MAC OS上开发——同步日志(一)

      原先打算再写点EXT.NET方面的,由于现在在玩Silverlight和Android,所以不打算写下去了。而且最近很忙,所以发帖也不会很及时。

    雪雁-心莱科技
  • vue开发第一步:用Mac来搭建vue脚手架

    vue开发第一步:用Mac来搭建vue脚手架 安装node与npm 安装vue脚手架 安装node与npm 首先使用node -v命令查看mac是否已安装nod...

    PHP开发工程师
  • 【新手出发】从搭虚拟机开始,一步一步在CentOS上跑起来.Net Core程序

    微软6月26号发布core 1.0版本后,园子里关于这方面的文章就更加火爆了,不管是从文章数量还是大家互动的热情来看,绝对是最热门的技术NO.1。我从去年底开始...

    HOHO
  • 使用MONO在MAC OS上开发——同步日志(二)

    上一篇使用MONO在MAC OS上开发——同步日志(一)讲述了在MAC OS读取配置文件以及写日志,那么只算是完成了基本的配置,下面的才是重点。

    雪雁-心莱科技
  • php一步一步实现mysql协议(二) ——握手初始化

    上面就是mysql客户端和服务端的交互流程,然后结合实际中的抓包工具来看先这个过程。这里使用php的PDO扩展连接数据库并执行一条查询语句,抓包情况如下

    码缘
  • 一步一步开发微信小程序

    小程序的开发与传统的web前端开发极其相似,想必各位技术宅们关心的是如何去开发一个小程序,这里我简单介绍一下如何简单上手开发小程序。

    javascript艺术
  • 从 0 开始手写一个Tomcat,7 步搞定!

    Tomcat,这只3脚猫,大学的时候就认识了,直到现在工作中,也常会和它打交道。这是一只神奇的猫,今天让我来抽象你,实现你!

    Java技术栈
  • 开发一款即时通讯App,从这几步开始

    一套多功能自定义界面库,实现会话列表、聊天、联系人、群管理、弹幕等界面,实现客户一天接入

    腾讯云音视频
  • 开发一款即时通讯App,从这几步开始

    腾讯云通信团队
  • 一步一步教你从零开始写C语言链表

    2、解决数组中,元素个数无法改变的限制(C99的变长数组,C++也有变长数组可以实现)。

    morixinguan
  • 零基础一步一步开始WordPress网站SEO优化教程

    做好了网站,选好了主题,配备了必备插件,基础SEO怎么设置才能避免后面经常改动基础设置,导致关键词排名降低,页面收录消失等问题呢?

    夏末浅笑
  • 从 0 开始手写一个 Mybatis 框架,三步搞定!

    MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码。

    良月柒
  • 从 0 开始手写一个 Mybatis 框架,三步搞定!

    继上一篇手写SpringMVC之后《从0开始手写一个 SpringMVC 框架,向高手进阶!》,我最近趁热打铁,研究了一下Mybatis。MyBatis框架的核...

    Java技术栈
  • 从 0 开始手写一个 Mybatis 框架,三步搞定!

    在手写自己的Mybatis框架之前,我们先来了解一下Mybatis,它的源码中使用了大量的设计模式,阅读源码并观察设计模式在其中的应用,才能够更深入的理解源码。...

    芋道源码
  • 从 0 开始手写一个 Mybatis 框架,三步搞定!

    MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码。

    良月柒
  • 教你一步步发布一个开源库到 JCenter

    这方面的博客网上已经特别多了,所以本篇并不打算仅仅只是记录流程步骤而已,而是尽可能讲清楚,为什么需要有这个步骤,让大伙知其然的同时还知其所以然,那么掌握就会更深...

    请叫我大苏

扫码关注云+社区

领取腾讯云代金券