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

一步一步,开始上手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文章获得更多的帮助

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    代码行者
  • Mac开发跬步积累(五): Dark Mode下适配你的UI界面

    在macOS 10.9+ 的时候,苹果就提供了NSAppearance这个类来协助AppKit管理App的UI控件. NSAppearance决定着AppKit...

    代码行者
  • Mac开发之NSCollectionView使用以及自定义item

    与iOS中的UICollectionView相似,在Mac开发中,我们也会常常用到NSCollectionView来展示内容,但在使用中,与iOS有较大差别,尤...

    代码行者
  • STATA教程之二:自动化输出描述性数据表格

    本文将简单介绍如何利用Stata的tabout命令,设计出内容丰富的描述性表格。读完本文,你将能够从STATA输出几乎所有类型的描述性表格的latex代码,从而...

    宋彦
  • 通过shell分析表依赖的层级关系(r3笔记第97天)

    在平时的工作环境中,总会有一些表会存在依赖关系,比如我们有三张表customer,用户表subscriber,账户表account 其中客户可以有多个用户或者账...

    jeanron100
  • 卷积神经网络简介

    假设我们想要创建一个能够识别图像中的天鹅的神经网络模型。天鹅具有某些特征,可用于帮助确定天鹅是否存在,例如长颈,白色等。

    AI研习社
  • 第四章:使用Druid作为SpringBoot项目数据源(添加监控)

    恒宇少年
  • Oracle参数解析(spfile)

    bsbforever
  • [Oracle 日常管理]表的相关操作

    bsbforever
  • SQL的各种连接Join详解,都需要熟练掌握!

    SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段。最常见的 JOIN 类型:SQL INNER JOIN(简单的 JOIN)、...

    全栈自学社区

扫码关注云+社区

领取腾讯云代金券