自定義形狀按鈕的實(shí)現(xiàn)
對(duì)于大多數(shù)iOS開發(fā)來說,這個(gè)是很少遇到的,畢竟一個(gè)不規(guī)則的按鈕再移動(dòng)端不常見,但是免不了會(huì)遇到某些特殊的需求,比如一個(gè)餅狀圖,比如一個(gè)扇形圖,比如中國(guó)地圖中的每個(gè)省.....
我們很可能在某一次開發(fā)中需要實(shí)現(xiàn)不規(guī)則形狀的按鈕,那么我們?cè)趺慈?shí)現(xiàn)呢?
其實(shí)這只是一個(gè)很小很小的知識(shí)點(diǎn),卻有很多人不會(huì)去考慮,所以就遇到了這樣的情況
偶然有一天,朋友給了我一套產(chǎn)品原型,他說叫我?guī)退麑憥讉€(gè)按鈕,很簡(jiǎn)單的按鈕,我當(dāng)時(shí)感覺有坑,但是也沒有想太多,想著本來這段時(shí)間有點(diǎn)閑,就幫下忙,
于是他發(fā)來原型圖
喲,就是很簡(jiǎn)單的4+1個(gè)按鈕蠻
先寫4個(gè)正方形的九宮格式的按鈕,再在中心加一個(gè)圓形按鈕就好了呀.
于是接下來他又發(fā)來產(chǎn)品設(shè)計(jì)圖
果然,有了設(shè)計(jì)之后,瞬間好看了好多,
但是想象中也不復(fù)雜呀.
先用一個(gè)view當(dāng)?shù)讏D,然后5個(gè)按鈕加在這個(gè)view上,然后view來個(gè)半徑,不就結(jié)束了嗎?
但是事實(shí)真的是這么簡(jiǎn)單嗎?
顯然不是,一個(gè)很明顯的結(jié)果就是,你會(huì)發(fā)現(xiàn)你使用了圓形半徑的不顯示的部分仍然能夠響應(yīng)按鈕的點(diǎn)擊.
這個(gè)是什么鬼,其實(shí)很簡(jiǎn)單的原理,就是雖然我們?cè)O(shè)置了半徑,讓圓形外的圖層不顯示,但是并不是代表其不存在,其仍然是可以點(diǎn)擊的,這樣在某些情況下就不符合按鈕的設(shè)計(jì)標(biāo)準(zhǔn)了,因?yàn)槲覀兿胍氖撬娂此?/p>
那么所見即所得便成了我要實(shí)現(xiàn)的目標(biāo).
還得從按鈕上下手,不要想得這么簡(jiǎn)單,雖然這個(gè)案例是一個(gè)很簡(jiǎn)單的比較偏正常形狀的一個(gè)按鈕,但是我需要將其想象成一個(gè)很復(fù)雜的不規(guī)則的圖形來處理
1.因?yàn)槭亲远x形狀的按鈕,那么說白了,它還是一個(gè)按鈕,我們沒有必要自定義復(fù)雜的控件,繼承UIButton即可
2.構(gòu)思如何實(shí)現(xiàn)特殊形狀
其實(shí)這塊很容易想到,實(shí)現(xiàn)一個(gè)圓形按鈕,就是對(duì)layer進(jìn)行修改形狀而已
如果你有閱讀過iOS核心動(dòng)畫高級(jí)技巧的話,你很容易發(fā)現(xiàn)我們想要的東西
是的,這里我們能看到幾個(gè)關(guān)鍵點(diǎn),一個(gè)原來的背景+一個(gè)mask遮罩 = 一個(gè)自定義形狀的圖形
引用到我們想要的按鈕上,我們就會(huì)發(fā)現(xiàn)同樣適用,
那么我們必須要在適用圖片來制作mask嗎?
很顯然,我們?cè)陂_發(fā)中不可能這么去做,那么我們?nèi)绾巫远x一個(gè)形狀呢?
于是我們能夠很方便的使用UIBezierPath來繪制成我們想要的形狀,然后使用CAShapeLayer來根據(jù)形狀創(chuàng)建圖層的路徑
創(chuàng)建完成之后,我們使用這樣的圖層來當(dāng)做按鈕的mask即可
所以對(duì)于我們來說比較有用的就是一個(gè)貝塞爾曲線的定制
于是很簡(jiǎn)單的一個(gè)不規(guī)則按鈕的類即可實(shí)現(xiàn)
#import <UIKit/UIKit.h>
@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
當(dāng)我們需要定制一個(gè)特殊按鈕的時(shí)候,我們只要繼承該類 ,或者直接使用該類
,并給maskPath賦予一個(gè)我們想要的路徑即可
于是上面的四個(gè)半圓按鈕甚至全圓形的按鈕我們就可以輕松實(shí)現(xiàn)
#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;
}
}
于是,很輕松的我創(chuàng)建了這樣的圖形
但是問題仍然不可忽視的,又來了,在半圓形外面的四個(gè)區(qū)域仍然可以相應(yīng)按鈕點(diǎn)擊,
解釋下來也就是mask外面的區(qū)域雖然看不到,但是其仍然屬于按鈕的區(qū)域,仍然可以響應(yīng)點(diǎn)擊,
所以我們需要規(guī)避
那么如何規(guī)避呢?
其畢竟仍然是一個(gè)不規(guī)則的形狀啊?
其實(shí)我們前期已經(jīng)做好準(zhǔn)備了....
3.規(guī)避不規(guī)則區(qū)域外的點(diǎn)擊
我們只要簡(jiǎn)單的實(shí)現(xiàn)這個(gè)點(diǎn)擊是否響應(yīng)的方法即可
于是完整的不規(guī)則按鈕的實(shí)現(xiàn)是這樣的
#import <UIKit/UIKit.h>
@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
我們只要保證點(diǎn)擊的point在我們的mask的區(qū)域內(nèi)即可(這里要保證我們的mask是一個(gè)封閉的區(qū)域),在mask區(qū)域內(nèi)允許點(diǎn)擊,區(qū)域外則不允許點(diǎn)擊,
于是一個(gè)maskPath被我們使用了兩次,第一次是設(shè)置遮罩顯示不規(guī)則按鈕,第二次是判斷點(diǎn)擊時(shí)候的響應(yīng)區(qū)域
至此,能夠適應(yīng)各種自定義形狀的基類按鈕便完成了
當(dāng)我們想要實(shí)現(xiàn)的時(shí)候,我們只要根據(jù)原型中的不規(guī)則形狀繪制我們想要的圖形來創(chuàng)造一個(gè)貝塞爾曲線即可(這部分因?yàn)樾螤畈煌?我們只能自己繪制)
如果你覺得繪制一個(gè)不規(guī)則形狀太麻煩的話(偷懶)
paintCode也可以幫你的忙,你只要?jiǎng)觿?dòng)鼠標(biāo)既可以跟類似ps一樣的繪制一個(gè)不規(guī)則圖形,而這個(gè)工具會(huì)自動(dòng)幫你把貝塞爾曲線的代碼給寫好,你只要復(fù)制進(jìn)去即可
好了demo奉上吧...
https://github.com/spicyShrimp/IrregularButton
