庖丁UIKit之UIButton

App中最常見的也是基本少不了的交互迁匠,就是按鈕了。UIKit通過UIButton來提供按鈕服務(wù)楔脯。
UIButton的基本結(jié)構(gòu)如圖:

button_sturcture

包含一個圖標(biāo)UIImage,一個標(biāo)題UILabel忙芒。

UIButton繼承自UIControl,而UIControl又繼承自UIView,所以UIButton本質(zhì)上是一個UIView损拢,可以認為是一個容器View。

所以在IB里面渊啰,UIButton有“Image” 和“Background”兩個屬性可以設(shè)置探橱,并且都可以設(shè)置圖片,其中這個“Image”其實只是按鈕的一部分绘证,還可以追加一段標(biāo)題。如圖中:

a_button

背景設(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)用setTitlesetImage設(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末讨阻,一起剝皮案震驚了整個濱河市芥永,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌钝吮,老刑警劉巖埋涧,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異奇瘦,居然都是意外死亡棘催,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門耳标,熙熙樓的掌柜王于貴愁眉苦臉地迎上來醇坝,“玉大人,你說我怎么就攤上這事次坡『糁恚” “怎么了画畅?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長郑叠。 經(jīng)常有香客問我夜赵,道長,這世上最難降的妖魔是什么乡革? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任寇僧,我火速辦了婚禮,結(jié)果婚禮上沸版,老公的妹妹穿的比我還像新娘嘁傀。我一直安慰自己,他們只是感情好视粮,可當(dāng)我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布细办。 她就那樣靜靜地躺著,像睡著了一般蕾殴。 火紅的嫁衣襯著肌膚如雪笑撞。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天钓觉,我揣著相機與錄音茴肥,去河邊找鬼。 笑死荡灾,一個胖子當(dāng)著我的面吹牛瓤狐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播批幌,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼础锐,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了荧缘?” 一聲冷哼從身側(cè)響起皆警,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎胜宇,沒想到半個月后耀怜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡桐愉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年财破,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片从诲。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡左痢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情俊性,我是刑警寧澤略步,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站定页,受9級特大地震影響趟薄,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜典徊,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一杭煎、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧卒落,春花似錦羡铲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至腰湾,卻和暖如春雷恃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背费坊。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工褂萧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人葵萎。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像唱凯,于是被迫代替她去往敵國和親羡忘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 好奇觸摸事件是如何從屏幕轉(zhuǎn)移到APP內(nèi)的磕昼?困惑于Cell怎么突然不能點擊了卷雕?糾結(jié)于如何實現(xiàn)這個奇葩響應(yīng)需求?亦或是...
    Lotheve閱讀 57,362評論 51 599
  • 一個UIButton的實例變量票从, 使一個按鈕(button)在觸摸屏上生效漫雕。一個按鈕監(jiān)聽觸摸事件,當(dāng)被點擊時峰鄙,給目...
    wushuputi閱讀 1,509評論 0 1
  • 在iOS開發(fā)中經(jīng)常會涉及到觸摸事件浸间。本想自己總結(jié)一下,但是遇到了這篇文章吟榴,感覺總結(jié)的已經(jīng)很到位魁蒜,特此轉(zhuǎn)載。作者:L...
    WQ_UESTC閱讀 6,026評論 4 26
  • 對象繼承關(guān)系 UIButton 類本身定義繼承 UIControl ,描述了在 iOS 上所有用戶界面控件的常見基...
    獨木舟的木閱讀 3,741評論 0 3
  • 我 路過了 一堵 斑駁的墻 光線很暗 我使勁 睜大眼 睜大眼 我睜大眼 看到了 遠處 午后的 陽光 . LY.20...
    米谷吧奴古吧都來吧閱讀 201評論 0 1