ios做个菱形的Button?

    面试官:“如何制作一个菱形的Button,比如现在button的背景图是个菱形,如何实现点击图片中的菱形内有响应而点击菱形外没有响应?“ 

    今天上班时脑子里突然闪过了这个场景和这个问题,上述是一个真实的场景,当然结果是悲惨的....   我一方面责怪自己没有在面试后就马上去总结下这个问题,另一方面开始考虑这个问题应该如何实现。虽然说亡羊补牢已经晚了,就当是给自己的一个教训吧。废话说了这么多,那到底如何才能实现上述需求呢?

    首先我想试用button的layer层去绘制整个button,结果当然是否定的,layer层负责button的绘制和显示,但是它并没有响应交互(触摸)事件的接口,所以无论这个button长啥样儿,负责响应的部分还是原来的样子。看样子只能另行他法了,其实到目前为止我们的思路都是处于视觉上去解决这个事情。实际上应该从iOS响应触碰事件的角度去考虑,因此不得不扯出一个关键词:响应链。

    在iOS中,交互事件分为三类——触控事件、传感器事件、远程控制事件。既然是按键的点击响应,那这里我们只谈谈触控事件。当用户与App发生触摸交互行为时,系统不断发送给我们App的那些事件对象,然后按照特定的路径传递给我们App中的一些对象来处理。iOS中我们用UITouch表示触摸对象,UIEvent表示触摸事件,UIEvent中包含与用户触摸操作相关的所有UITouch对象(allTouches)。UIKit使用UIResponder作为响应对象,来响应系统传递过来的事件并进行处理。UIApplication、UIViewController、UIView、和所有从UIView派生出来的UIKit类(包括UIWindow)都直接或间接地继承自UIResponder类。而它则为我们提供了四种方法来响应触控事件。

1- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

2- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

3- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

4- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event

    其中UITouch类提供了触控操作的时间、location以及tapCount等属性(readonly)。这就表明我们可以通过覆写上述四种方法来实现对任意一种视图的自定义触控。

响应链是什么?从字面意义描述,响应链是一系列相连的响应者对象。而从系统角度出发,响应链是一个可以响应用户交互行为的过程。针对触控事件,当一个用户点击了App视图上的某一个视图时,系统中经历了以下两个关键过程:

    1、返回触摸事件发生的Hit-test视图

首先,触摸事件由UIApplication对象传递给App的关键窗口对象(key window),而窗口对象则尝试把事件传递给触摸发生的视图,这个视图被称作hit-test视图,而寻找hit-test视图的过程被称作hit-testing。Hit-testing包括检查触摸事件是否发生在任何相关视图对象的范围内, 如果是,则递归地检查所有视图的子视图。在视图层次中的最底层视图,如果它包含了触摸点,那么它就是hit-test视图。等 iOS决定了hit-test视图之后,它把触摸事件传递给该视图以便处理。hitTest:withEvent: 方法为给定的CGPoint 和 UIEvent返回hit-test 视图。hitTest:withEvent:方法首先会调用pointInside:withEvent: 方法。如果触摸点在视图范围内,则pointInside:withEvent:返回YES。然后,方法递归地给每个子视图调用hitTest:withEvent:方法并。如果传递到hitTest:withEvent:方法的点不再视图的范围内,pointInside:withEvent:方法返回NO,则该触摸点被忽视,并且hitTest:withEvent:返回nil. 如果一个子视图返回NO,则视图层次的整个分支都被忽视。如果hit-test视图被找到,则又它处理触摸事件。

    2、由Hit-test视图开始的触摸事件传递

    很多类型的事件都在事件传递中依赖响应链。 响应链是一系列相连的响应者对象。 它由第一个响应者开始,以应用对象结束。 如果第一响应者不能处理该事件,它把事件传递给响应链中的下一个响应者。在触摸事件中,如果hit-test视图无法处理一个触摸事件,则该事件以hit-test视图开始的响应链中往上传递。

扯了那么多题外话,那到底如何实现一个菱形的button呢?其实关键点就在寻找hit-test视图中,我们可以自定义button的子类,并在创建按键时实例化其子类,当我们点击button时,系统会进入寻找触摸事件发生的Hit-test视图的过程,此时我们通过覆写pointInside:withEvent:方法(入参会传入触控点CGPoint),如果触点落在了菱形外,我们就返回NO,则该点就会被忽视,无法响应点击事件。如果落在了菱形内,返回YES,表明被找到,则可以响应点击事件。那么如何区分菱形的内外呢? 其实这是一个仁者见仁的事情,OBShapedButton为我们提供了一种思路:

如果button的背景图是个菱形,由于图片是矩形,那么菱形外的alpha值必定为0,因此,我们可以通过计算得出图片中当前触摸点(CGPoint)的alpha值,再与我们的预设门限值作比较,如果触摸点在菱形内则alpha大于预设值,返回YES,反之则返回NO。上面的代码判断alpha值,下面的代码为覆写pointInside:withEvent方法,利用alpha的判断结果确定触摸点在菱形外还是菱形内。这样就达到了当点击菱形外时,因为pointInside:withEvent返回NO,从而系统放弃了对hit-test视图的寻找,从而不会进行响应的效果了。


       其实掌握了方法,无所谓菱形圆形三角形,判断方法都是一样的,而根据point的alpha值也只是其中一种思路,毕竟内部原理了解过后,实现方式就有很多种嘛。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 在iOS开发中经常会涉及到触摸事件。本想自己总结一下,但是遇到了这篇文章,感觉总结的已经很到位,特此转载。作者:L...
    WQ_UESTC阅读 5,988评论 4 26
  • 好奇触摸事件是如何从屏幕转移到APP内的?困惑于Cell怎么突然不能点击了?纠结于如何实现这个奇葩响应需求?亦或是...
    Lotheve阅读 56,629评论 51 597
  • iOS开发中的事件处理 理论非原创,是对网上资料的整理以及Demo验证 一. UIResponder 1.1 事件...
    丧心病狂乐阅读 660评论 0 0
  • 在开发过程中,大家或多或少的都会碰到令人头疼的手势冲突问题,正好前两天碰到一个类似的bug,于是借着这个机会了解了...
    闫仕伟阅读 5,294评论 2 23
  • 用户以多种方式操纵他们的iOS设备,例如触摸屏幕或摇动设备。 iOS会解释用户何时以及如何操作硬件并将此信息传递到...
    坤坤同学阅读 3,978评论 7 19