《iOS 6核心开发手册(第4版)》——2.4节秘诀:构建按钮

简介:

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

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

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


59584403c0c8dda0a8a3b50761acde086ed496ed

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

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


da3a993b611880ad21392e05d99dd5f4514431ee

图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语句用于艺术作品选择,把这个示例扩展用于更广泛的艺术作品和按钮状态。

相关文章
|
7月前
|
iOS开发
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
28 0
|
3天前
|
存储 编解码 JSON
利用SwiftUI构建高效iOS天气应用
【4月更文挑战第21天】 在本文中,我们将深入探讨如何运用SwiftUI框架打造一个响应迅速且用户友好的iOS天气应用程序。我们将重点放在利用SwiftUI的声明式语法简化界面开发,并通过结合Core Location和Networking APIs实现实时天气数据的获取与展示。文章将详细阐述整个开发过程,包括API集成、数据模型设计、用户界面布局以及动态适配不同屏幕尺寸的策略。
|
22天前
|
开发工具 Swift iOS开发
利用SwiftUI构建动态用户界面:iOS开发新范式
【4月更文挑战第3天】 随着苹果不断推进其软件开发工具的边界,SwiftUI作为一种新兴的编程框架,已经逐渐成为iOS开发者的新宠。不同于传统的UIKit,SwiftUI通过声明式语法和强大的功能组合,为创建动态且响应式的用户界面提供了一种更加简洁高效的方式。本文将深入探讨如何利用SwiftUI技术构建具有高度自定义能力和响应性的用户界面,并展示其在现代iOS应用开发中的优势和潜力。
|
30天前
|
数据安全/隐私保护 开发者 iOS开发
iOS-打包上架构建版本一直不出现/正在处理/自动消失
iOS-打包上架构建版本一直不出现/正在处理/自动消失
25 0
|
1月前
|
机器学习/深度学习 测试技术 API
iOS系统下轻松构建自动化数据收集流程
iOS系统下轻松构建自动化数据收集流程
26 0
|
3月前
|
数据可视化 iOS开发
iOS 开发,什么是 Interface Builder(IB)?如何使用 IB 构建用户界面?
iOS 开发,什么是 Interface Builder(IB)?如何使用 IB 构建用户界面?
40 4
|
3月前
|
监控 Swift iOS开发
局域网计算机监控软件中利用Swift构建iOS端的移动监控应用
在局域网计算机监控软件的开发中,构建iOS端的移动监控应用是一项关键任务。本文将介绍如何利用Swift语言实现这一目标,通过多个代码示例展示关键功能的实现。
225 1
|
3月前
|
数据安全/隐私保护 开发者
iOS- 打包上架构建版本一直不出现 / 正在处理 / 自动消失
iOS- 打包上架构建版本一直不出现 / 正在处理 / 自动消失
|
3月前
|
数据安全/隐私保护 开发者 iOS开发
iOS-打包上架构建版本一直不出现/正在处理/自动消失
iOS-打包上架构建版本一直不出现/正在处理/自动消失
34 0
|
11月前
|
数据安全/隐私保护 开发者 iOS开发
iOS上架之使用appuploader创建构建版本的流程
1、打开appuploader软件​ 2、登录苹果开发者账号​ 3、点击appuploader右上角的设置