iOS实现不规则Button点击效果实例代码
需求
利用图片，实现一个如图的按钮组。
遇到的问题
如下图所示：
- 功能1、2、3、4的按钮可以实现点击功能。但是在红色方框四角的位置，也会响应相应的点击事件。
- 紫色方框内四角区域点击时，响应的方法是功能5，而不是对应的功能。
解决思路
期望的结果
- 寻找到合适的Button来处理点击事件
需要弄明白的问题
- 事件在如何传递的？
- 怎么判断谁来处理当前事件？
事件是如何传递的？
- 当用户触摸实际屏幕时，会生成一个Touch Event，将此事件添加到UIApplication管理的事件队列之中。
- UIApplication从事件队列之中按顺序取出事件分发到视图去处理。
- 当事件被发出以后，会从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来寻找最合适的视图处理事件。判断逻辑如下：
- 首先判断自身是否能够响应触摸事件（
userInteractionEnabled==true、hidden==true、alpha<=0.01不能响应触摸事件）,若能响应则下一步，否则返回nil。 - 如果可以响应触摸事件，调用pointInside来判断是否在显示区域内，如果不在其中，pointInside返回false，同时hitTest返回nil。
- 如果 pointInside返回true，表示在当前的视图之中，然后倒序遍历该视图的子视图,重复上述步骤，直到某一视图可以响应，hitTest:返回该视图。
- 如果执行完上述步骤以后，没有符合条件的视图响应事件，则返回视图本身，表示只有当前视图符合条件，能够处理该事件。
Q：为什么倒序遍历？
A：因为在subViews数组中，最后添加的视图，在视图层级中处于最上方。
怎么判断谁来处理当前事件？
当知道的上面事件传递机制后，我们就能理清楚我们的Button处理事件的逻辑了：
1、自定义Button继承自系统的Button。
2、重写 point(inside point: CGPoint, with event: UIEvent?) -> Bool 方法。在其中判断当前事件是否需要自身处理。
- 判断点是否在自身
button.imageView的frame范围内 - 得到点击点在
button.imageView中该点的颜色值 - 如果得到的色值中alpha小于阀值，则返回false
具体代码可以查看JTShapedButton源码 （本地下载）。
实现效果
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。
相关推荐
-
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的基本编写方法讲解
一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状态 normal(普通状态) 默认情况(Default) 对应的枚举常量:UIControlStateNormal highlighted(高亮状态) 按钮被按下去的时候(手指还未松开) 对应的枚举常量:UIControlStateHighlighted disabled(失效状态,不可用状态) 如果enabled属性为NO,就是处于
-
iOS 将系统自带的button改装成上图片下文字的样子
经常会用到上面是图片,下面是文字的Button.这样的控件可以自定义,但是偶然发现一个直接对系统button进行图片与位置的重新layout实现同样效果的代码,最后使用的按钮是这样的: 代码是通过继承UIButton,然后再重写layoutSubviews方法,对自带的图片和titleLabel进行重新的layout,代码如下: // // ZZZUpDownButton.h // // Copyright © 2016年 George. All rights reserved. // /**
-
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
本文实例为大家分享了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 UI学习教程之使用代码创建button
本文使用代码创建button分5个步骤,分别是: 1.定义一个按钮,根据定义位置不同可定义为局部变量或者全局变量: 2.初始化按钮,一般使用一个矩形初始化: 3.设置按钮控件的其他属性,如背景图片,或者背景颜色,或者按钮显示文字等属性: 4.添加响应事件并编写响应事件的函数内容: 5.把创建好的控件加载到窗口. 五个步骤具体操作见下图: 具体的代码如下: UIButton *btn; btn = [[UIButton alloc]initWithFrame:CGRectMake(0, 20, 4
-
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内