Swift4.0学习笔记（五）——按钮(UIButton)

1.创建按钮

• UIButtonType.system：前面不带图标，默认文字颜色为蓝色，有触摸时的高亮效果
• UIButtonType.custom：定制按钮，前面不带图标，默认文字颜色为白色，无触摸时的高亮效果
• UIButtonType.contactAdd：前面带“+”图标按钮，默认文字颜色为蓝色，有触摸时的高亮效果
• UIButtonType.detailDisclosure：前面带“!”图标按钮，默认文字颜色为蓝色，有触摸时的高亮效果
• UIButtonType.infoDark：为感叹号“!”圆形按钮
• UIButtonType.infoLight：为感叹号“!”圆形按钮
  例如：

//定义控件x:30 y:100 width:80 height:40
let button = UIButton(type: .custom)//定义buttom为custom类型
button.frame = CGRect(x: 30, y: 100, width: 80, height: 40)
self.view.addSubview(button)
button.setTitle("custom", for: .normal)//设置按钮显示的文字

各种样式效果如下： 按钮样式效果

2.设置按钮不同状态下的文字、颜色和阴影颜色

• UIControlState.normal//普通状态
• UIControlState.highlighted//触摸状态
• UIControlState.disabled//禁用状态

button.setTitle("普通状态", for: .normal)//设置按钮显示的文字
button.setTitle("触摸状态", for: .highlighted)
button.setTitle("禁用状态", for: .disabled)
button.setTitleColor(UIColor.red, for: UIControlState.normal)
button.setTitleColor(UIColor.blue, for: UIControlState.highlighted)
button.setTitleColor(UIColor.gray, for: UIControlState.disabled)
button.setTitleShadowColor(UIColor.green, for:.normal) //普通状态下文字阴影的颜色
button.setTitleShadowColor(UIColor.yellow, for:.highlighted) //普通状态下文字阴影的颜色
button.setTitleShadowColor(UIColor.gray, for:.disabled) //普通状态下文字阴影的颜色

3.按钮背景颜色设置

• button.backgroundColor

button.backgroundColor = UIColor.green

4.按钮字体和大小设置

• button.titleLabel?.font

let button = UIButton(type: .system)//定义buttom为custom类型
button.frame = CGRect(x: 30, y: 70, width: 120, height: 40)
        self.view.addSubview(button)
button.setTitle("系统字体", for: .normal)//设置按钮显示的文字
button.titleLabel?.font = UIFont.systemFont(ofSize: 23)
button.setTitleColor(UIColor.red, for: UIControlState.normal)

        
let button1 = UIButton(type: .system)//定义buttom为custom类型
button1.frame = CGRect(x: 30, y: 120, width: 120, height: 40)
        self.view.addSubview(button1)
button1.setTitle("其它字体", for: .normal)//设置按钮显示的文字
button1.titleLabel?.font = UIFont.systemFont(ofSize: 23)
button1.setTitleColor(UIColor.red, for: UIControlState.normal)
button1.titleLabel?.font = UIFont.init(name: "HelveticaNeue-Bold", size: 23)//使用其它字体

字体效果.png

5.设置按钮图标

• button.setImage(UIImage?, for: UIControlState)
  当按钮类型为custom，处于highlighted和disable状态下图标会变暗，我们可以通过设置来禁用这种情况

button.setImage(UIImage(named:"alarm"), for: .normal)
button.adjustsImageWhenHighlighted = false //使触摸模式下按钮也不会变暗
button.adjustsImageWhenDisabled = false //使禁用模式下按钮也不会变暗

带图标的按钮.png

从上面的运行效果图可以看出，图标和文字几乎是贴在一起的，或者说图标能不能放在相对于文字的其它位置，我们一一来尝试一下。

调整文字和图标之间的间距

• 通过图片偏移量（imageEdgeInsets）设置间距

button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0)

imageEdgeInsets.png

• 通过文字偏移量（titleEdgeInsets）设置间距

button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)

titleEdgeInsets.png

改变图标与文字的相对位置

如果我们想要把文字和图片位置调换下（即文字在前、图片在后），或者文字和图片改成上下排列，那么同样通过设置 titleEdgeInsets 和 imageEdgeInsets 即可实现。

let imageSize = button.imageRect(forContentRect: button.frame)//获取图标的CGRect
let titleFont = button.titleLabel?.font//获取字体
let titleSize = button.currentTitle!.size(withAttributes:[NSAttributedStringKey.font: titleFont!])//获取文字的尺寸
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageSize.width * 2) , bottom: 0, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -(titleSize.width * 2 + 10))

效果如下： 图文换位.png

为方便快速的设置图片和文字的相对位置，以及间距，我们可以对UIButton进行扩展。
新建一个swift文件ButtonExt.swift

import UIKit
extension UIButton{
    func set(icon image: UIImage?, title: String, titleLocation: UIViewContentMode, padding: CGFloat, state: UIControlState ) {
        self.imageView?.contentMode = .center
        self.setImage(image, for: state)
        relativeLocation(title: title, location: titleLocation, padding: padding)
        self.titleLabel?.contentMode = .center
        self.setTitle(title, for: state)
    }
    
