使用表格视图：运行时表现、约束设置与代码实现

### 使用表格视图：运行时表现、约束设置与代码实现 #### 1. 运行时窗口调整问题 在运行程序时，点击 Xcode 窗口左上角的运行按钮，拖动窗口右下角调整大小，可能会遇到布局混乱的问题。例如，窗口垂直拉伸、水平缩小时，外观框可能向下扩展，注释框和基本信息框可能水平缩小，基本信息框甚至可能变得一团糟。 我们期望的布局是：上一章的所有原始 UI 元素（NSBox 中的所有项）保持相同大小，并固定在窗口右侧；两个新按钮保持相同大小，彼此间距不变，并固定在表格视图下方的窗口左侧；新的表格视图应随窗口扩展在垂直和水平方向上都进行扩展，贴紧窗口左侧，且在两个方向上都不小于当前大小；表格视图右侧的框应与表格视图保持一定距离。 #### 2. Cocoa 自动布局与约束 从 Mac OS X Lion 开始，窗口调整大小通过 Cocoa 自动布局系统实现。自动布局中的调整行为通过优先级约束来指定，它可以声明视图的最小或最大大小、子视图之间需要保留的关系、视图与其父视图之间的关系等。 约束表达的关系有“等于”“小于”“大于”等，涉及一对视图或一个视图和一个常量。例如： - “myButton’s width = 87”：使按钮宽度固定为 87 点。 - “myButton’s height >= 32”：按钮高度不能小于 32 点，系统通常会选择满足不等式的最小值 32。 更复杂的约束如： - “the horizontal space between myButton’s leading edge and the window’s leading edge = 10” - “the horizontal space between myButton’s trailing edge and the window’s trailing edge = 15” 这些约束会使按钮随窗口大小变化而伸缩。注意，“leading”和“trailing”在不同书写系统中有不同含义，在从左到右的书写系统中，“leading”是左侧；在从右到左的书写系统中，“leading”是右侧。 每个约束都有优先级，范围从 1 到 1000。优先级高的约束优先满足，如果两个冲突的约束不能同时满足，优先级高的约束将生效，优先级低的约束将被违反。例如： - “myButton’s width >= 32 at priority 1000” - “myButton’s width = someField’s width – 40 at priority 750” 当 someField 的宽度大于 72 时，两个约束都能满足；当 someField 的宽度小于 72 时，高优先级约束生效，按钮宽度不再缩小。 每个视图还有内容拥抱优先级和内容压缩阻力优先级，它们描述了视图相对于其固有大小的调整方式。通常，这些优先级的默认值是不错的选择，在本章中我们保持默认设置。 #### 3. 创建和编辑约束 Interface Builder 允许我们指定控制每个视图调整行为的约束。实际上，我们在将新控件拖到窗口时，通过 Interface Builder 显示的蓝色虚线指南一直在进行约束设置。约束最初是根据控件定位时突出显示的蓝色指南在 Interface Builder 中创建的，如果控件重新定位，约束可能会改变。 为了确定合适的约束，我们首先要确定窗口的合适调整行为。对于我们的窗口，我们希望新的表格视图随窗口扩大在水平和垂直方向上都进行调整；所有框保持大小不变，并随用户调整窗口而向右侧移动；按钮大小相同，并固定在窗口底部。我们需要设置新的约束并可能移除一些不必要的约束。 调整大小通常是一个迭代的过程，通过在 Interface Builder 模式下调整窗口大小、使用 Xcode 中的模拟文档功能进行试验和错误尝试，能帮助我们完善布局。 在 Xcode 中可以编辑约束，我们可以在屏幕上、实用工具区域的大小检查器中以及 Interface Builder 窗格左侧边缘的图标坞中看到约束。具体操作如下： 1. 选择 Interface Builder 窗格左下角隐藏的小扩展三角形，图标坞将展开，显示窗口中视图的整个层次结构。 2. 在实用工具区域，选择大小检查器（⌥⌘5），然后选择标记为“Appearance”的框，并展开左侧的“Constraints”项。 例如，外观框存在问题，窗口调整大小时它会向下扩展。在大小检查器中查看约束，有一个约束“Bottom Space to: Superview equals: 29”，这使得外观框底部与窗口底部保持 29 点的距离。另一个处理垂直大小的约束“Top Space to: Box – Basic Information Equals: Default”，使外观框顶部与基本信息框底部保持系统默认距离。这些紫色图标表示的约束是系统创建的。 由于无法直接删除外观框的底部空间约束，我们可以通过以下步骤改变导致系统创建该约束的情况： 1. 创建一个新约束来保持外观框的当前大小。选择该框，然后从菜单栏中选择“Editor ➤ Pin ➤ Height”。 2. 将外观框移到窗口顶部附近，远离底部，这样可以移除将框底部固定到窗口底部的约束。 3. 向下调整窗口大小以留出更多空间。 4. 将外观框放回，使框标题与窗口底部区域的另外两个框对齐，并在它们之间均匀分布。由于窗口底部更远，应避免创建该约束。 5. 恢复窗口大小。 此时，窗口在垂直调整大小时的行为符合我们的期望。但在水平调整大小时，还存在问题：表格视图不伸缩，而最右侧的两个框（注释框和能力框）会伸缩。我们可以通过以下步骤解决： 1. 检查表格视图的约束，发现没有固定大小的前后空间约束，问题可能出在右侧的两个框。 2. 选择能力框，然后选择“