仿照支付宝自定义数字键盘
完整代码请参考：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
