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