UIButton在我們的開發(fā)過程中是隨處可見的,那么本人就其基本屬性和用法進(jìn)行了總結(jié),具體如下:
UIButton繼承自UIControl,所以UIControl的一些屬性和方法對于UIButton來說適用。
1、按鈕的創(chuàng)建#####
let btn: UIButton = UIButton()//沒有樣式
//let btns:UIButton =UIButton(type: UIButtonType)//有樣式
//let button = UIButton(frame:CGRect(x:10, y:150, width:100, height:30))//簡化創(chuàng)建方式
self.view.addSubview(button)
UIButtonType有以下類型
public enum UIButtonType : Int {
case custom // no button type
@available(iOS 7.0, *)
case system // standard system button
case detailDisclosure
case infoLight
case infoDark
case contactAdd
public static var roundedRect: UIButtonType { get } // Deprecated, use UIButtonTypeSystem instead
}
//使用
let btn: UIButton = UIButton(type: .Custom)
2、UIButton設(shè)置字內(nèi)容和顏色#####
UIButton所對應(yīng)的狀態(tài)有幾種
/**
Normal (默認(rèn)狀態(tài))
Highlighted (高亮狀態(tài))點(diǎn)擊按鈕不放
Disabled (使能狀態(tài))就是是否可用狀態(tài)-->禁用的狀態(tài)才會顯現(xiàn)
Selected (選中狀態(tài))通過selected屬性設(shè)置
*/
//顯示文字
button1.setTitle("普通狀態(tài)", for: .normal)
button1.setTitle("高粱狀態(tài)", for: .highlighted)
button1.setTitle("禁用狀態(tài)", for: .disabled)
//顯示文字顏色
button1.setTitleColor(UIColor.red, for: .normal)
button1.setTitleColor(UIColor.blue, for: .highlighted)
button1.setTitleColor(UIColor.cyan, for: .selected)
button1.setTitleColor(UIColor.cyan, for: .disabled)
//陰影文字顏色設(shè)置
button1.setTitleShadowColor(UIColor.cyan, for: .normal)
button1.setTitleShadowColor(UIColor.green, for: .highlighted)
button1.setTitleShadowColor(UIColor.brown, for: .disabled)
button1.setTitleShadowColor(UIColor.darkGray, for: .selected)
3、UIButton設(shè)置背景顏色和背景圖片#####
//背景顏色
button2.backgroundColor = UIColor.orange
//背景圖片 button4.setBackgroundImage(UIImage(named:"XXX"), for: .normal)
4、UIButton設(shè)置字體大小#####
button.titleLabel?.font = UIFont.systemFont(ofSize: 12)
5、禁用UIButton#####
button.isEnabled = false
button.isEnabled = true
6、設(shè)置圓角#####
button.layer.cornerRadius = 5
button.layer.masksToBounds = true
7、設(shè)置邊框?qū)挾?顏色#####
button.layer.borderWidth = 2
button.layer.borderColor = UIColor.red.cgColor
8、設(shè)置背景圖片為圓角#####
buttonImage.setImage(UIImage(named:"1") , forState: UIControlState.Normal)
//設(shè)置背景圖片為圓角
buttonImage.imageView?.layer.cornerRadius = 50
默認(rèn)情況下按鈕會被渲染成單一顏色;系統(tǒng)藍(lán)
button.setImage(UIImage(named:"icon1"),forState:.Normal) //設(shè)置圖標(biāo)
button.adjustsImageWhenHighlighted=false //使觸摸模式下按鈕也不會變暗(半透明)
button.adjustsImageWhenDisabled=false //使禁用模式下按鈕也不會變暗(半透明)
也可以設(shè)置成保留圖標(biāo)原來的顏色
let iconImage = UIImage(named:"icon2")?.withRenderingMode(.alwaysOriginal)
button.setImage(iconImage, for:.normal) //設(shè)置圖標(biāo)
button.adjustsImageWhenHighlighted = false //使觸摸模式下按鈕也不會變暗(半透明)
button.adjustsImageWhenDisabled = false //使禁用模式下按鈕也不會變暗(半透明)
9、UIButton上圖片和文字調(diào)整#####
UIButton上添加圖片和文字,有時需要我們調(diào)整
方向?yàn)槟鏁r針方向,上、左、下、右依次去設(shè)置的
btn.imageEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)
btn.titleEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)
實(shí)例如下:
//創(chuàng)建一個圖片一個文字的按鈕
let btn2: UIButton = UIButton(type: .Custom)
btn2.frame = CGRectMake(50, 100, 120, 35)
btn2.setImage(UIImage(named: "1"), forState: .Normal)
btn2.backgroundColor = UIColor.blackColor()
btn2.titleLabel?.font = UIFont.systemFontOfSize(20)
btn2.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
btn2.setTitle("圖片按鈕", forState: .Normal)
//偏移量,分別為上下左右
btn2.imageEdgeInsets = UIEdgeInsetsMake(0, -50, 0, 0)
btn2.titleEdgeInsets = UIEdgeInsetsMake(0, -80, 0, 5)
btn2.setTitleColor(UIColor.whiteColor(), forState: .Normal)
btn2.adjustsImageWhenHighlighted = false
self.view.addSubview(btn2)
10、添加按鈕的點(diǎn)擊事件#####
按鈕的觸摸時間有以下類型
touchDown:單點(diǎn)觸摸按下事件,點(diǎn)觸屏幕
touchDownRepeat:多點(diǎn)觸摸按下事件,點(diǎn)觸計(jì)數(shù)大于1,按下第2、3或第4根手指的時候
touchDragInside:觸摸在控件內(nèi)拖動時
touchDragOutside:觸摸在控件外拖動時
touchDragEnter:觸摸從控件之外拖動到內(nèi)部時
touchDragExit:觸摸從控件內(nèi)部拖動到外部時
touchUpInside:在控件之內(nèi)觸摸并抬起事件
touchUpOutside:在控件之外觸摸抬起事件
touchCancel:觸摸取消事件,即一次觸摸因?yàn)榉派咸嗍种付蝗∠蛘唠娫挻驍?
button1.addTarget(self,action:#selector(methodName), for: .touchUpInside)
button1.addTarget(self, action:#selector(someMethod(button:)), for:.touchUpInside)
//上
func methodName() {
print("tapped")
}
//下
func someMethod(button:UIButton) {
print("你是誰啊,其實(shí)就是一個按鈕")
}
11、按鈕文字過長時候的顯示處理#####
我們創(chuàng)建一個按鈕
let button = UIButton(frame:CGRect(x:20, y:50, width:130, height:50))
button.setTitle("這個是一長長長長長長長長長長的文字", for:.normal) //普通狀態(tài)下的文字
button.setTitleColor(UIColor.white, for: .normal) //普通狀態(tài)下文字的顏色
button.titleLabel?.lineBreakMode = .byTruncatingTail
button.backgroundColor = UIColor.orange
self.view.addSubview(button)

運(yùn)行效果
我們通過修改 button 按鈕中 titleLabel 的 lineBreakMode 屬性,便可以調(diào)整按鈕在文字超長的情況下如何顯示,以及是否換行。
其有以下幾種樣式可供選擇,API的介紹也是簡單明了
public enum NSLineBreakMode : Int {
case byWordWrapping // Wrap at word boundaries, default
case byCharWrapping // Wrap at character boundaries
case byClipping // Simply clip
case byTruncatingHead // Truncate at head of line: "...wxyz"
case byTruncatingTail // Truncate at tail of line: "abcd..."
case byTruncatingMiddle // Truncate middle of line: "ab...yz"
}
2019年12月18日補(bǔ)充以下:
UIButton的圖片文字布局
我們創(chuàng)建一個按鈕且其同時擁有文字和圖片屬性,會按照系統(tǒng)的默認(rèn)樣式(左圖片,右文字)顯示。但是有的時候,我們會遇到其他的設(shè)計(jì)需求,比如:左文字有圖片、上文字下圖片、上圖片下文字等。這個時候就需要我們自定義按鈕的顯示樣式來滿足復(fù)雜多變的設(shè)計(jì)需求了。
我自定義了一個按鈕的extension來滿足以上的功能,代碼如下:
import Foundation
import UIKit
enum ButtonLayout {
case leftImage
case rightImage
case topImage
case bottomImage
}
extension UIButton {
func setLayoutType(type: ButtonLayout){
let image: UIImage? = self.imageView?.image
switch type {
case .leftImage:
print("系統(tǒng)默認(rèn)的方式")
case .rightImage:
self.imageEdgeInsets = UIEdgeInsets(top:0, left: (self.titleLabel?.frame.size.width)!, bottom: 0, right:-(self.titleLabel?.frame.size.width)!)
self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(image?.size.width)!, bottom: 0, right: (image?.size.width)!)
case .topImage:
self.imageEdgeInsets = UIEdgeInsets(top:-(self.titleLabel?.frame.size.height)!, left: 0, bottom: 0, right:-((self.titleLabel?.frame.size.width)!))
//圖片距離右邊框距離減少圖片的寬度,距離上m邊距的距離減少文字的高度
self.titleEdgeInsets = UIEdgeInsets(top: ((image?.size.height)!), left: -((image?.size.width)!), bottom: 0, right:0)
//文字距離上邊框的距離增加imageView的高度,距離左邊框減少imageView的寬度,距離下邊框和右邊框距離不變
default:
self.imageEdgeInsets = UIEdgeInsets(top: (self.titleLabel?.frame.size.height)!, left:0, bottom: 0, right:-((self.titleLabel?.frame.size.width)!))
//圖片距離上邊距增加文字的高度 距離右邊距減少文字的寬度
self.titleEdgeInsets = UIEdgeInsets(top: -(image?.size.height)!, left: -(image?.size.width)!, bottom: 0, right: 0)
}
}
}
如果有更進(jìn)一步的需求,比如設(shè)置文字和圖片的間距等,可以在此基礎(chǔ)之上添加響應(yīng)的參數(shù)配置即可。