通常我们使用系统自带的UIButton时,一般都是Rect矩形形式的,或则美工给出一张半圆弧的按钮,如图为一张半圆加三角形的按钮,而此时,如果给按钮添加点击事件时,响应事件依然为矩形区域,不符合我们的需求;

本文为解决这样的按钮问题:

如下图:使用CAShapeLayer和UIBezierPath画了一个button,这个按钮由一个半圆弧和三角形构成,现在我们需要点击黄颜色区域时,响应按钮点击事件,弹出对话框,其他白色区域,不响应点击事件;

第一步:

如下图,自定义一个类,CustomButton,继承于UIControl;本人觉得,如果要写一个自定义按钮,不需要button中的其他控件时,继承于UIControl比较好,如果按钮布局同系统UIButton,那么继承于UIButton比较好;

第二步:

在CustomButton.m文件中,对CustomButton类添加一个延展,声明三个成员变量;CAShapeLayer、id

、SEL;

第三步:

在 CustomButton.m文件中,做好自定义配置;其中,centerPoint为半圆弧中心点,bottomPoint为三角形顶尖 点,endPoint为圆弧起点和三角型左侧相连的点,这个点可以去掉,去掉之后,图形还是一样的,只是没有左侧那条红色的闭区间线条;

注意:[_target performSelectorOnMainThread:_action withObject:nil waitUntilDone:NO];调用者为_target,不是self;不然会crash,原因为定义的按钮无法识别响应事件;

最后:在ViewController中,使用CustomButton定义一个按钮,并调用相应的点击事件;即可得到文章开始的效果

使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button的更多相关文章

  1. Flutter:教你用CustomPaint画一个自定义的CircleProgressBar

    https://www.jianshu.com/p/2ea01ae02ffe Flutter:教你用CustomPaint画一个自定义的CircleProgressBar paint_page.dar ...

  2. 使用 HTML5 & CSS 实现一个自定义开关按钮 switch button

    使用 HTML5 & CSS 实现一个自定义开关按钮 switch button switch button <div class="switch"> < ...

  3. 使用CAShapeLayer与UIBezierPath画出想要的图形

    使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 步骤: 1.新建UIBezierPath对象bezierPath 2.新建CAS ...

  4. 使用CAShapeLayer的path属性与UIBezierPath画出扫描框

    1.CAShapeLayer CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形.该子类根据其fill color和stroke ...

  5. 手把手带你画一个漂亮蜂窝view Android自定义view

    上一篇做了一个水波纹view  不知道大家有没有动手试试呢点击打开链接 这个效果做起来好像没什么意义,如果不加监听回调 图片就能直接替代.写这篇博客的目的是锻炼一下思维能力,以更好的面多各种自定义vi ...

  6. 手把手带你画一个动态错误提示 Android自定义view

    嗯..再差1篇就可以获得持之以恒徽章了,今天带大家画一个比较简单的view. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/504771 ...

  7. Android之自定义View以及画一个时钟

    https://www.2cto.com/kf/201509/443112.html 概述: 当Android自带的View满足不了开发者时,自定义View就发挥了很好的作用.建立一个自定义View, ...

  8. iOS关于CAShapeLayer与UIBezierPath的知识内容

    使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...

  9. 自己画一个ActivityIndicatorView-b

    苹果的UI控件中有一个UIActivityIndicatorView,俗称菊花.→_→现在我们仿照它来制作一个其它样式的指示器,如下: ActivityView.png 自定义指示器 首先画一个白色的 ...

随机推荐

  1. 简单天气应用开发——自定义TableView

    顺利解析JSON数据后,天气数据已经可以随意提取了,现在要做的就是建立一个简单的UI. 实况信息较为简单,几个Lable就可以解决.主要是七天天气预报有点麻烦,那是一个由七个字典构成的数组,需要提取出 ...

  2. 【转载】设备坐标(窗口/window)和逻辑坐标(视口/viewport)

    一.预备知识 1.窗口是基于逻辑坐标的. 2.视口是基于设备坐标. 3.设备坐标是以像素为单位的,逻辑坐标是以.cm,m,mm,..... 4.系统最后一定要把逻辑坐标变为设备坐标. 5.设备坐标有3 ...

  3. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

  4. Python之路Day2

    -->the start 养成好习惯,每次上课的内容都要写好笔记. 第二天内容主要是熟悉int.long.float.str.list.dict.tuple这几个类的内建方法. 对于Python ...

  5. ssh免密钥登录

    说明:下文中说的 '客户端'指的是你所使用的本地机器; '服务端'指的是远程你要连接的机器; ----------------------------------------------------- ...

  6. QT类型转换(九种转换)

    1.char * 与 const char *的转换 char *ch1="hello11";const char *ch2="hello22";ch2 = c ...

  7. HDU 3584 Cube

    题目大意:给定一个体积为N*N*N立方体,每个单位小立方体A[x][y][z]里有一个值,初始值全部为0,我们可以对立方体进行一下两种操作: 0表示查询A[x][y][z]的奇偶性 1表示对子立方体的 ...

  8. Android Animations动画使用详解

    一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...

  9. JAVA GUI学习 - JTable表格组件学习_A ***

    public class JTableKnow_A extends JFrame { public JTableKnow_A() { this.setBounds(300, 100, 400, 300 ...

  10. jQuery.merge 源码阅读

    jQuery.merge(first,second) 概述 合并两个数组 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素. 参数 first:第一个待处理数组,会改变其中 ...