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

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

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

wKioL1TJj0rhkOpBAABwkNoAuzk068.jpg


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

wKiom1TJjmmyQUdAAACSQujt7tc635.jpg


第一步:

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

wKioL1TJkX3ybxJ_AABkVpYx7QU716.jpg


第二步:

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

、SEL;

wKiom1TJkJ6wGlF6AACOI8oO77M787.jpg


第三步:

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

wKioL1TJkYqjtIh7AAT6z_XcPM4998.jpg

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


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

wKiom1TJkKrz0uipAALE8-7nG24406.jpg




你可能感兴趣的:(UIBezierPath,圆弧按钮,三角形按钮)