7.4　按钮控件UIButton

7.4.1　基本使用

UIButton是App中最常见的UI控件之一，同时由于UIButton能够显示不同状态下的文字以及图片，因此在实际开发中的应用也是非常的灵活。

1．UIButton的构成（如图7-33所示）

一个UIButton按钮由3个属性组成。

• 图标currentImage：左侧的图片，默认在左边。在显示的时候，会显示图片的实际大小。

• 标题currentTitle：按钮上显示的文字，默认在右边。

• 背景图片currentBackgroundImage：背景图片默认占满整个按钮。在实际开发中，普遍需要对美工提供的背景图片拉伸显示。为了实现拉伸效果，可以直接修改图片的Slicing属性，修改方法见前面章节中的介绍。

2．UIButton的状态

当点击按钮时，按钮的image以及title是可以改变的。这是因为UIButton可以设置几种状态，针对每个状态可以定制不同的样式。UIButton按钮有以下5个状态。

• UIControlStateNormal：默认状态；
• UIControlStateHighlighted：高亮状态；
• UIControlStateDisabled：失效状态；
• UIControlStateSelected：选中状态；
• UIControlStateFocused：聚焦状态。

对于每个状态，都可以设置不同的图标、标题以及背景图片，使用如下方法：

另外，也有几个常用属性的设置不需要区分状态，如：

3．UIButton点击动作的实现方法

按钮的作用就是用来监控用户的点击，为了能够实现点击按钮后去完成特定的业务逻辑，可以使用以下两种方法来监控按钮的点击。

• 使用Target-Action方法监听用户点击事件UIControlEventTouchUpInside。如下代码所示，当用户点击按钮时，会调用myAction:方法中实现的业务逻辑。

• 在interface builder/StoryBoard中，对按钮进行连线，其中，Event中选择Touch Up Inside，添加成功后，控制器中会出现myAction:方法，如图7-34所示。

7.4.2　按钮的创建

1．使用代码创建

当使用代码创建UIButton对象时，最重要的是需要针对按钮不同状态设置其外观属性。下面的示例代码创建了一个UIButton类型的对象，并且对正常状态以及点击状态的外观进行了设置，当点击按钮时，会调用myAction:中实现的业务逻辑。

• 新建一个Single View Application工程，并导入两张图片，分别用于正常状态以及点击状态时按钮的图标。
• 在ViewController.m中添加如下代码，创建一个UIButton对象并且对其属性进行设置，并把该按钮添加到控制器view上。

• 实现点击按钮时执行的myAction:方法。

运行结果如图7-35所示，当程序运行后，可以看到一个红色背景的按钮，其中包含一个图标以及文字描述。

当用户点击按钮时，按钮的图标以及文字可以发生改变，并且会调用myAction:方法，如图7-36、图7-37所示。

2．使用XIB创建

当使用XIB或者在Storyboard中创建按钮对象时，同样需要根据按钮的状态设置其外观，只不过此时不再需要编写代码，而是通过界面的配置即可实现。

• 添加UIButton控件，并设置其属性，如图7-38所示。

• 通过切换State Config中的选项，可以设置按钮不同状态下的外观属性，如图7-39所示。

• 对按钮进行连线，实现按钮点击时执行的方法，如图7-40所示。

7.4.3　调整图标与标题的位置

默认创建的按钮，其图标与标题是紧紧靠在一起的，并且图标在左，标题在右。实际开发过程中，出于美观的考虑，图标和标题之间会拉开一定的距离，甚至有些情况需要互换图标与标题的位置，如图7-41所示。

1．通过XIB进行调整

在XIB或StroyBoard中，Xcode提供了用于调整图标与标题位置的工具，如图7-42所示。通过Xcode提供的配置工具，可以对图标的位置、标题的位置以及对图标标题的整体位置进行调整。

例如，通过调整其中的Title Insets和Image Insets，可以改变图标与标题的间距，如图7-43所示。

2．通过代码进行调整

对于使用代码创建的按钮，同样可以使用代码调整图标与标题的位置，在UIButton类中提供了如下3个属性。

通过调整imageEdgeInsets以及titleEdgeInsets同样可以达到同样的效果。

调整后的显示效果如图7-44所示。