自定义车牌输入键盘

作者: weiweilong | 来源:发表于2017-04-25 10:17 被阅读842次

    因为最近开发一款和停车有关的APP,在录入车辆信息的时候需要输入车牌信息,而车牌信息有很多字都是不常用的,输入的时候很影响用户输入速度和体验,在键字如飞的大佬面前简直不能忍,这时自定义一款键盘 专门用来输入车牌,这就很舒服了。
    自定义键盘也能增加安全系数,虽然我这没有涉及到。 先上效果图:

    2017年4月24日.png

    然后是大概实现思路:
    首先确定每个按键的坐标,将按键图片和文字绘制到视图上,再在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>

    相关文章

      网友评论

        本文标题:自定义车牌输入键盘

        本文链接:https://www.haomeiwen.com/subject/cbppzttx.html