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) //只设置文字内容标题偏移量

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注