自定义形状按钮的实现
对于大多数iOS开发来说,这个是很少遇到的,毕竟一个不规则的按钮再移动端不常见,但是免不了会遇到某些特殊的需求,比如一个饼状图,比如一个扇形图,比如中国地图中的每个省.....
我们很可能在某一次开发中需要实现不规则形状的按钮,那么我们怎么去实现呢?
其实这只是一个很小很小的知识点,却有很多人不会去考虑,所以就遇到了这样的情况
偶然有一天,朋友给了我一套产品原型,他说叫我帮他写几个按钮,很简单的按钮,我当时感觉有坑,但是也没有想太多,想着本来这段时间有点闲,就帮下忙,
于是他发来原型图
哟,就是很简单的4+1个按钮蛮
先写4个正方形的九宫格式的按钮,再在中心加一个圆形按钮就好了呀.
于是接下来他又发来产品设计图
果然,有了设计之后,瞬间好看了好多,
但是想象中也不复杂呀.
先用一个view当底图,然后5个按钮加在这个view上,然后view来个半径,不就结束了吗?
但是事实真的是这么简单吗?
显然不是,一个很明显的结果就是,你会发现你使用了圆形半径的不显示的部分仍然能够响应按钮的点击.
这个是什么鬼,其实很简单的原理,就是虽然我们设置了半径,让圆形外的图层不显示,但是并不是代表其不存在,其仍然是可以点击的,这样在某些情况下就不符合按钮的设计标准了,因为我们想要的是所见即所得
那么所见即所得便成了我要实现的目标.
还得从按钮上下手,不要想得这么简单,虽然这个案例是一个很简单的比较偏正常形状的一个按钮,但是我需要将其想象成一个很复杂的不规则的图形来处理
1.因为是自定义形状的按钮,那么说白了,它还是一个按钮,我们没有必要自定义复杂的控件,继承UIButton即可
2.构思如何实现特殊形状
其实这块很容易想到,实现一个圆形按钮,就是对layer进行修改形状而已
如果你有阅读过iOS核心动画高级技巧的话,你很容易发现我们想要的东西
是的,这里我们能看到几个关键点,一个原来的背景+一个mask遮罩 = 一个自定义形状的图形
引用到我们想要的按钮上,我们就会发现同样适用,
那么我们必须要在适用图片来制作mask吗?
很显然,我们在开发中不可能这么去做,那么我们如何自定义一个形状呢?
于是我们能够很方便的使用UIBezierPath来绘制成我们想要的形状,然后使用CAShapeLayer来根据形状创建图层的路径
创建完成之后,我们使用这样的图层来当做按钮的mask即可
所以对于我们来说比较有用的就是一个贝塞尔曲线的定制
于是很简单的一个不规则按钮的类即可实现
#import
@interface IrregularButton : UIButton
@property(nonatomic, strong)UIBezierPath *maskPath;
@end
#import "IrregularButton.h"
@implementation IrregularButton
-(void)setMaskPath:(UIBezierPath *)maskPath{
_maskPath = maskPath;
CAShapeLayer *layer = [[CAShapeLayer alloc]init];
layer.path = maskPath.CGPath;
self.layer.mask = layer;
}
@end
当我们需要定制一个特殊按钮的时候,我们只要继承该类 ,或者直接使用该类
,并给maskPath赋予一个我们想要的路径即可
于是上面的四个半圆按钮甚至全圆形的按钮我们就可以轻松实现
#import "IrregularButton.h"
typedef NS_ENUM(NSUInteger, QuarterCircleType) {
QuarterCircleTypeTopNone,
QuarterCircleTypeTopLeft,
QuarterCircleTypeTopRight,
QuarterCircleTypeBottomLeft,
QuarterCircleTypeBottomRight,
QuarterCircleTypeAllCircle,
};
@interface QuarterCircleButton : IrregularButton
@property(nonatomic, assign)QuarterCircleType circleType;
@end
#import "QuarterCircleButton.h"
@implementation QuarterCircleButton
-(void)setFrame:(CGRect)frame{
[super setFrame:frame];
self.circleType = self.circleType;
}
-(void)setCircleType:(QuarterCircleType)circleType{
_circleType = circleType;
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
switch (circleType) {
case QuarterCircleTypeTopLeft:{
CGPoint bottomRightPoint = CGPointMake(width, height);
CGPoint bottomLeftPoint = CGPointMake(0, height);
UIBezierPath *path = [[UIBezierPath alloc]init];
[path moveToPoint:bottomRightPoint];
[path addLineToPoint:bottomLeftPoint];
[path addArcWithCenter:bottomRightPoint radius:MAX(width, height) startAngle:M_PI endAngle:-M_PI_2 clockwise:YES];
[path addLineToPoint:bottomRightPoint];
[path closePath];
self.maskPath = path;
}
break;
case QuarterCircleTypeTopRight:{
CGPoint bottomLeftPoint = CGPointMake(0, height);
CGPoint topLeftPoint = CGPointMake(0, 0);
UIBezierPath *path = [[UIBezierPath alloc]init];
[path moveToPoint:bottomLeftPoint];
[path addLineToPoint:topLeftPoint];
[path addArcWithCenter:bottomLeftPoint radius:MAX(width, height) startAngle:-M_PI endAngle:0 clockwise:YES];
[path addLineToPoint:bottomLeftPoint];
[path closePath];
self.maskPath = path;
}
break;
case QuarterCircleTypeBottomLeft:{
CGPoint topRightPoint = CGPointMake(width, 0);
CGPoint bottomRightPoint = CGPointMake(width, height);
UIBezierPath *path = [[UIBezierPath alloc]init];
[path moveToPoint:topRightPoint];
[path addLineToPoint:bottomRightPoint];
[path addArcWithCenter:topRightPoint radius:MAX(width, height) startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
[path addLineToPoint:topRightPoint];
[path closePath];
self.maskPath = path;
}
break;
case QuarterCircleTypeBottomRight:{
CGPoint topLeftPoint = CGPointMake(0, 0);
CGPoint topRightPoint = CGPointMake(width, 0);
UIBezierPath *path = [[UIBezierPath alloc]init];
[path moveToPoint:topLeftPoint];
[path addLineToPoint:topRightPoint];
[path addArcWithCenter:topLeftPoint radius:MAX(width, height) startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path addLineToPoint:topLeftPoint];
[path closePath];
self.maskPath = path;
}
break;
case QuarterCircleTypeAllCircle:{
CGPoint centerPoint = CGPointMake(width/2, height/2);
UIBezierPath *path = [[UIBezierPath alloc]init];
[path addArcWithCenter:centerPoint radius:MAX(width/2, height/2) startAngle:0 endAngle:M_PI * 2 clockwise:YES];
[path closePath];
self.maskPath = path;
}
break;
default:
break;
}
}
于是,很轻松的我创建了这样的图形
但是问题仍然不可忽视的,又来了,在半圆形外面的四个区域仍然可以相应按钮点击,
解释下来也就是mask外面的区域虽然看不到,但是其仍然属于按钮的区域,仍然可以响应点击,
所以我们需要规避
那么如何规避呢?
其毕竟仍然是一个不规则的形状啊?
其实我们前期已经做好准备了....
3.规避不规则区域外的点击
我们只要简单的实现这个点击是否响应的方法即可
于是完整的不规则按钮的实现是这样的
#import
@interface IrregularButton : UIButton
@property(nonatomic, strong)UIBezierPath *maskPath;
@end
#import "IrregularButton.h"
@implementation IrregularButton
-(void)setMaskPath:(UIBezierPath *)maskPath{
_maskPath = maskPath;
CAShapeLayer *layer = [[CAShapeLayer alloc]init];
layer.path = maskPath.CGPath;
self.layer.mask = layer;
}
-(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
BOOL res = [super pointInside:point withEvent:event];
if (res) {
if (!self.maskPath || [self.maskPath containsPoint:point]) {
return YES;
}
return NO;
}
return res;
}
@end
我们只要保证点击的point在我们的mask的区域内即可(这里要保证我们的mask是一个封闭的区域),在mask区域内允许点击,区域外则不允许点击,
于是一个maskPath被我们使用了两次,第一次是设置遮罩显示不规则按钮,第二次是判断点击时候的响应区域
至此,能够适应各种自定义形状的基类按钮便完成了
当我们想要实现的时候,我们只要根据原型中的不规则形状绘制我们想要的图形来创造一个贝塞尔曲线即可(这部分因为形状不同,我们只能自己绘制)
如果你觉得绘制一个不规则形状太麻烦的话(偷懒)
paintCode也可以帮你的忙,你只要动动鼠标既可以跟类似ps一样的绘制一个不规则图形,而这个工具会自动帮你把贝塞尔曲线的代码给写好,你只要复制进去即可
好了demo奉上吧...
https://github.com/spicyShrimp/IrregularButton