IOS 仿支付宝充值数字键盘

仿照支付宝自定义数字键盘
完整代码请参考：https://github.com/xinsun001/XSKeyboardView/tree/main
相关链接：
iOS-自定义emoji表情键盘
IOS自定义键盘顶部输入区并且实时计算高度
最终效果：

image.png

这个键盘是根据https://github.com/zhwayne/WLDecimalKeyboard修改的
增加了缩回键盘的箭头，显示和隐藏小数点的枚举
这里来简单分析一下他的代码：
首先根据数字输入区的带下大小，算出来键盘所需要的高度，这样确定了键盘区域，并算出每个按钮的坐标

static CGRect wldk_get_frame()
{
    CGFloat width = MIN([UIScreen mainScreen].bounds.size.width,
                        [UIScreen mainScreen].bounds.size.height);
    CGFloat height = ((NSUInteger)(width * .32)) * 2;
    return CGRectMake(0, 0, width, height+downH+keyboardH);
}

- (instancetype)initWithFrame:(CGRect)frame
{
    CGRect rect = wldk_get_frame();
    
    if (self = [super initWithFrame:rect]) {
        [self _initUI];
    }
    
    return self;
}

这个键盘里面没有用到图片，都是使用贝塞尔曲线（UIBezierPath）进行绘制的，然后合成的image，例如他写的删除按钮：

static UIImage *wldk_delete_icon()
{
    CGFloat scale = [UIScreen mainScreen].scale;
    CGSize size = CGSizeMake(27 * scale, 20 * scale);
    const CGFloat lineWidth = 1.f * scale;
    UIGraphicsBeginImageContext(size);
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [[UIColor blackColor] setStroke];
    
    CGContextBeginPath(ctx);
    
    //// Bezier Drawing
    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(8.5 * scale, 19.5 * scale)];
    [bezierPath addCurveToPoint: CGPointMake(23.15 * scale, 19.5 * scale) controlPoint1: CGPointMake(11.02 * scale, 19.5 * scale) controlPoint2: CGPointMake(20.63 * scale, 19.5 * scale)];
    [bezierPath addCurveToPoint: CGPointMake(26.5 * scale, 15.5 * scale) controlPoint1: CGPointMake(25.66 * scale, 19.5 * scale) controlPoint2: CGPointMake(26.5 * scale, 17.5 * scale)];
    [bezierPath addCurveToPoint: CGPointMake(26.5 * scale, 4.5 * scale) controlPoint1: CGPointMake(26.5 * scale, 13.5 * scale) controlPoint2: CGPointMake(26.5 * scale, 7.5 * scale)];
    [bezierPath addCurveToPoint: CGPointMake(23.15 * scale, 0.5 * scale) controlPoint1: CGPointMake(26.5 * scale, 1.5 * scale) controlPoint2: CGPointMake(24.82 * scale, 0.5 * scale)];
    [bezierPath addCurveToPoint: CGPointMake(8.5 * scale, 0.5 * scale) controlPoint1: CGPointMake(21.47 * scale, 0.5 * scale) controlPoint2: CGPointMake(11.02 * scale, 0.5 * scale)];
    [bezierPath addCurveToPoint: CGPointMake(0.5 * scale, 9.5 * scale) controlPoint1: CGPointMake(5.98 * scale, 0.5 * scale) controlPoint2: CGPointMake(0.5 * scale, 9.5 * scale)];
    [bezierPath addCurveToPoint: CGPointMake(8.5 * scale, 19.5 * scale) controlPoint1: CGPointMake(0.5 * scale, 9.5 * scale) controlPoint2: CGPointMake(5.98 * scale, 19.5 * scale)];
    [bezierPath closePath];
    bezierPath.lineCapStyle = kCGLineCapRound;
    
    bezierPath.lineJoinStyle = kCGLineJoinRound;
    
    [UIColor.blackColor setStroke];
    bezierPath.lineWidth = lineWidth;
    [bezierPath stroke];
    
    
    //// Bezier 2 Drawing
    UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
    [bezier2Path moveToPoint: CGPointMake(19.5 * scale, 6.5 * scale)];
    [bezier2Path addLineToPoint: CGPointMake(12.5 * scale, 13.5 * scale)];
    bezier2Path.lineCapStyle = kCGLineCapRound;
    
    bezier2Path.lineJoinStyle = kCGLineJoinRound;
    
    [UIColor.blackColor setStroke];
    bezier2Path.lineWidth = lineWidth;
    [bezier2Path stroke];
    
    
    //// Bezier 3 Drawing
    UIBezierPath* bezier3Path = [UIBezierPath bezierPath];
    [bezier3Path moveToPoint: CGPointMake(19.5 * scale, 13.5 * scale)];
    [bezier3Path addLineToPoint: CGPointMake(12.5 * scale, 6.5 * scale)];
    bezier3Path.lineCapStyle = kCGLineCapRound;
    
    [UIColor.blackColor setStroke];
    bezier3Path.lineWidth = lineWidth;
    [bezier3Path stroke];

    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return [UIImage imageWithCGImage:image.CGImage
                               scale:scale
                         orientation:UIImageOrientationUp];
}

然后数字区域用贝塞尔绘制出边框，然后给按钮settitle

item.tag = 48 + i;
 [item setTitle:[NSString stringWithFormat:@"%d", i]
                  forState:UIControlStateNormal];

本来他的代码里面没有缩回键盘的按钮，而且小数点是没有的，所以我进行了一点改动

//添加缩回键盘按钮
static UIImage *wldk_down_icon()
{
    CGFloat scale = [UIScreen mainScreen].scale;
    CGSize size = CGSizeMake([UIScreen mainScreen].bounds.size.width , downH);
    const CGFloat lineWidth = 0.5f * scale;
    UIGraphicsBeginImageContext(size);
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [[UIColor blackColor] setStroke];
    
    CGContextBeginPath(ctx);
    
    
    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(size.width/2 -5*scale, 3*scale)];
    [bezierPath addLineToPoint: CGPointMake(size.width/2, 7*scale)];
    [bezierPath addLineToPoint: CGPointMake(size.width/2+5*scale, 3*scale)];

    bezierPath.lineCapStyle = kCGLineCapRound;
    
    [UIColor.blackColor setStroke];
    bezierPath.lineWidth = lineWidth;
    [bezierPath stroke];

    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return [UIImage imageWithCGImage:image.CGImage
                               scale:scale
                         orientation:UIImageOrientationUp];
    
}

//是否有小数点
typedef enum : NSUInteger {
    numberHaveDort = 0,     //有点号
    numberNoneDort = 1,     //没有点号
    
} UIKeyBoardStyle;

if (self.style==0) {
        [self viewWithTag:48].frame = CGRectMake(width + .5f, inputH+.5f + (height + .5f) * 3, width*2+.5, height);
        [self viewWithTag:46].frame = CGRectMake(0, inputH+.5f + (height + .5f) * 3, width, height);
    }else{
        [self viewWithTag:48].frame = CGRectMake(0, inputH+.5f + (height + .5f) * 3, width*3+.5, height);
        [self viewWithTag:46].frame = CGRectMake(0, inputH+.5f + (height + .5f) * 3, 0, height);
    }

完整代码请参考：https://github.com/xinsun001/XSKeyboardView/tree/main