一步一步，开始上手Mac开发（一）

https://www.jianshu.com/p/feadeb1ae7ae

周末闲暇&＃xff0c;在网上看到一篇Mac开发教程How to Make a Simple Mac App on OS X 10.7 Tutorial: Part 1/3&＃xff0c;鉴于Mac开发资料较少&＃xff0c;翻译整理&＃xff0c;也算是自己练习的一个过程记录。

学习目标&＃xff1a;

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

1. 如何使用Xcode 创建Mac app

2. 一个Mac app 的基本结构

3.  Mac OSX开发与iOS开发的不同

4. 怎样使用Table Views &＃xff08;比如添加或者删除行&＃xff09;

5. 怎样使用文本&＃xff08;text field&＃xff09;&＃xff0c;按钮&＃xff08;button&＃xff09;&＃xff0c;图片&＃xff08;image view&＃xff09;

6. 图片&＃xff08;image view&＃xff09;的获取方式&＃xff08;从硬盘或者摄像头&＃xff09;

7. 窗口&＃xff08;window&＃xff09;的尺寸控制

实践开始&＃xff1a;

创建一个Mac工程其实与iOS工程非常相似&＃xff0c;都使用Xcode&＃xff0c;只是选择的工程模版不同?

1.1 首先开启Xcode 创建工程

创建新Xcode 工程

1.2 选择mac OS 标签&＃xff0c;Application栏中的Cocoa Application 然后点击next下一步

选取工程模版

1.3 配置工程信息和开发语言&＃xff08;本文根据英文原文&＃xff0c;使用Objective-C 开发&＃xff09;

配置项目工程信息

1.4 选择保存的文件夹路径后&＃xff0c;点击Create完成工程创建

创建后的界面

项目就绪&＃xff0c;现在你已经拥有一个具有空窗口的Mac Application了&＃xff0c;点击运行&＃xff0c;Xcode将开始编译这个App&＃xff0c;当Xcode编译完成后&＃xff0c;你就可以看到这个App的主窗口了&＃xff08;尽管它上面空空如也&＃xff09;&＃xff0c;到这步&＃xff0c;对你来说意味着三件事&＃xff1a;

1. 选择模版没有出错并且它能正常工作

2. 一个好的编译开端&＃xff1a;尽管这是一个空窗口项目

3. 与iOS开发有很多不同&＃xff1a;Mac开发的窗口&＃xff08;window&＃xff09;不像iPhone或iPad固定屏幕尺寸&＃xff0c;它完全可变的&＃xff1b;Mac app 可以拥有多个窗口&＃xff08;window&＃xff09;&＃xff0c;你也可以最小化窗口&＃xff08;window&＃xff09;等操作

下面我们要使用窗口&＃xff08;window&＃xff09;来做写练习&＃xff0c;显示一些信息&＃xff0c;正如iOS开发一样&＃xff0c;我们接下来创建一个View Controller&＃xff0c;在这个view中&＃xff0c;我们可以设置app的UI。

1.5 添加一个新的View Controller&＃xff1a;菜单栏中 选择File/New/File...

选择文件模版

1.6 命名新添加的类命名MasterViewController 继承自父类NSViewController&＃xff0c;并使用Xib描述UI

创建MasterViewController

1.7 选择保存路径后&＃xff0c;点击create&＃xff0c;完成创建

点击create 完成创建

1.8 Xcode工程添加MasterViewController后&＃xff0c;应该类似下图

添加MasterViewController后的界面

1.9 选中MasterViewController.xib&＃xff0c;因为我们这个工程练习需要显示一些Bugs信息列表&＃xff0c;所以需要一个table view&＃xff0c;在Mac中&＃xff0c;这个控件叫做NSTableView&＃xff08;类似iOS中的UITableview&＃xff09;。可能你已经意识到了&＃xff0c;在iOS中你熟知的许多UIKit控件&＃xff0c;就是脱生于Mac OSX 的AppKit&＃xff0c;只是把原来在Mac OSX中的NS前缀改为UI前缀而已&＃xff0c;因此&＃xff0c;多数情况下&＃xff0c;你在iOS中经常用的控件基本上Mac上已经存在了&＃xff0c;试着使用NS来代替UI开头查找一下&＃xff0c;你会惊讶的发现许多控件&＃xff1a;NSScrollView, NSLabel, NSButton 等&＃xff0c;但要注意&＃xff0c;这些控件的API可能在Mac环境中会与iOS原本的有很多不同。现在&＃xff0c;拖动table view到xib面板的view中&＃xff0c;随便放个地方就可以&＃xff08;在后面我们会学习处理它&＃xff09;

