App中最常見的也是基本少不了的交互迁匠,就是按鈕了。UIKit通過UIButton來提供按鈕服務(wù)楔脯。
UIButton的基本結(jié)構(gòu)如圖:
包含一個圖標(biāo)UIImage,一個標(biāo)題UILabel忙芒。
UIButton繼承自UIControl,而UIControl又繼承自UIView,所以UIButton本質(zhì)上是一個UIView损拢,可以認為是一個容器View。
所以在IB里面渊啰,UIButton有“Image” 和“Background”兩個屬性可以設(shè)置探橱,并且都可以設(shè)置圖片,其中這個“Image”其實只是按鈕的一部分绘证,還可以追加一段標(biāo)題。如圖中:
背景設(shè)置成藍色哗讥,一個圖標(biāo)以及一個標(biāo)題“Pause”嚷那。
0. 各種各樣的按鈕
為了方便使用,UIKit提供的五中固定結(jié)構(gòu)的按鈕類杆煞,由UIButtonType枚舉來表示:
- case system : 最常用的魏宽,標(biāo)題和圖片都可以自由設(shè)置,并且按下的時候會變暗决乎,產(chǎn)生閃爍的點擊效果
-
case detailDisclosure :info_button
外形固定队询,是一個感嘆號,用于表示點擊后有說明信息的情況构诚。
- case infoLight :和“detailDisclosure”但是點擊時會亮色閃爍蚌斩,背景變大,特別醒目
- case infoDark : 和“detailDisclosure”但是點擊時會暗色閃爍范嘱,背景變大送膳,特別醒目
-
case contactAdd :add_button
外形固定,是一個?號丑蛤,用于表示添加的意思
除了上面五種叠聋,還有一種case custom
表示完全自定義,用戶根據(jù)上面介紹的UIButton的結(jié)構(gòu)受裹,自行組織按鈕的外形和效果碌补。
Apple的UI設(shè)計規(guī)范描述了哪些場景下推薦用系統(tǒng)自定義的按鈕。
1. 使用步驟
step1:選擇一個類型類創(chuàng)建一個按鈕
let codeBtn:UIButton = UIButton(type:.system)
UIButton的構(gòu)造函數(shù)需要指定其類型
step2: 設(shè)置按鈕的背景圖片或者標(biāo)題棉饶,并設(shè)置好大小
func setTitle(_ title: String?, for state: UIControlState)
func setImage(_ image: UIImage?, for state: UIControlState)
通過調(diào)用setTitle
和setImage
設(shè)置標(biāo)題和圖片厦章。每個UIButton都有好幾個狀態(tài)UIControlState。參見下面的狀態(tài)介紹
當(dāng)然還有其他幾個選項砰盐,但是基本用不上闷袒,這里也沒有必要理出來。
step3: 為按鈕添加觸發(fā)執(zhí)行的動作
codeBtn.addTarget(self, action: #selector(onCodeBtnClicked(sender:)), for:.touchDown)
@IBAction func onCodeBtnClicked(sender: UIButton) {
}
這里定義了一個@IBAction
的Action方法岩梳,然后調(diào)用UIButton的func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControlEvents)
添加按鈕在對應(yīng)狀態(tài)下的觸發(fā)動作囊骤。
step4: 調(diào)整按鈕在UI中的位置
UIButton的本質(zhì)是一個UIView晃择,所以通過設(shè)置其Frame就可以設(shè)置設(shè)置按鈕的大小和位置。當(dāng)然作為后現(xiàn)代化iOS UI也物,肯定不應(yīng)該用frame來做布局宫屠,通過設(shè)置UIView的autolayout規(guī)則,來對UIButton進行大小和位置布局才是最佳選擇滑蚯。
step5: 提供輔助信息和國際化的文字或者圖片
對于UIButton的標(biāo)題和圖片浪蹂,根據(jù)系統(tǒng)獲得的localizations來進行設(shè)置。當(dāng)然最簡單的就是把Plist里面的location配置成對應(yīng)的位置告材,比如“zh-CN”坤次,這樣默認的按鈕顯示就是中文了。
2.為按鈕添加觸發(fā)動作
UIButton繼承自UIControl斥赋,所以他也繼承了UIControl的事件觸發(fā)功能缰猴,而UIButton通常是不可以編輯的,所以主要是觸碰事件疤剑。觸碰事件的定義可以參考Apple的官方手冊Target-Action
上面介紹了用func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControlEvents)
來為按鈕添加特定狀態(tài)時所發(fā)生的動作滑绒。這里target表示的是action所屬的對象,也就是要觸發(fā)那個對象的那個方法隘膘。而Selector是一個方法回調(diào)疑故。其可以為:
@IBAction func doSomething()
@IBAction func doSomething(sender: UIButton)
@IBAction func doSomething(sender: UIButton, forEvent event: UIEvent)
三種形式,@IBAction
的修飾弯菊,使得其可以被連接到IB的上纵势。sender: UIButton
表示是哪個按鈕被觸發(fā)了,這樣在函數(shù)總通過判斷誰觸發(fā)的误续,就可以為多個按鈕綁定同一個“IBAction”了吨悍。最后forEvent event: UIEvent
提供了顆粒度控制,判斷當(dāng)前是什么事件被觸發(fā)了蹋嵌,是否需要相應(yīng)育瓜。
當(dāng)然,Swift中的Selector和OC中的不同栽烂,用“#”大頭躏仇,后面接函數(shù)原型,比如:
#selector(onCodeBtnClicked(sender:))
UIButton定義了幾種常見的事件腺办,而不用通過“UITapGestureRecognizer”來實現(xiàn):
事件 | 事件名 | 意義 |
---|---|---|
單擊 | touchDown | 一般表示單擊焰手,當(dāng)然多次按,也會被觸發(fā) |
雙擊 | touchDownRepeat | 一般表示雙擊怀喉,當(dāng)然多余兩次的連續(xù)按也會觸發(fā)书妻,通過tapCount可以判斷按了幾次 |
當(dāng)然UIControl還定義了其他一些觸摸事件比如
touchDragInside、
touchDragOutside躬拢、
touchDragOutside躲履、
touchDragExit见间、
touchUpInside、
touchUpOutside工猜、
touchCancel但是對按鈕基本上都用不上米诉。
3. 設(shè)置按鈕的狀態(tài)屬性
同樣因為UIButton繼承自UIControl,所以其有個UIControlState
屬性表示當(dāng)前所處的狀態(tài)篷帅,UIControlState定義了很多個狀態(tài)史侣,但是UIButton通常只用到如下幾個狀態(tài)。
狀態(tài) | 意義 |
---|---|
normal | 沒有被觸發(fā)的情況下 |
highlighted | 按鈕被按下魏身,但是沒有抬起的狀態(tài) |
disabled | 按鈕不可用的狀態(tài) |
selected | 選中狀態(tài)惊橱,比如默認選項 |
所以只要對其進行背景或者標(biāo)題文字的設(shè)置就可以了。最常見的就是叠骑,當(dāng)按鈕被按下的時候李皇,設(shè)置其背景圖片為暗色,這樣營造出一種按下時閃爍的效果宙枷。這個效果系統(tǒng)自帶的五中按鈕都自動實現(xiàn)了,如果是自己自定義的按鈕則要自己去實現(xiàn)茧跋。
4. 總結(jié)
UIButton表示的按鈕分成五大類加上一類自定義慰丛,一般情況下使用.System即可,需要特殊效果時瘾杭,可以使用.Custom進行自定義诅病,按照Apple的UI設(shè)計規(guī)則,部分場合最好還是用系統(tǒng)提供的五大類型按鈕粥烁。為按鈕添加的點擊動作可以按照不同的點擊事件進行區(qū)別贤笆,并可以設(shè)置按鈕在對應(yīng)狀態(tài)下的外觀表現(xiàn)。
參考
UIButton API Reference
Cocoa Application Competencies for iOS