自定义形状按钮的实现

时间  2019-11-30
标签 自定义 形状 按钮 实现 繁體版
原文   原文链接

自定义形状按钮的实现

对于大多数iOS开发来讲,这个是不多遇到的,毕竟一个不规则的按钮再移动端不常见,可是免不了会遇到某些特殊的需求,好比一个饼状图,好比一个扇形图,好比中国地图中的每一个省..... 咱们极可能在某一次开发中须要实现不规则形状的按钮,那么咱们怎么去实现呢? 其实这只是一个很小很小的知识点,却有不少人不会去考虑,因此就遇到了这样的状况git

偶然有一天,朋友给了我一套产品原型,他说叫我帮他写几个按钮,很简单的按钮,我当时感受有坑,可是也没有想太多,想着原本这段时间有点闲,就帮下忙, 因而他发来原型图 github

这里写图片描述

哟,就是很简单的4+1个按钮蛮 先写4个正方形的九宫格式的按钮,再在中心加一个圆形按钮就行了呀. 因而接下来他又发来产品设计图 bash

这里写图片描述

果真,有了设计以后,瞬间好看了好多, 可是想象中也不复杂呀. 先用一个view当底图,而后5个按钮加在这个view上,而后view来个半径,不就结束了吗? 可是事实真的是这么简单吗?ide

显然不是,一个很明显的结果就是,你会发现你使用了圆形半径的不显示的部分仍然可以响应按钮的点击. 这个是什么鬼,其实很简单的原理,就是虽然咱们设置了半径,让圆形外的图层不显示,可是并非表明其不存在,其仍然是能够点击的,这样在某些状况下就不符合按钮的设计标准了,由于咱们想要的是所见即所得工具

那么所见即所得便成了我要实现的目标. 还得从按钮上下手,不要想得这么简单,虽然这个案例是一个很简单的比较偏正常形状的一个按钮,可是我须要将其想象成一个很复杂的不规则的图形来处理动画

1.由于是自定义形状的按钮,那么说白了,它仍是一个按钮,咱们没有必要自定义复杂的控件,继承UIButton便可ui

2.构思如何实现特殊形状 其实这块很容易想到,实现一个圆形按钮,就是对layer进行修改形状而已atom

若是你有阅读过iOS核心动画高级技巧的话,你很容易发现咱们想要的东西 spa

这里写图片描述
这里写图片描述

是的,这里咱们能看到几个关键点,一个原来的背景+一个mask遮罩 = 一个自定义形状的图形设计

引用到咱们想要的按钮上,咱们就会发现一样适用, 那么咱们必需要在适用图片来制做mask吗? 很显然,咱们在开发中不可能这么去作,那么咱们如何自定义一个形状呢?

这里写图片描述
这里写图片描述
这里写图片描述

因而咱们可以很方便的使用UIBezierPath来绘制成咱们想要的形状,而后使用CAShapeLayer来根据形状建立图层的路径 建立完成以后,咱们使用这样的图层来当作按钮的mask便可

因此对于咱们来讲比较有用的就是一个贝塞尔曲线的定制 因而很简单的一个不规则按钮的类便可实现

#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

复制代码

当咱们须要定制一个特殊按钮的时候,咱们只要继承该类 ,或者直接使用该类
,并给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 <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
复制代码

咱们只要保证点击的point在咱们的mask的区域内便可(这里要保证咱们的mask是一个封闭的区域),在mask区域内容许点击,区域外则不容许点击, 因而一个maskPath被咱们使用了两次,第一次是设置遮罩显示不规则按钮,第二次是判断点击时候的响应区域

至此,可以适应各类自定义形状的基类按钮便完成了 当咱们想要实现的时候,咱们只要根据原型中的不规则形状绘制咱们想要的图形来创造一个贝塞尔曲线便可(这部分由于形状不一样,咱们只能本身绘制)

固然咱们也有第三方工具

这里写图片描述
若是你以为绘制一个不规则形状太麻烦的话(偷懒) paintCode也能够帮你的忙,你只要动动鼠标既能够跟相似ps同样的绘制一个不规则图形,而这个工具会自动帮你把贝塞尔曲线的代码给写好,你只要复制进去便可

好了demo奉上吧... github.com/spicyShrimp…

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程