Swift4.0学习笔记（五）——按钮(UIButton)
2017-12-27 本文已影响0人
古川不爱笑
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只能满足一些基本的使用场景，更多复杂的场景这种方式就显得非常局限了，等我理解了数据绑定之后再来补全最后这部分吧！
