美文网首页开发点滴iOS 好东西Mac开发云集
一步一步,开始上手Mac 开发(一)

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

作者: 代码行者 | 来源:发表于2016-10-30 11:14 被阅读23793次

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

    学习目标:

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

    1. 如何使用Xcode 创建Mac app

    2. 一个Mac app 的基本结构

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

    4. 怎样使用Table Views (比如添加或者删除行)

    5. 怎样使用文本(text field),按钮(button),图片(image view)

    6. 图片(image view)的获取方式(从硬盘或者摄像头)

    7. 窗口(window)的尺寸控制

    实践开始:

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

    1.1 首先开启Xcode 创建工程

    创建新Xcode 工程

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

    选取工程模版

    1.3 配置工程信息和开发语言(本文根据英文原文,使用Objective-C 开发)

    配置项目工程信息

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

    创建后的界面

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

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

    2. 一个好的编译开端:尽管这是一个空窗口项目

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

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

    1.5 添加一个新的View Controller:菜单栏中 选择File/New/File...

    选择文件模版

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

    创建MasterViewController

    1.7 选择保存路径后,点击create,完成创建

    点击create 完成创建

    1.8 Xcode工程添加MasterViewController后,应该类似下图

    添加MasterViewController后的界面

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

    选择table view

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

    1.10 在AppDelegate.m文件中,导入MasterViewController,并创建成员属性

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

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

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

    添加controller的view 到window中

    上面的代码做了三个操作:

    1. 使用initWithNibName:方法从nib(就是我们创建控制器时的Xib)文件中创建了一个新的view Controller。

    2. 将控制的view 添加到主窗口的容器视图(contentView)中。

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

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

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

    运行结果

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

    项目工程目录结构

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

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

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

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

    整理后的工程目录

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

    选择文件模版

    1.14 为文件命名为ScaryBugData,并继承自NSObject

    创建ScaryBugData

    1.15 在最后的窗口中,点击create,完成ScaryBugData创建,工程看起来应该像下这样:

    创建ScaryBugData后的工程

    1.16 为ScrayBugData编写代码,添加两个属性:title和rating 以及一个便捷初始化方法

    ScrayBugsMac的.h和.m

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

    strong :系统的runtime会自动保持对其进行强引用(ARC)

    assign:基本数据类型(非对象类型)使用,不会触发内存管理问题(不会纳入到ARC中)

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

    ScaryBugsDoc的.h文件和.m文件

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

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

    MasterViewController.h

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

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

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

    AppDelegate.m文件

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

    1.20 选中table view,设置它的UI属性:只显示1列(column),去除header,每行交替色差效果

    Tableview 设置 

    1.21 设置table view cell:添加新的cell:Image&Text Table Cell,并设置它的高度为32。

    添加新的cell,并设置高度值32

    1.22 设置table column的重用标识(类似iOS中cell 的identify):

    设置column的identity

    到此,关于table view 的UI,我们都完成了,点击运行,确保设置正确,效果如下:

    table view 设置后运行效果

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

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

    1.23 选中MasterViewController.m文件,编写代码:

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

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

    最终运行结果

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

    下一篇,我们将对table view 列表进行添加,编辑,删除的操作已经窗口尺寸的适配,未完待续...

    相关文章

      网友评论

      • 5471f5280d42:🐂🍺
      • Brant白叔:你好,请问一下,像mac上的qq,左边的聊天列表跟右边的聊天框,这种一般是用什么控件布局的 ?
        代码行者:@Brant白叔 https://github.com/Alexiuce/macOStudy
        Brant白叔:给个地址谢谢,去star
        代码行者:@Brant白叔 :smile:可以看我的GitHub项目中Mac进阶代码,里面有仿QQ的工程
      • 红尘_客:设置table view 需要显示的cell 这一步,我的cell无法赋值,代码执行,但是没用。有可能我设置的cell和他显示的不是同一个cell
        代码行者:@红尘_客 :relieved: 那就要仔细查看一下代码了...通常这种情况多数都是一些小地方疏忽导致的..
        红尘_客:@代码行者 再三确认cell这一步我没选错控件,identifier 也没错
        代码行者:@红尘_客 :blush:也许是你控件选错了
      • dasan沈扬:怎么调用mac的摄像头拍照保存到磁盘呢?
      • dd2f56d130c2:不错不错,收藏了。

        推荐下,分库分表中间件 Sharding-JDBC 源码解析 17 篇:http://t.cn/R0UfGFT


        代码行者:@开源小小师 :smile:客气了
      • CuiXg:楼主,我新建的项目为什么有 Main.storyboard,而没有 MainMenu.xib 啊
        代码行者:@弦暮 :sweat:嗯嗯,感谢指正,项目创建现去除默认勾选的storyboard,Xcode会使用之前的xib方式设置window,之前表达不严谨,而且项目中的view也是支持xib方式加载的,也可以手动自定义xib加载Window(比较少用)
        弦暮:@代码行者 瞎说,你别误导别人好吗?创建项目时勾选使用SB就会有SB,不勾选使用SB就是xib
        代码行者:@AndyCuiYTT 现在使用新版本Xcode创建项目都是使用storyboard,没有xib啦,
      • Hunter琼:你的第二篇文章 没有看到怎么适配窗口放大 和缩小的啊 我这边xlb做的nstablview还是不能适配
        Hunter琼:@代码行者 这样啊
        代码行者:osx上控件的适配基本与iOS相同,如果你的view是使用自定义xib方式(也就是通过代码加载xib显示你的view),那可能需要你手动给视图view添加对应的约束来进行适配了
      • GavinKang:大神有时间吗?我朋友有个MAC项目,想找人开发
        代码行者:@iOS开发的毛毛虫 这个真的没有,可能帮不到你了:pensive:
        GavinKang:@代码行者 大神有没有广州本地的朋友推荐
        代码行者:异地开发的沟通成本比较大,推荐你朋友优先选本地的开发,我坐标杭州,不一定合适:smiley:
      • 心语风尚:mac下网络请求可以像ios一样用afnetwork吗
        代码行者:@心语风尚 iOS中,处理NS开头的框架,OS X都可以用UI开头的不行:smile:
        心语风尚:@代码行者 谢谢,mac下数据转模型 也可以像iOS一样用MJExtension
        代码行者:@心语风尚 可以呀:smile:
      • Hunter琼:厉害了
        代码行者:@Hunter琼 先说常用两种实现方法:一种是继承自NSView,然后重载isFlipped方法,override var isFlipped: Bool{
        return true
        }
        另一种是使用kvc,直接赋值(推荐使用第一种方法)
        Hunter琼:@代码行者 你好 我不擅长用xlb编程 创建视图的时候 NSMakeRect 的坐标系原点在左下角 怎么变成右上角 我查资料看到用NSView的属性isFlipped可以但是readloy的啊
        代码行者:@Hunter琼 :smile:你过奖了
      • 九剑仙:问个问题,我写的Mac os项目,打开后点击左上角叉号,把程序关闭了,然后我在dock点击项目图标,项目启动不了,必须要手动退出后才能点击启动,怎么解决
        九剑仙:@代码行者 没有self。window
        九剑仙:@代码行者 self.window报错
        代码行者:@九剑仙 在你的AppDelegate中,实现系统的这个方法:(BOOL)applicationShouldHandleReopen:(NSApplication *)sender hasVisibleWindows:(BOOL)flag
        参考代码:- (BOOL)applicationShouldHandleReopen:(NSApplication *)sender hasVisibleWindows:(BOOL)flag{
        if (flag == NO) {
        [self.window makeKeyAndOrderFront:nil];
        }
        return YES;
        }
      • Link913:楼主你window要设置什么东西吗?那个delegate方法都不走的,我应该是漏了什么
        代码行者:@Mr_KT 我再Mac开发基础练习中有一篇账说了一下如何制作状态栏应用,推荐查阅~
        121d44c6b0b3:请问楼主怎么在状态栏添加图标(右上角),添加上了怎么实现点击显示主页窗口?
        代码行者::smile:window不需要设置的,默认的工厂就好了
      • 午马丶:兄弟可以以后少用xib吗。。最好是能代码教学。。。
        STDawn:如果想一直停留在原始社会,那就一直用代码吧
        1bd438904742:为啥少用xib...你是来搞笑的嘛
        代码行者:@A丶 这个系列是翻译国外的文章内容,文章出处在(一)的前文里有指出,谢谢提醒,后面我自己的文章会尽量多用代码,感谢阅读~
      • 92852bd582e5:楼主已经给你发了私信,会一直关注你的。
      • Link913:楼主你那个nswindow从哪里拖线拖过去的?如果用手动创建window咋做呢?它的大小啥的设不聊啊
        Link913:@代码行者 更新在哪里了啊
        Link913:@代码行者 好的,很期待
        代码行者:@SkyHarute 项目模版自带window的,如果要自己代码创建window,与iOS不同,具体代码会在今天的更新里讲一下:smile:

      本文标题:一步一步,开始上手Mac 开发(一)

      本文链接:https://www.haomeiwen.com/subject/nhkufttx.html