iOS实现不规则Button点击效果实例代码

需求

利用图片,实现一个如图的按钮组。

遇到的问题

如下图所示:

  • 功能1、2、3、4的按钮可以实现点击功能。但是在红色方框四角的位置,也会响应相应的点击事件。
  • 紫色方框内四角区域点击时,响应的方法是功能5,而不是对应的功能。

解决思路

期望的结果

  • 寻找到合适的Button来处理点击事件

需要弄明白的问题

  • 事件在如何传递的?
  • 怎么判断谁来处理当前事件?

事件是如何传递的?

  1. 当用户触摸实际屏幕时,会生成一个Touch Event,将此事件添加到UIApplication管理的事件队列之中。
  2. UIApplication从事件队列之中按顺序取出事件分发到视图去处理。
  3. 当事件被发出以后,会从keyWindow开始,依次向上传递,包括Controller以及View,最后找到合适的视图来响应事件。

可以看出:当一个事件发生后,事件会从父控件传给子控件,也就是说由UIApplication -> UIWindow -> UIView -> initial view,以上就是事件的传递,也就是寻找最合适的view的过程。

涉及到两个方法:

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

当UIApplication发送事件到keyWindow时,会调用 hitTest来寻找最合适的视图处理事件。判断逻辑如下:

  1. 首先判断自身是否能够响应触摸事件(userInteractionEnabled==truehidden==truealpha<=0.01不能响应触摸事件),若能响应则下一步,否则返回nil。
  2. 如果可以响应触摸事件,调用pointInside来判断是否在显示区域内,如果不在其中,pointInside返回false,同时hitTest返回nil。
  3. 如果 pointInside返回true,表示在当前的视图之中,然后倒序遍历该视图的子视图,重复上述步骤,直到某一视图可以响应,hitTest:返回该视图。
  4. 如果执行完上述步骤以后,没有符合条件的视图响应事件,则返回视图本身,表示只有当前视图符合条件,能够处理该事件。

Q:为什么倒序遍历?
 A:因为在subViews数组中,最后添加的视图,在视图层级中处于最上方。

怎么判断谁来处理当前事件?

当知道的上面事件传递机制后,我们就能理清楚我们的Button处理事件的逻辑了:

1、自定义Button继承自系统的Button。

2、重写 point(inside point: CGPoint, with event: UIEvent?) -> Bool 方法。在其中判断当前事件是否需要自身处理。

  • 判断点是否在自身button.imageView的frame范围内
  • 得到点击点在button.imageView中该点的颜色值
  • 如果得到的色值中alpha小于阀值,则返回false

具体代码可以查看JTShapedButton源码 (本地下载)。

