UIButton 教程
1.UIButton基本操作
1.創(chuàng)建按鈕
let btn: UIButton = UIButton()//沒(méi)有樣式 let btns:UIButton =UIButton(type: UIButtonType)//有樣式 let button = UIButton(frame:CGRect(x:10, y:150, width:100, height:30))//簡(jiǎn)化創(chuàng)建方式
** UIButtonType有以下類(lèi)型 **
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)
** UIButton狀態(tài)類(lèi)型 **
/** Normal (默認(rèn)狀態(tài)) Highlighted (高亮狀態(tài))點(diǎn)擊按鈕不放 Disabled (使能狀態(tài))就是是否可用狀態(tài)-->禁用的狀態(tài)才會(huì)顯現(xiàn) Selected (選中狀態(tài))通過(guò)selected屬性設(shè)置 */
2、UIButton設(shè)置字內(nèi)容和顏色
//顯示文字 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)情況下按鈕會(huì)被渲染成單一顏色;系統(tǒng)藍(lán) button.setImage(UIImage(named:"icon1"),forState:.Normal) //設(shè)置圖標(biāo) button.adjustsImageWhenHighlighted=false //使觸摸模式下按鈕也不會(huì)變暗(半透明) button.adjustsImageWhenDisabled=false //使禁用模式下按鈕也不會(huì)變暗(半透明) 也可以設(shè)置成保留圖標(biāo)原來(lái)的顏色 let iconImage = UIImage(named:"icon2")?.withRenderingMode(.alwaysOriginal) button.setImage(iconImage, for:.normal) //設(shè)置圖標(biāo) button.adjustsImageWhenHighlighted = false //使觸摸模式下按鈕也不會(huì)變暗(半透明) button.adjustsImageWhenDisabled = false //使禁用模式下按鈕也不會(huì)變暗(半透明)
9.UIButton上圖片和文字調(diào)整
? UIButton上添加圖片和文字苟径,有時(shí)需要我們調(diào)整方向?yàn)槟鏁r(shí)針?lè)较蛘ㄏ纤觥⒆笈埠濉⑾滤骄凇⒂乙来稳ピO(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)建一個(gè)圖片一個(gè)文字的按鈕 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)擊事件
按鈕的觸摸時(shí)間有以下類(lèi)型
touchDown:?jiǎn)吸c(diǎn)觸摸按下事件香璃,點(diǎn)觸屏幕 touchDownRepeat:多點(diǎn)觸摸按下事件,點(diǎn)觸計(jì)數(shù)大于1舟误,按下第2葡秒、3或第4根手指的時(shí)候 touchDragInside:觸摸在控件內(nèi)拖動(dòng)時(shí) touchDragOutside:觸摸在控件外拖動(dòng)時(shí) touchDragEnter:觸摸從控件之外拖動(dòng)到內(nèi)部時(shí) touchDragExit:觸摸從控件內(nèi)部拖動(dòng)到外部時(shí) touchUpInside:在控件之內(nèi)觸摸并抬起事件 touchUpOutside:在控件之外觸摸抬起事件 touchCancel:觸摸取消事件,即一次觸摸因?yàn)榉派咸嗍种付蝗∠兑纾蛘唠娫?huà)打斷
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("你是誰(shuí)啊眯牧,其實(shí)就是一個(gè)按鈕") }
2.自定義操作
1.UIButton的圖片文字布局
創(chuàng)建一個(gè)按鈕且其同時(shí)擁有文字和圖片屬性,會(huì)按照系統(tǒng)的默認(rèn)樣式(左圖片赖草,右文字)顯示学少。但是有的時(shí)候,我們會(huì)遇到其他的設(shè)計(jì)需求秧骑,比如:左文字有圖片版确、上文字下圖片、上圖片下文字等乎折。這個(gè)時(shí)候就需要我們自定義按鈕的顯示樣式來(lái)滿(mǎn)足復(fù)雜多變的設(shè)計(jì)需求了绒疗。
我自定義了一個(gè)按鈕的extension來(lái)滿(mǎn)足以上的功能,代碼如下:
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)
}
}
}