用Swift开发Mac App(7)

缩放

打开MasterViewController.xib，在Size面板中查看 Custome View的大小。在本例中，它应该是540x400大小。但是读者的这个数字会有不同。不管是多大，请记下这个数字。待会会用到。

这将是App出口的最小大小。打开 MainMenu.xib, 选择 window 对象。在Size 面板中，勾上Constraint右边的Minimum Size 选项，然后将width 和 height 修改为同样的值。

运行程序。

改变出口的大小，这次当窗口缩小到最小尺寸后，就无法再缩小。

接下来我们需要解决控件自适应大小的问题，包括TableView和细节页面中的控件。

首先是MasterViewController视图。

打开 AppDelegate.swift, 在applicationDidFinishLaunching()方法最后加入:

// 3. 设置 masterViewController.view的布局约束 masterViewController.view.translatesAutoresizingMaskIntoConstraints = false 

let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[subView]|",

   options: NSLayoutFormatOptions(0),

   metrics: nil,

   views: ["subView" : masterViewController.view]) 

let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[subView]|",

   options: NSLayoutFormatOptions(0),

   metrics: nil,

   views: ["subView" : masterViewController.view])   

NSLayoutConstraint.activateConstraints(verticalConstraints + horizontalConstraints)

在这里，我们允许MasterViewController在宽、高两个维度上使用自动布局。

接下来，我们使用IB的自动布局来约束来对table view进行布局，以便在窗口大小改变时，让它的高度自动增长，但宽度保持恒定。

打开 MasterViewController.xib ，选择table view，点击右下角的Pin 按钮， 勾上上、左、下3个约束，以及一个等宽约束，然后点击 “Add 4 Constraints”:

注意图片中的约束值可能和读者的实际值有所不同。

然后选择Reset按钮，设置其与Table View的上边距约束和一个相对于Main View的左边距约束：

接着选择分隔线，设置其与Main View的上、下边距约束，以及与TableView的左边距约束，确认在左边距约束的下拉列表中选择了 “Bordered ScrollView – Table View” ：

接下来设置“Add” 和 “Delete” 按钮。我们不需要改变它们的大小，唯一需要改变的是它们和Table View之间的距离。对于两个按钮，我们需要设置它们的左、上，宽度和高度约束。已Add按钮为例，显示如下图：

Delete按钮类似。

运行程序，改变窗口大小，查看效果。

然后是右边的细节页面。在这个页面中，当窗口宽度变大时，所有控件的宽度也会变大。以TableView相同的方法，分别设置它们的自动布局如下：

·      设置Name标签的左、上约束。

·      设置bugTitleView的左、上约束。

·      设置Rating标签的左、上约束。

·      设置 bugRating的左、上、右和高约束。

·      设置bugImageView的左、上、下、右约束。

·      移动 Change Picture 按钮，以便它的右边沿刚好和bugImageView的右边沿平齐，然后设置它的右、下约束。

设置完bugImageView 按钮可能会出现几个警告，但ChangePicture 按钮之后，这些警告会消除。

上述步骤做完后，故事板将如下图所示：

编译运行，再次缩放窗口。

bugImageView的Scale设置会对图片产生不同的显示效果。在IB中选择Image Well 控件, 修改其scaling属性为“Proportionally Up or Down” 或者 “Axes Independently”，然后运行App，看看有什么不同。

注意: 如果你想限制窗口的最大缩放尺寸，则你也可以用设置窗口最小缩放尺寸同样的方式加以限制。