首页 > 代码库 > 使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button

使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button

通常我们使用系统自带的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定义一个按钮,并调用相应的点击事件;即可得到文章开始的效果

技术分享




本文出自 “才女金大福” 博客,请务必保留此出处http://liwenyu.blog.51cto.com/9864907/1609453

使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button