iOS学习笔记(三)：UIButton

对于一个应用程序来说，用户交互就是生命。UILabel控件可以说是UIKit中最简单的基础显示控件，与之对应的，UIButton控件是UIKit中最简单基础的交互控件。顾名思义，UIButton是一个按钮控件，也的确发挥着我们iOS应用中按钮的功能。

一、创建一个按钮

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //定义一个button并设置button的类型
        let button = UIButton(type: .system)
        //大小
        button.frame = CGRect(x: 100, y: 260, width: 100, height :30)
        //背景颜色
        button.backgroundColor = UIColor.red
        //设置按钮上的文本
        button.setTitle("我是一个按钮", for: .normal)
        //添加按钮事件
        button.addTarget(self, action: #selector(print666), for: .touchUpInside)
        //添加到主视图
        self.view.addSubview(button)
    }
    
    @objc func print666() {
        print("666")
    }
    
}

运行结果如下图所示：

点击按钮后会在控制台打印“666”：

一般我们用UIButton控件类方法buttonWithType进行按钮控件的初始化（即定义button时的type属性），我们利用UIButtonType类型的枚举参数来确定创建的UIButton控件的风格，枚举值列举如下：

public enum UIButtonType : Int {
        case custom //自定义类型
        case system //系统预设类型
        case detailDisclosure //详情按钮类型
        case contactAdd //添加按钮类型
}

UIButton控件包括背景色、字体颜色、字体、单击状态等属性。custom风格是将这些属性全部采用默认值，后面需要开发者自行设置；system风格是系统定义好的一组属性设置的风格，通常就是我们在iOS自带app中看到的按钮风格；detailDisclosure风格会在button左边显示一个详情小图标；contactAdd风格是在按钮左边显示一个添加小图标。

回到最上面的代码。setTitle方法有两个参数，第一个设置按钮的标题文字，第二个设置显示此标题文字时的按钮状态。UIControlState结构体中定义了许多交互控件的状态，常用的属性如下：

public struct UIControlState : OptionSet {
        public static var normal: UIControlState { get } //正常状态
        public static var highlighted: UIControlState { get } //高亮状态
        public static var disabled: UIControlState { get } //不可用状态
        public static var selected: UIControlState { get } //选中状态
}

在上面的属性中，normal是按钮的初始状态，此时没有进行任何交互操作；highlighted为高亮状态，即用户手指单击到按钮但并没有抬起时的状态；disabled为不可用状态，此时用户的单击操作将无效；selected为选中状态，用于一些充当切换开关的按钮。

UIButton控件的核心功能是进行用户交互，通过addTarget方法进行触发方法的添加。这个方法需要3个参数：第一个参数是执行此触发方法的对象，通常填写当前视图控制器对象本身self；第二个参数为对应的方法；第三个参数为触发方法的条件，这里我们需要传入一个UIControlEvents类型的数据，常用的值定义如下：

public struct UIControlEvents : OptionSet {
        public static var allEvents: UIControlEvents { get } //响应所有事件
        public static var allTouchEvents: UIControlEvents { get } //响应所有触摸事件
        public static var allEditingEvents: UIControlEvents { get } //响应所有编辑事件
        public static var touchDown: UIControlEvents { get } //用户手指按下时触发
        public static var touchDownRepeat: UIControlEvents { get } //用户多次重复按下时触发
        public static var touchDragInside: UIControlEvents { get } //用户在控件范围内拖滑移动时触发
        public static var touchDragOutside: UIControlEvents { get } //用户在控件范围内按下，并拖拽到控件外围抬起时触发
        public static var touchDragEnter: UIControlEvents { get } //用户手指滑进控件范围内触发
        public static var touchDragExit: UIControlEvents { get } //用户手指拖滑结束时触发
        public static var touchUpInside: UIControlEvents { get } //用户在控件范围内单击时触发
        public static var touchUpOutside: UIControlEvents { get } //用户在控件范围外单击时触发
        public static var touchCancel: UIControlEvents { get } //触摸事件取消时触发
        public static var valueChanged: UIControlEvents { get } //控件value值改变时触发
}

二、进一步美化按钮控件

上述的例子，仅仅是创建了一个未加修饰的按钮控件。当然，我们可以通过UIButton的一些属性为其添加背景或内容图片来美化我们的按钮控件。

首先，我们需要在工程中添加一张图片，在工程左侧导航窗口部分中单击Assets.xcassets文件夹，选择一张图片将其拖入素材区：

通过下面的代码来对按钮控件进行设置：

let button = UIButton(type: .custom)
button.setBackgroundImage(UIImage(named: "1"), for: .normal)

运行后我们发现，按钮被添加了图片背景：

我们发现，背景图片效果是当图片作为背景时，按钮标题显示在图片层之上。UIButton中还有一个方法用于设置图片为内容图片，这种情况下图片将和标题并列显示，代码如下：

button.setImage(UIImage(named: "1"), for:  .normal)

效果如图所示：

在上图中我们看到，图片和文字是左右并排排列且共同居中显示。在很多时候，我们需要上下排列或以其他形式进行图片和文字排列。UIButton类中也提供了接口供我们进行内容、图片和文字位置设置，代码如下：

//四个参数分别代表上、左、下、右的偏移量
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) //整体内容的区域偏移量
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) //只设置图片内容偏移量
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) //只设置文字内容标题偏移量