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

非常感谢大家来继续阅读第三篇(也是终篇)关于简单的Mac开发入门的上手系列文章,本篇中我们来讨论怎样细化App和更好的交互体验,通过这些,你完全可以构建自己喜欢的Mac 上的应用

我们之前的工程存在哪些问题?

我们的工程运行后,你可以正常的显示一个scary bug 列表操作窗口,并且可以进行删除,添加以及修改这些数据,它功能完整,但是它的用户体验并不理想。

运行中的App

比如,你调整窗口的大小(可以把窗口拖大一些,如下图),窗口内控件的尺寸,并没有变化,而且控件之间也没有布局整齐,这是的它们看起有点难看,乃至看专业;

大窗口的App

再或者你把窗口缩小(如下图),一部分需要显示的内容已经无法看见了,因此我们需要明显的设置一个窗口的最小幅度,这样我们的应用才可以正常使用

好吧,让我们来动手改进这些问题~

1  设置窗口的最小尺寸

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

调整大小和对齐控件后的窗口

1.2 从控件库中,拖一条竖直的线到view 中,把它放在table view 和详情视图直接的空白处(居中)

添加一条竖直分割线

1.3 点选size inspector选项,记下view的size,在我们的示例工程中,view的尺寸是471 * 357

查看view 的size inspect页

1.4 选择mainMenu.xib,然后选择window,根据上一步我们记下的view 的窗口size来设置window的最小尺寸:

设置窗口的最小尺寸

1.5 编译运行工程,试试调整运行应用的窗口,你会发现我们再也不能把窗口变得比我们设置好的最小值再小了,这样我们的需要展示的界面就会一直显示完整

窗口无法再缩小了

好了,接下来我们进一步的调整窗口适配,目前我们的window中,主要分为两部分:列表 (竖直线左侧)和 列表详情展示(竖直线右侧),当window尺寸变化时,这两部分的适配要求是不同的,我们先来设置table view :当窗口高度增加的时候,我们希望table view的高度也随之增加,但当窗口宽度增加的时候,我们希望table view的宽度不变(固定宽度)

1.6 设置table view 的窗口适配,在MasterViewController.xib中,选中table view 后,切换到size inspect属性页,修改autosizing设置

设置table view 的autosizing属性

设置完成后,运行应用,你会发现当我们改变窗口大小时,table view 的高度会随窗口变化,但宽度是固定不变的,这正是我们需要的效果

* 如果你发现table view 的高度并没有你预料中的跟随窗口高度变化,请确认你的view 设置是否正确(如下图:)

view 的autosizing 设置

1.7 使用同样的方法,我们设置竖直分割线

竖直线的autosizing设置

1.8 设置+按钮和-按钮:按钮大小不变,但位置始终位于窗口的底部(与窗口底部的距离固定)

设置+按钮和-按钮的autosizing属性

运行程序,看一下效果^_^

适配了table view ,button ,line后的运行效果

1.9 设置详情部分的控件,参考下图:

设置textFiele 和EDStarRating view 的autoresizing
label 的autoresizing设置
按钮的autoresizing设置
image view 的autoresizing设置

运行工程,我们可以看到所有的控件都会在窗口大小改变的时候会相应的调整合适的尺寸或位置,这样看起来比我们之前没有设置窗口适配要美观一些了,当然,若是觉得窗口过大导致app看起来不是那么好看,我们也可以设置运行窗口的最大尺寸(与设置最小尺寸操作相同),示例如下图

设置window的最大运行尺寸

我们这里设置都是通过autosizing 进行窗口适配的,这既方便又直观,但是如果想要更多和更复杂的控件适配和窗口适配,更推荐使用Auto Layout(与iOS 中使用Auto Layout一样),关于如何详细使用Auto Layout已经超出本篇内容,有兴趣的同学可以自行参考iOS中的操作体验一下。

Auto Layout 选项和设置

现在我们的Mac app 已经能够很好的适应窗口变化,这样的UI界面看起来比之前显得专业和美观了,那么,还有什么其他要改进的来增强用户体验么?当然还有一些小细节需要处理,并不是太多。比如:

当编译和运行后,如果我们没有选中table view中的任何行,点击-按钮(删除行)或者Change Picture按钮,应用没有任何反应,为了用户体验更好,我们需要在table view 没有选中任何行的时候,禁止使用一些控件(-按钮,Change Picture按钮以及text field 和rating view),如果table view 有选中的时候,再使得这些控件可以交互。

1.10 设置控件的enable默认属性

设置控件的enable的默认属性

同样的方式,需要设置Change Picture按钮和text field,为了能够使用这些控件,我们需要在view controller中为它们添加属性

-按钮添加到view controller 属性连线(命名deleteButton)

设置Change Picture按钮步骤同上,命名changePictureButton属性,并在MasterViewController.m中的tableViewSelectionDidChange:实现如下代码

控件代码设置示例

最后一步,我们还需要设置EDStarRating控件,由于它是custom view,因此不能在Interface Builder中设置enble属性,我们需要使用代码在viewDidLoad中实现默认禁用,注意,针对EDStarRating控件,我们设置的是editable这个值,而不是enable

设置rating view的editable默认值

编译运行后,默认这些控件是不能使用的,当你选中一行后,它们有可以正常使用了。你也可以尝试让整个详情展示的部分默认隐藏,当选中table view 一行后,再显示详情视图部分,这个功能留给同学们自己练习吧

上手Mac 开发的所有代码都可以从github 下载demo code。你可以尝试各种不同的控件或者在工程中添加不同的功能,例如保存一个用户选中的数据到文件中,使用  NSSavePanel询问用户需要保存的文件路径,或者使用search field给用户提供选中bug的列表

真心希望你喜欢这个上手Mac 开发的入门系列,并且推荐同学们阅读Apple’s Mac App Programming Guide文章获得更多的帮助

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容