选择table view

现在你已经拥有一个view&＃xff0c;并且它上面有个table view&＃xff0c;但是它并不能显示出来。这是因为你并没有将MasterViewController 添加到主窗口&＃xff08;main window&＃xff09;&＃xff0c;这一步&＃xff0c;需要在AppDelegate中进行。为了使用view Controller&＃xff0c; 就要让App Delegate 知道它的存在&＃xff0c;因此你需要做第一步就是在AppDelegate.m中导入view controller的头文件

1.10 在AppDelegate.m文件中&＃xff0c;导入MasterViewController&＃xff0c;并创建成员属性

现在Application Delegate 已经拥有了MasterViewController 属性&＃xff0c;但是这并不能显示&＃xff08;被view controller管理的&＃xff09;视图到应用程序的屏幕上&＃xff0c;我们还需要通过实例化这个属性来创建一个新的view&＃xff0c;并需要将新创建出来的view 添加到应用的主窗口中才可以。那么我们在什么时刻做这些事情比较合适呢&＃xff1f;

当应用程序&＃xff08;Application&＃xff09;启动后&＃xff0c;操作系统会调AppDelegate的这个方法“applicationDidFinishLaunching”&＃xff0c;在这里我们可以编写一些初始化代码&＃xff0c;保证应用在启动后会执行&＃xff08;仅且一次&＃xff09;&＃xff0c;对应熟悉iOS开发的来说&＃xff0c;这与iOS中的– (BOOL)application:didFinishLaunchingWithOptions:launchOptions方法作用相等。

1.11 创建view controller 并添加view到window中

添加controller的view 到window中

上面的代码做了三个操作&＃xff1a;

1. 使用initWithNibName&＃xff1a;方法从nib&＃xff08;就是我们创建控制器时的Xib&＃xff09;文件中创建了一个新的view Controller。

2. 将控制的view 添加到主窗口的容器视图&＃xff08;contentView&＃xff09;中。

3. 设置控制器view的大小与主窗口相等。

在OSX中&＃xff0c;窗口&＃xff08;NSWindow class&＃xff09;总是会默创建一个view&＃xff0c;叫做contentView&＃xff0c;它的尺寸自动跟随窗口变化&＃xff0c;如果想添加view到窗口中&＃xff0c;那么要使用addSubView方法把它们加到contentView。到此&＃xff0c;与iOS开发比较&＃xff0c;你会发现一些不同&＃xff0c;在iOS中需要设置窗口的根控制器&＃xff08;rootViewController&＃xff09;&＃xff0c;但在OSX中并不存在根控制器&＃xff0c;因此需要将view添加到窗口的contentview中。

1.12 点击运行&＃xff0c;在主窗口将会显示带有table View的视图

运行结果

上面的运行结果显示了一个空的table View&＃xff0c;为了能够显示一些我们想看的结果&＃xff0c;我们需要一些数据&＃xff0c;但在创建数据模型之前&＃xff0c;我们先来组织一下工程结构&＃xff0c;目前我们的工程目录结构是这样的&＃xff1a;

项目工程目录结构

Xcode默认的工程模版只会根据应用名创建组&＃xff08;Group&＃xff09;和一个子组supporting files &＃xff0c;当我们的工程不断变大时&＃xff0c;必须处理大量的文件&＃xff0c;这样查找需要的文件会变得非常困难。下面我们展示一种组织工程文件的方式&＃xff1a;分组

首先在 ScrayBugsMac组 点击鼠标右键&＃xff0c;在弹出菜单中选择“New Group” 创建一个名字为“GUI”的新组

