因为最近开发一款和停车有关的APP,在录入车辆信息的时候需要输入车牌信息,而车牌信息有很多字都是不常用的,输入的时候很影响用户输入速度和体验,在键字如飞的大佬面前简直不能忍,这时自定义一款键盘 专门用来输入车牌,这就很舒服了。
自定义键盘也能增加安全系数,虽然我这没有涉及到。 先上效果图:
然后是大概实现思路:
首先确定每个按键的坐标,将按键图片和文字绘制到视图上,再在touchesBegan 中确定点击的按钮,最后使用bolck回调 执行响应。
一步一步来实现:
首先需要一个所有按键文字的数组。
1、确定按键坐标:
如果按键是有规律,直接用循环加上去就行,没有规律那就手动算吧。像效果图1中就是直接用一个循环加上去的,效果图2需要分列来添加。
2、绘制:
CGRect keyBoardRect = CGRectMake(rect.origin.x + 2, rect.origin.y + 2, rect.size.width - 4, rect.size.height - 4);
UIImage *image = [UIImage imageNamed:@"keyboard02"];
[image drawInRect:keyBoardRect];
CGSize imageSize = CGSizeMake(rect.size.width, rect.size.height);
UIGraphicsBeginImageContext(imageSize);
NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]init];
style.alignment = NSTextAlignmentCenter;
UIFont *font = [UIFont systemFontOfSize:16];;
CGFloat itemWidth = KSWidth/KHorizontalCount;;
NSDictionary *attributes = @{NSFontAttributeName : font,
NSParagraphStyleAttributeName : style,
NSForegroundColorAttributeName : [UIColor blackColor]
};
CGFloat itemHeight = 20;
CGRect textFrame = CGRectMake((rect.size.width - itemWidth)/2, (rect.size.height - itemHeight)/2, itemWidth, itemHeight);
[text drawInRect:textFrame withAttributes:attributes];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[newImage drawInRect:keyBoardRect];
现将按键图片绘制,然后将按键的文字绘制到图片上。上面是主要代码 ,最后会有demo。
3、确定按键点击:
使用touchesBegan确定点击的按键。
在touchesBegan之前,需要使用一个数组存储每个按键的位置CGRect,在绘制按键时将按键的frame 转换成NSValue 存在数组中。也就是按键上文字的数组和按键的位置frame是相对应的。根据点击的位置确定点击的按键,这样就很舒服了。
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [[event allTouches] anyObject];
CGPoint location = [touch locationInView:self];
[_drawRects enumerateObjectsUsingBlock:^(NSValue *rectValue, NSUInteger idx, BOOL * _Nonnull stop) {
if (CGRectContainsPoint(rectValue.CGRectValue, location)) {
NSString *clickKey = _data[idx];
// 回调
_clickKeyBoard(clickKey);
}
}];
}
4、获取点击回调
回调使用block或者协议什么都可以。我这里用block:
使用typedef定义一个bolck:
typedef void(^ClickKeyBoard)(NSString *character);
初始化:
- (instancetype)initWithFrame:(CGRect)frame withClickKeyBoard:(ClickKeyBoard)clickKeyBoard withDelete:(ClickDelete)clickDelete;
然后在获取按键点击时回调。
代码不多也不复杂但也是个小功能,最后奉上<a href="https://github.com/weiweilong/KeyBoard">Demo</a>