    private func relativeLocation(title: String, location: UIViewContentMode, padding: CGFloat){
        let imageSize = self.imageRect(forContentRect: self.frame)
        let titleFont = self.titleLabel?.font!
        let titleSize = title.size(withAttributes: [NSAttributedStringKey.font : titleFont!])
        
        var titleInsets: UIEdgeInsets
        var imageInsets: UIEdgeInsets
        
        switch location {
        case .top:
            titleInsets = UIEdgeInsets(top: -(imageSize.height + titleSize.height + padding),
                                       left: -(imageSize.width), bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -titleSize.width)
        case .left:
            titleInsets = UIEdgeInsets(top: 0, left: -(imageSize.width * 2), bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -(titleSize.width * 2 + padding))
        case .bottom:
            titleInsets = UIEdgeInsets(top: (imageSize.height + titleSize.height + padding),
                                       left: -(imageSize.width), bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -titleSize.width)
        case .right:
            titleInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -padding)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        default:
            titleInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        }
        self.titleEdgeInsets = titleInsets
        self.imageEdgeInsets = imageInsets
    }
}

使用说明

let button1 = UIButton(type: .custom)//定义buttom为custom类型
button1.frame = CGRect(x: 30, y: 120, width: 120, height: 40)
        self.view.addSubview(button1)
button1.titleLabel?.font = UIFont.systemFont(ofSize: 14)
button1.setTitleColor(UIColor.red, for: UIControlState.normal)
button1.set(icon: UIImage(named:"alarm"), title: "闹钟", titleLocation: .top, padding: 10, state: .normal)

效果截图： 字上图下.png

6.设置按钮背景图片

• button.setBackgroundImage(UIImage?, for: UIControlState)

button.setBackgroundImage(UIImage(named:"bgImg"), for: .normal)

背景图片.png

7.按钮文字太长处理方式

默认情况下，如果按钮文字太长超过按钮尺寸，则会省略中间的文字 文字处理.png

我们可以通过修改按钮中 titleLabel 的 lineBreakMode 属性，便可以调整按钮在文字超长的情况下如何显示，以及是否换行。

button.titleLabel?.lineBreakMode

lineBreakMode 共支持如下几种样式：

• byTruncatingHead：省略头部文字，省略部分用...代替
• byTruncatingMiddle：省略中间部分文字，省略部分用...代替（默认）
• byTruncatingTail：省略尾部文字，省略部分用...代替
• byClipping：直接将多余的部分截断
• byWordWrapping：自动换行（按词拆分）
• byCharWrapping：自动换行（按字符拆分）

注意：当设置自动换行后（byWordWrapping 或 byCharWrapping），我们可以在设置 title 时通过 \n 进行手动换行。

8.按钮的点击事件

常用的触摸事件类型：

• touchDown：单点触摸按下事件，点触屏幕
• touchDownRepeat：多点触摸按下事件，点触计数大于1，按下第2、3或第4根手指的时候
• touchDragInside：触摸在控件内拖动时
• touchDragOutside：触摸在控件外拖动时
• touchDragEnter：触摸从控件之外拖动到内部时
• touchDragExit：触摸从控件内部拖动到外部时
• touchUpInside：在控件之内触摸并抬起事件
• touchUpOutside：在控件之外触摸抬起事件
• touchCancel：触摸取消事件，即一次触摸因为放上太多手指而被取消，或者电话打断

我们通常通过addTarget为按钮添加点击事件

button.addTarget(Any?, action: Selector, for: UIControlEvents)

• 不传递点击对象

 override func viewDidLoad() {
        super.viewDidLoad()
//        self.view.backgroundColor = UIColor.lightText
        //定义控件x:30 y:100 width:80 height:40
       let button = UIButton(type: .custom)//定义buttom为custom类型
        button.frame = CGRect(x: 30, y: 70, width: 120, height: 40)
        self.view.addSubview(button)
        button.setTitle("按钮", for: .normal)//设置按钮显示的文字
        button.titleLabel?.font = UIFont.systemFont(ofSize: 23)
        button.setTitleColor(UIColor.white, for: UIControlState.normal)
        button.setBackgroundImage(UIImage(named:"bgImg"), for: .normal)
        button.addTarget(self, action: #selector(click), for: .touchUpInside)
    }
    
    
    @objc func click(){
        print("没有传递触摸对象")
    }

不传递点击对象.png

• 传递点击对象

button.addTarget(self, action: #selector(click(_:)), for: .touchUpInside)

@objc func click(_ sender: UIButton){
       print("传递触摸对象")
}

传递触摸对象.png

• 传递参数给相关的方法
  有时候我们需要将一些参数传到方法里面，但是selector里面的方法如果有参数，参数只能是点击对象，那怎么办呢？我们可以通过给button设置tag的方式将参数传递到方法里面

[图片上传中...(设置tag.png-4399e1-1514365204496-0)]
button.addTarget(self, action: #selector(click(_:)), for: .touchUpInside)
button.tag = 1

  
@objc func click(_ sender: UIButton){
       let tag = sender.tag
       print("传递的tag：\(tag)")
        
}

设置tag.png

按钮是app里面使用场景非常多的控件，我的笔记里面只讲述最基本的一些用法，更高级的一些用法就需要你们去尝试了，最后关于参数的传递问题，我还没有理解数据绑定的方式，设置tag只能满足一些基本的使用场景，更多复杂的场景这种方式就显得非常局限了，等我理解了数据绑定之后再来补全最后这部分吧！