将我们的一些文件&＃xff08;( AppDelegate.h/.m , MasterViewController.h/.m/.xib 和 MainMenu.xib&＃xff09;直接拖动到这个新组中

同样的方法&＃xff0c;我们在ScrayBugsMac组中再创建一个Model组&＃xff0c;用来放置后面需要用到的数据模型

整理后的工程目录

1.13 在工程目录中&＃xff0c;右键点击Model组 &＃xff0c;选择“New file...”,然后选择macOS/Cocoa Class

选择文件模版

1.14 为文件命名为ScaryBugData&＃xff0c;并继承自NSObject

创建ScaryBugData

1.15 在最后的窗口中&＃xff0c;点击create&＃xff0c;完成ScaryBugData创建&＃xff0c;工程看起来应该像下这样&＃xff1a;

创建ScaryBugData后的工程

1.16 为ScrayBugData编写代码&＃xff0c;添加两个属性&＃xff1a;title和rating 以及一个便捷初始化方法

ScrayBugsMac的.h和.m

ScrayBugData 是我们创建的第一个数据模型对象&＃xff0c;我们用这个数据模型保存Bug的名称和标记Bug的重要程度&＃xff0c;并为这个数据模型添加了一个自定义的初始化方法&＃xff1a;- (instancetype)initWithTitle:(NSString *)title rating:(float)rating

strong &＃xff1a;系统的runtime会自动保持对其进行强引用&＃xff08;ARC&＃xff09;

assign&＃xff1a;基本数据类型&＃xff08;非对象类型&＃xff09;使用&＃xff0c;不会触发内存管理问题&＃xff08;不会纳入到ARC中&＃xff09;

1.17 使用同样的步骤&＃xff0c;我们再创建另一个数据模型ScaryBugsDoc&＃xff0c;并编写代码&＃xff0c;结果如下&＃xff1a;

ScaryBugsDoc的.h文件和.m文件

至此&＃xff0c;我们已经完成了数据模型的构建。这时我们最好编译运行一下项目工程&＃xff0c;以确保我们做的这些操作都没什么问题&＃xff0c;虽然窗口里table View仍然是空的&＃xff0c;这是因为我们并没有把数据模型和UI连接在一起。接下来&＃xff0c;我们为MasterViewController 添加一个数组属性&＃xff0c;用来存储许多ScaryBugDoc类型的数据模型

1.18 在项目工程中选中MasterViewController.h文件&＃xff0c;添加一个bugs属性

MasterViewController.h

现在MasterViewController 已经准备好接收数据&＃xff0c;我们需要把图片资源添加到工程中&＃xff08;你也可以自己找些喜欢的图片也可以从来这里下载我们使用的示例图片&＃xff09;&＃xff0c;拖动你下载好的图片到工程时&＃xff0c;要确保“Copy items if needed”

拖动图片到项目中时的选项界面

1.19 现在我们可以创建一些演示数据了&＃xff0c;选择AppDelegate.m&＃xff0c;导入ScaryBugsDoc.h,并创建演示数据&＃xff1a;

AppDelegate.m文件

运行程序&＃xff0c;确保上面我们做的设置没有错误。为了能够显示需要的Bug 列表&＃xff0c;我们要让table view 从模型中获取数据。在OSX中table view 控件是NSTableView&＃xff0c;它类似iOS中的UITableView&＃xff0c;不同的是在NSTableView的一行&＃xff08;row&＃xff09;中可以有很多列&＃xff08;column&＃xff09;

1.20 选中table view&＃xff0c;设置它的UI属性&＃xff1a;只显示1列&＃xff08;column&＃xff09;&＃xff0c;去除header&＃xff0c;每行交替色差效果

Tableview 设置 

1.21 设置table view cell&＃xff1a;添加新的cell&＃xff1a;Image&Text Table Cell&＃xff0c;并设置它的高度为32。

添加新的cell&＃xff0c;并设置高度值32

1.22 设置table column的重用标识&＃xff08;类似iOS中cell 的identify&＃xff09;&＃xff1a;

设置column的identity

到此&＃xff0c;关于table view 的UI&＃xff0c;我们都完成了&＃xff0c;点击运行&＃xff0c;确保设置正确&＃xff0c;效果如下&＃xff1a;

table view 设置后运行效果

与iOS相似&＃xff0c;NSTableView 也有数据源和代理这两个属性&＃xff0c;现在我们需要将MasterViewController设置为table view 的数据源和代理&＃xff08;通常情况下&＃xff0c;table view的数据源和代理都是控制器&＃xff09;&＃xff0c;这一步可以通过代码设置&＃xff0c;也可以在xib图形界面中设置&＃xff1a;

设置table view 的数据源和代理属性

1.23 选中MasterViewController.m文件&＃xff0c;编写代码&＃xff1a;

实现table view 的数据源和代理方法

1.24 点击运行&＃xff0c;如果设置都正确的话&＃xff0c;你将看到一个带有图片和文字的table view&＃xff1a;

最终运行结果

你可以从这里下载到整个项目的demo&＃xff1a;github 代码示例

作者&＃xff1a;代码行者
链接&＃xff1a;https://www.jianshu.com/p/feadeb1ae7ae
來源&＃xff1a;简书
简书著作权归作者所有&＃xff0c;任何形式的转载都请联系作者获得授权并注明出处。