iOS 不規(guī)則Button點(diǎn)擊

需求

利用圖片道川,實(shí)現(xiàn)一個(gè)如圖的按鈕組。

demand.png

遇到的問題

如下圖所示:

  • 功能1立宜、2冒萄、3、4的按鈕可以實(shí)現(xiàn)點(diǎn)擊功能橙数。但是在紅色方框四角的位置尊流,也會(huì)響應(yīng)相應(yīng)的點(diǎn)擊事件。
  • 紫色方框內(nèi)四角區(qū)域點(diǎn)擊時(shí)灯帮,響應(yīng)的方法是功能5崖技,而不是對(duì)應(yīng)的功能。
question.png

解決思路

期望的結(jié)果

  • 尋找到合適的Button來處理點(diǎn)擊事件

需要弄明白的問題

  • 事件在如何傳遞的钟哥?
  • 怎么判斷誰來處理當(dāng)前事件迎献?

事件是如何傳遞的?

  1. 當(dāng)用戶觸摸實(shí)際屏幕時(shí)腻贰,會(huì)生成一個(gè)Touch Event吁恍,將此事件添加到UIApplication管理的事件隊(duì)列之中。
  2. UIApplication從事件隊(duì)列之中按順序取出事件分發(fā)到視圖去處理播演。
  3. 當(dāng)事件被發(fā)出以后冀瓦,會(huì)從keyWindow開始,依次向上傳遞写烤,包括Controller以及View翼闽,最后找到合適的視圖來響應(yīng)事件。

可以看出:當(dāng)一個(gè)事件發(fā)生后洲炊,事件會(huì)從父控件傳給子控件感局,也就是說由UIApplication -> UIWindow -> UIView -> initial view,以上就是事件的傳遞,也就是尋找最合適的view的過程选浑。

涉及到兩個(gè)方法:

func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView?
func point(inside point: CGPoint, with event: UIEvent?) -> Bool

當(dāng)UIApplication發(fā)送事件到keyWindow時(shí)蓝厌,會(huì)調(diào)用 hitTest來尋找最合適的視圖處理事件。判斷邏輯如下:

  1. 首先判斷自身是否能夠響應(yīng)觸摸事件(userInteractionEnabled==true古徒、hidden==true拓提、alpha<=0.01不能響應(yīng)觸摸事件),若能響應(yīng)則下一步,否則返回nil隧膘。

  2. 如果可以響應(yīng)觸摸事件代态,調(diào)用pointInside來判斷是否在顯示區(qū)域內(nèi)寺惫,如果不在其中,pointInside返回false蹦疑,同時(shí)hitTest返回nil西雀。

  3. 如果 pointInside返回true,表示在當(dāng)前的視圖之中歉摧,然后<font color="red">倒序</font>遍歷該視圖的子視圖,重復(fù)上述步驟艇肴,直到某一視圖可以響應(yīng),hitTest:返回該視圖叁温。

  4. 如果執(zhí)行完上述步驟以后再悼,沒有符合條件的視圖響應(yīng)事件,則返回視圖本身膝但,表示只有當(dāng)前視圖符合條件冲九,能夠處理該事件。

     Q:為什么倒序遍歷跟束?
     A:因?yàn)樵趕ubViews數(shù)組中莺奸,最后添加的視圖,在視圖層級(jí)中處于最上方冀宴。
    

怎么判斷誰來處理當(dāng)前事件灭贷?

當(dāng)知道的上面事件傳遞機(jī)制后,我們就能理清楚我們的Button處理事件的邏輯了:

  1. 自定義Button繼承自系統(tǒng)的Button花鹅。

  2. 重寫 point(inside point: CGPoint, with event: UIEvent?) -> Bool 方法氧腰。在其中判斷當(dāng)前事件是否需要自身處理。

    • 判斷點(diǎn)是否在自身button.imageView的frame范圍內(nèi)
    • 得到點(diǎn)擊點(diǎn)在button.imageView中該點(diǎn)的顏色值
    • 如果得到的色值中alpha小于閥值刨肃,則返回false

具體代碼可以查看JTShapedButton源碼古拴。

實(shí)現(xiàn)效果

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市真友,隨后出現(xiàn)的幾起案子黄痪,更是在濱河造成了極大的恐慌,老刑警劉巖盔然,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桅打,死亡現(xiàn)場離奇詭異,居然都是意外死亡愈案,警方通過查閱死者的電腦和手機(jī)挺尾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來站绪,“玉大人遭铺,你說我怎么就攤上這事。” “怎么了魂挂?”我有些...
    開封第一講書人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵甫题,是天一觀的道長。 經(jīng)常有香客問我涂召,道長坠非,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任果正,我火速辦了婚禮炎码,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘秋泳。我一直安慰自己辅肾,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開白布轮锥。 她就那樣靜靜地躺著,像睡著了一般要尔。 火紅的嫁衣襯著肌膚如雪舍杜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評(píng)論 1 309
  • 那天赵辕,我揣著相機(jī)與錄音既绩,去河邊找鬼。 笑死还惠,一個(gè)胖子當(dāng)著我的面吹牛饲握,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蚕键,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼救欧,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了锣光?” 一聲冷哼從身側(cè)響起笆怠,我...
    開封第一講書人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎誊爹,沒想到半個(gè)月后蹬刷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡频丘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年办成,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搂漠。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡迂卢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情冷守,我是刑警寧澤刀崖,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站拍摇,受9級(jí)特大地震影響亮钦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜充活,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一蜂莉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧混卵,春花似錦映穗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赘淮,卻和暖如春辕录,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背梢卸。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來泰國打工走诞, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蛤高。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓蚣旱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親戴陡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子塞绿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

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

  • 重點(diǎn)參考鏈接: View Programming Guide for iOS https://developer....
    Kevin_Junbaozi閱讀 4,463評(píng)論 0 15
  • 在iOS開發(fā)中經(jīng)常會(huì)涉及到觸摸事件。本想自己總結(jié)一下恤批,但是遇到了這篇文章位隶,感覺總結(jié)的已經(jīng)很到位,特此轉(zhuǎn)載开皿。作者:L...
    WQ_UESTC閱讀 6,024評(píng)論 4 26
  • 本文主要講解iOS觸摸事件的一系列機(jī)制涧黄,涉及的問題大致包括: 觸摸事件由觸屏生成后如何傳遞到當(dāng)前應(yīng)用? 應(yīng)用接收觸...
    baihualinxin閱讀 1,211評(píng)論 0 9
  • 轉(zhuǎn)載: https://blog.csdn.net/qq871531334/article/details/822...
    NicooYang閱讀 1,591評(píng)論 0 9
  • 為了方便理解,會(huì)分為三步去解說, 1,點(diǎn)擊事件找到對(duì)應(yīng)的點(diǎn)擊的視圖的處理流程,2, 進(jìn)行具體例子分析. 3, 常用...
    小鄉(xiāng)123閱讀 3,384評(píng)論 0 0