实现效果

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • iOS 将系统自带的button改装成上图片下文字的样子

    经常会用到上面是图片,下面是文字的Button.这样的控件可以自定义,但是偶然发现一个直接对系统button进行图片与位置的重新layout实现同样效果的代码,最后使用的按钮是这样的: 代码是通过继承UIButton,然后再重写layoutSubviews方法,对自带的图片和titleLabel进行重新的layout,代码如下: // // ZZZUpDownButton.h // // Copyright © 2016年 George. All rights reserved. // /**

  • iOS的UI开发中Button的基本编写方法讲解

    一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状态 normal(普通状态) 默认情况(Default) 对应的枚举常量:UIControlStateNormal highlighted(高亮状态) 按钮被按下去的时候(手指还未松开) 对应的枚举常量:UIControlStateHighlighted disabled(失效状态,不可用状态) 如果enabled属性为NO,就是处于

  • iOS自定义button抖动效果并实现右上角删除按钮

    遇到过这种需求要做成类似与苹果删除软件时的动态效果. 1.长按抖动; 2.抖动时出现一个X; 3.点击x,删除button; 4.抖动时,点击按钮,停止抖动; 下面是我的设计思路: 1.继承UIButton: 2.给button在右上角添加一个按钮: 3.给button添加长按手势: 4.给button添加遮盖,抖动时可以拦截点击事件: 有更好的做法,还请斧正. // .m文件 #import "DZDeleteButton.h" #import "UIView+Extens

  • IOS UI学习教程之使用代码创建button

    本文使用代码创建button分5个步骤,分别是: 1.定义一个按钮,根据定义位置不同可定义为局部变量或者全局变量: 2.初始化按钮,一般使用一个矩形初始化: 3.设置按钮控件的其他属性,如背景图片,或者背景颜色,或者按钮显示文字等属性: 4.添加响应事件并编写响应事件的函数内容: 5.把创建好的控件加载到窗口. 五个步骤具体操作见下图: 具体的代码如下: UIButton *btn; btn = [[UIButton alloc]initWithFrame:CGRectMake(0, 20, 4

  • IOS代码笔记之勾选"记住密码"整体button

    本文实例为大家分享了IOS记住密码整体button 的实现代码,供大家参考,具体内容如下 一.效果图 二.工程图 三.代码 RootViewController.h #import <UIKit/UIKit.h> @class BECheckBox; @interface RootViewController : UIViewController { BECheckBox *passwordCheck; } @property(nonatomic,retain)BECheckBox *pass

  • 详解iOS中Button按钮的状态和点击事件

    一.按钮的状态 1.UIControlStateNormal 1> 除开UIControlStateHighlighted.UIControlStateDisabled.UIControlStateSelected以外的其他情况,都是normal状态 2> 这种状态下的按钮[可以]接收点击事件 2.UIControlStateHighlighted 1> [当按住按钮不松开]或者[highlighted = YES]时就能达到这种状态 2> 这种状态下的按钮[可以]接收点击事件 3

  • iOS中长条蓝色按钮(button)实现代码

    一,效果图. 二,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //添加设备 UIButton *deviceButton=[UIButton buttonWithType:UIButtonTypeRoundedRect]; deviceButton.frame=CGRe

  • iOS实现不规则Button点击效果实例代码

    需求 利用图片,实现一个如图的按钮组. 遇到的问题 如下图所示: 功能1.2.3.4的按钮可以实现点击功能.但是在红色方框四角的位置,也会响应相应的点击事件. 紫色方框内四角区域点击时,响应的方法是功能5,而不是对应的功能. 解决思路 期望的结果 寻找到合适的Button来处理点击事件 需要弄明白的问题 事件在如何传递的? 怎么判断谁来处理当前事件? 事件是如何传递的? 当用户触摸实际屏幕时,会生成一个Touch Event,将此事件添加到UIApplication管理的事件队列之中. UIAp

  • Android中的Button自定义点击效果实例代码

    方法一1.放在drawable下的selector.xml文件 复制代码 代码如下: <android="http://schemas.android.com/apk/res/Android"> android:drawable="@drawable/temp2" /> 2.布局文件main.xml 复制代码 代码如下: <http://schemas.android.com/apk/res/android"    android:

  • iOS仿高德首页推拉效果实例代码

    目录 1.滑动view的调用 2.为视图添加滑动手势和tableview相关配置 3.设置允许同时响应多个手势 4.滑动相关逻辑处理 4.注意点 总结 上面是实现的效果,滑动的视图是新建的一个UIView子类 1.滑动view的调用 SlideView * slideView = [[SlideView alloc] initWithFrame:CGRectMake(0, kScreenHeight-140, kScreenWidth, kScreenHeight-100)]; slideVie

  • Android自定义button点击效果的两种方式

    我们在界面上经常会用到button按钮,但通常button点击后看不到点击的效果,如果用户连续点击了两次,就会报NAR错误,这样交互性就比较差了.如果我们自定义了button点击效果,比如我们点击了button能让我们看到我们确实点击了button按钮,这样就会有效的避免重复点击了. 自定义点击效果有两种方式,一种是在xml中定义,另一种是在代码中定义. 首先看一下如何在xml中定义: 在drawable下新建selector.xml文件: <?xml version="1.0"

  • javaScript+turn.js实现图书翻页效果实例代码

    为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件   

  • jQuery模拟实现天猫购物车动画效果实例代码

    一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:

  • Android5.0多种侧滑栏效果实例代码

    1.普通侧滑 效果图: 思路:通过自定义View继承HorizontalScrollView,然后重写onMeasure(),onLayout(),onTouchEvent() 方法并设置menu(通过动画使menu开始时处于隐藏状态)布局和content布局.(注意:使用ViewHelper类需要导入nineoldandroids-2.4.0.jar包) menu(left_menu)布局代码: <?xml version="1.0" encoding="utf-8&

  • Android 仿今日头条简单的刷新效果实例代码

    点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

  • IOS开发实现手机震动的提示实例代码

    IOS开发实现手机震动的提示实例代码 我们都知道手机有震动功能,其实呢,这个功能实现起来特别的简单,我们只需要用到几个函数就可以了: - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event - (void)motionCancelled:(UIEventSubtype)mot

  • Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

随机推荐