专栏首页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 开发(二)

    2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

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

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

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

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

    雪雁-心莱科技
  • 从 0 开始手写一个 Mybatis 框架,三步搞定!

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

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

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

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

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

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

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

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

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

    HOHO
  • vue开发第一步:用Mac来搭建vue脚手架

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

    PHP开发工程师
  • OpenGL ES 2.0 (iOS)[01]: 一步从一个小三角开始

    1). 三个什么端点(屏幕坐标点)? 要回答这个问题要先了解 OpenGL ES 的坐标系在屏幕上是怎样分布的:

    半纸渊
  • 一步一步开发微信小程序

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

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

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

    Java技术栈
  • 三步学会用spring开发OSGI——(第一步:环境篇)

    Spring-DM是什么 Spring-DM 指的是Spring Dynamic Modules. dm Server 是一个完全模块化部署的,基于OSGi的J...

    cloudskyme
  • 开发一款即时通讯App,从这几步开始

    腾讯云通信团队
  • 开发一款即时通讯App,从这几步开始

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

    腾讯云音视频
  • 一步一步教你从零开始写C语言链表

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

    杨源鑫
  • Mac开发跬步积累(三):被忽略的 NSTabViewController

    Apple 官方描述 NSTabViewController作为一个容器业务控制器,可以管理多个页面,并且一次仅显示一个页面

    代码行者
  • 零基础一步一步开始WordPress网站SEO优化教程

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

    夏末浅笑

扫码关注云+社区

领取腾讯云代金券