《iOS 6核心开发手册（第4版）》——2.4节秘诀：构建按钮

本节书摘来自异步社区《iOS 6核心开发手册（第4版）》一书中的第2章，第2.4节秘诀：构建按钮，作者 【美】Erica Sadun，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.4 秘诀：构建按钮
iOS 6核心开发手册（第4版）
当使用UIButtonTypeCustom风格时，将提供所有的按钮艺术。图像的数量依赖于你想要按钮如何工作。对于简单的按钮，可能添加单独一幅背景图像，当按钮被按下时，则改变标签颜色以高亮显示它。

对于切换风格的按钮，可能使用4种图像：用于正常表示中的“禁用”状态、高亮显示（即按下）时的禁用状态，另外两个用于“启用”状态。可以选择并设计交互细节，确保添加局部状态（秘诀2-1中的布尔型isOn实例变量），以将简单的按压式按钮扩展到切换状态。如果给按钮提供正常的图像，并且不指定高亮显示或禁用图像，iOS将自动生成这些变体。

秘诀2-1用于构建一个可以在启用和禁用之间切换的按钮，演示了构建自定义按钮的基本细节。点按该按钮时，它将从绿色（启用）切换成红色（禁用），或者从红色切换成绿色。这允许（非色盲）用户即时分辨出当前的状态。显示的文本强化了状态设置。图2-3（左图）显示了由这个秘诀创建的按钮。

这个秘诀中调用的UIImage大小可变的图像在按钮创建中起着重要的作用。大小可变的图像使得可以创建任意宽度的按钮，把圆形艺术作品转变成菱形按钮。可以指定限定范围（即不应该拉伸的艺术作品）。在这个示例中，限定范围是左、右的宽度均为110像素。如果想要把这个秘诀中使用的按钮宽度从300像素改为220像素，按钮将失去拉伸效果，如图2-3所示（右图）。

图2-3 使用UIImage拉伸动作调整任意的按钮宽度。
设置左边的限定宽度，指定拉伸可以发生在什么位置

按钮可以根据状态指定图像和背景图像。图像设置按钮的实际内容。背景图像可以在图像和标题文本可能出现的地方提供大小可变的背景。秘诀2-1使用了背景图像，允许按钮的内置标题字段浮动在所提供的艺术作品上面。

注意：
可以通过调整图层属性，对视图和按钮的边角进行不同程度的圆整。向项目中添加Quartz Core框架，允许访问视图的图层，其中可以以编程方式设置图层的cornerRadius属性。然后把视图的clipsToBounds属性设置为YES，以实现Apple外观效果。

2.4.1 多行按钮文本
按钮的titleLabel属性允许修改标题属性，比如它的字体和换行模式。在这里，把字体设置为非常大的值（基本上确保需要对文本进行换行以正确显示），并且结合使用单词换行和居中对齐。

button.titleLabel.font = [UIFont boldSystemFontOfSize:36.0f]; [button setTitle:@"Lorem Ipsum Dolor Sit" forState: UIControlStateNormal]; button.titleLabel.textAlignment = UITextAlignmentCenter; button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;

默认情况下，按钮标签将从按钮的一端伸展到另一端。这意味着文本可能比你所想的扩展得更远，也许会超过按钮艺术作品的边缘。为了修正这个问题，可能通过在文本中嵌入换行符（即n），在单词换行模式中强制进行换行。这允许控制在按钮标题的每一行中出现多少文本。

2.4.2 给按钮添加动画式元素
在使用按钮时，可以在它们后面富有创意地分层放置艺术作品。可以使用标准的UIView层次结构执行该操作，确保对任何可能会遮挡按钮的视图禁止用户交互（setUserInteractionEnabled:NO）。图像视图内容会“泄露”给查看者，使你能够给按钮添加生动的动画元素。

秘诀2-1中使用的示例艺术作品是半透明的，允许试验这种方法。用于这个秘诀的示例代码将会添加可以分层放置在按钮和动画后面的可选的蝴蝶艺术作品。

在尝试显示某种状态（比如操作的进度）时，动画式元素特别有用。它们可以告知用户为什么按钮没有做出响应，或者创建不同的按下反应。例如，游戏中的涡轮增强式按钮可能在按下时提供额外的动力。动画式画面可以帮助用户辨别功能中的变化。

把艺术作品和文本与按钮实现分隔开可以在开发中起到其他的作用。在空按钮后面或顶部添加这些元素允许基于想要的部署局部化图形设计和表述，而不必直接重新设计按钮。

2.4.3 给按钮添加额外的状态
秘诀2-1创建了一个具有两种状态的按钮，提供了启用和禁用状态的视觉效果。有时，你可能想利用更容易区分的状态实现按钮。游戏提供了它的最常见的示例。许多开发人员实现了通常会展示4种状态的按钮：锁定级别、解锁但不起作用、解锁且部分起作用、解锁并掌控。

这个秘诀使用一个简单的布尔型开关（isOn实例变量）来存储启用/禁用状态，以及基于此状态来选择使用的艺术作品（在toggleButton:方法中）。可以通过把状态存储为一个整数并提供一个switch语句用于艺术作品选择，把这个示例扩展用于更广泛的艺术作品和按钮状态。