iOS仿支付宝车牌号码输入键盘

姓名：唐来宾  学号：17101223417

转载http://mp.weixin.qq.com/s/vsopOQF6uJxHxWSsTX4p7A

【嵌牛导读】最近由于项目需求，需要录入车牌号码，诸多限制条件要判断车牌号码的合理性，最后看见支付宝的车牌号码输入键盘，决定自己写一个

考虑过用textfield的inputview来替换，但是本人总感觉会有坑在里面，所以最后决定用自定义的view来做一个 只要做一个简单的弹出动画即可实现inpuview一样的效果，创建文件都会的 我就直接上代码了

【嵌牛鼻子】键盘输入，C++

【嵌牛提问】如何提高输入效率？

【嵌牛正文】最近由于项目需求，需要录入车牌号码，诸多限制条件要判断车牌号码的合理性，最后看见支付宝的车牌号码输入键盘，决定自己写一个

考虑过用textfield的inputview来替换，但是本人总感觉会有坑在里面，所以最后决定用自定义的view来做一个 只要做一个简单的弹出动画即可实现inpuview一样的效果，创建文件都会的 我就直接上代码了

#import

//键盘view的代理，用来监控键盘输入

@protocol LYPlateKeyBoardViewDelegate

//点击键盘上的按钮

- (void)clickWithString:(NSString *)string;

//点击删除按钮

- (void)deleteBtnClick;

@end

@interface LYPlateKeyBoardView : UIView

@property (nonatomic, weak) id delegate;

//公共方法 - 字符串已经删除完毕

- (void)deleteEnd;

@end

在这里用的代理方法相信大家都会看懂，我就不用多做解释了

.m 文件

#define kWidth  self.frame.size.width

#define kHeight self.frame.size.height

#define HEXCOLOR(hex, alp) [UIColor colorWithRed:((float)((hex & 0xFF0000) >> 16)) / 255.0 green:((float)((hex & 0xFF00) >> 8)) / 255.0 blue:((float)(hex & 0xFF)) / 255.0 alpha:alp]

#import "LYPlateKeyBoardView.h"

@interface LYPlateKeyBoardView()

{

UIView *_backView1; //第一个view

UIView *_backView2; //第二个view

//    UIView *_bottomView;

UIButton *_btn;

}

@property (nonatomic, strong) NSArray *array1; //省市简写数组

@property (nonatomic, strong) NSArray *array2; //车牌号码字母数字数组

@end

构思时想用一个view来切换数组的方式来切换显示的不同内容，发现两个数组以及view上布局有点让人头疼，就用了2个view来布局，只要根据输入的字符来隐藏其中一个view

@implementation LYPlateKeyBoardView

- (NSArray *)array1 {

if (!_array1) {

_array1 = @[@"京",@"津",@"渝",@"沪",@"冀",@"晋",@"辽",@"吉",@"黑",@"苏",@"浙",@"皖",@"闽",@"赣",@"鲁",@"豫",@"鄂",@"湘",@"粤",@"琼",@"川",@"贵",@"云",@"陕",@"甘",@"青",@"蒙",@"桂",@"宁",@"新",@"",@"藏",@"使",@"领",@"警",@"学",@"港",@"澳",@""];

}

return _array1;

}

- (NSArray *)array2 {

if (!_array2) {

_array2 = @[@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"0",@"Q",@"W",@"E",@"R",@"T",@"Y",@"U",@"I",@"O",@"P",@"A",@"S",@"D",@"F",@"G",@"H",@"J",@"K",@"L",@"",@"Z",@"X",@"C",@"V",@"B",@"N",@"M",@""];

}

return _array2;

}

这里先懒加载两个数组，下面就是view的初始化方法，在初始化方法中注册了一个通知和添加一个手势，用途代码注释上都有些

- (instancetype)initWithFrame:(CGRect)frame {

if (self = [super initWithFrame:frame]) {

self.backgroundColor = HEXCOLOR(0x000000, 0.1);

//注册一个通知，后面会用到，来监听abc字母键

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textFAction:) name:@"abc" object:nil];

//添加一个手势，点击键盘外面收回键盘

UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hiddenView)];

recognizer.delegate = self;

[self addGestureRecognizer:recognizer];

[self setupUI];

}

return self;

}

具体布局在 [self setupUI] 这个方法里面，我就偷懒了没有在layoutsubview方法里面实现，代码有点繁琐，主要就是计算坐标，九宫格布局，这个可以自己写的，相信都会的，废话不多说，请看代码：

- (void)setupUI {

CGSize size = [UIScreen mainScreen].bounds.size;

_backView1 = [[UIView alloc] initWithFrame:CGRectMake(0, size.height, size.width, size.height * 0.33)];

_backView1.backgroundColor = HEXCOLOR(0xd2d5da, 1);

_backView1.hidden = NO;

_backView2 = [[UIView alloc] initWithFrame:CGRectMake(0, size.height, size.width, size.height * 0.33)];

_backView2.hidden = YES;

_backView2.backgroundColor = HEXCOLOR(0xd2d5da, 1);

[self addSubview:_backView1];

[self addSubview:_backView2];

int row = 4;

int column = 10;

CGFloat btnY = 4;

CGFloat btnX = 2;

CGFloat maginR = 5;

CGFloat maginC = 10;

CGFloat btnW = (size.width - maginR * (column -1) - 2 * btnX)/column;

CGFloat btnH = (_backView1.frame.size.height - maginC * (row - 1) - 6) / row;

CGFloat m = 12;

CGFloat w = (size.width - 24 - 7 * btnW - 6 * maginR - 2 * btnX)/2;

CGFloat mw = (size.width - 8 * maginR - 9 * btnW - 2 * btnX) / 2;

NSLog(@"LY >> count - %zd", self.array1.count);

for (int i = 0; i < self.array1.count; i++) {

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

if (i / column == 3) {

if (i == 30) {

btn.frame = CGRectMake(btnX, btnY + 3 * (btnH + maginC), w, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_abc"] forState:UIControlStateNormal];

btn.enabled = NO;

_btn = btn;

}else if (i == 38) {

btn.frame = CGRectMake(6 * (btnW + maginR) + btnW + w + m + m, btnY + 3 * (btnH + maginC), w, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_over"] forState:UIControlStateNormal];

}else {

btn.frame = CGRectMake((i % column - 1)*(btnW + maginR) + w + m + btnX, btnY + 3 * (btnH + maginC), btnW, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_number"] forState:UIControlStateNormal];

}

}else {

btn.frame = CGRectMake(btnW * (i % column) + i % column * maginR + btnX, btnY + i/column * (btnH + maginC), btnW, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_number"] forState:UIControlStateNormal];

}

[btn setTitleColor:HEXCOLOR(0x23262F, 1) forState:UIControlStateNormal];

[btn setTitle:self.array1[i] forState:UIControlStateNormal];

btn.layer.cornerRadius = 3;

btn.layer.masksToBounds = YES;

btn.tag = i;

[btn addTarget:self action:@selector(btn1Click:) forControlEvents:UIControlEventTouchUpInside];

[_backView1 addSubview:btn];

}

for (int i = 0; i < self.array2.count; i++) {

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

if (i >= 20 && i < 29) {

btn.frame = CGRectMake(btnX + mw + (btnW + maginR) * (i % column), btnY + 2 * (btnH + maginC), btnW, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_number"] forState:UIControlStateNormal];

}else if (i >= 29) {

if (i == 29) {

btn.frame = CGRectMake(btnX, btnY + 3 * (btnH + maginC), w, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_back"] forState:UIControlStateNormal];

}else if (i == 37) {

btn.frame = CGRectMake(6 * (btnW + maginR) + btnW + w + m + m + btnX, btnY + 3 * (btnH + maginC), w, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_over"] forState:UIControlStateNormal];

}else {

btn.frame = CGRectMake((i % column)*(btnW + maginR) + w + m + btnX, btnY + 3 * (btnH + maginC), btnW, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_number"] forState:UIControlStateNormal];

}

}else {

btn.frame = CGRectMake(btnW * (i % column) + i % column * maginR + btnX, btnY + i/column * (btnH + maginC), btnW, btnH);

[btn setBackgroundImage:[UIImage imageNamed:@"key_number"] forState:UIControlStateNormal];

}

[btn setTitleColor:HEXCOLOR(0x23262F, 1) forState:UIControlStateNormal];

[btn setTitle:self.array2[i] forState:UIControlStateNormal];

btn.layer.cornerRadius = 3;

btn.layer.masksToBounds = YES;

btn.tag = i;

[btn addTarget:self action:@selector(btn2Click:) forControlEvents:UIControlEventTouchUpInside];

[_backView2 addSubview:btn];

}

[UIView animateWithDuration:0.3 animations:^{

CGRect frame = _backView1.frame;

frame.origin.y = size.height - size.height * 0.33;

_backView1.frame = frame;

}];

[UIView animateWithDuration:0.3 animations:^{

CGRect frame = _backView2.frame;

frame.origin.y = size.height - size.height * 0.33;

_backView2.frame = frame;

}];

}

这段代码我没有做注释，就是九宫格布局，计算坐标，写过九宫格的都会，我就不多做解释了，关键在于后面逻辑的实现，下面是键盘上按钮的点击事件的监听代码：

- (void)btn1Click:(UIButton *)sender {

NSLog(@"LY >>> array1: - %@ -- tag - %zd", self.array1[sender.tag],sender.tag);

_btn.enabled = YES;

if (sender.tag == 30) {

NSLog(@"点击了abc键");

if (_backView2.hidden) {

NSLog(@"_backView2 隐藏了");

_backView1.hidden = YES;

_backView2.hidden = NO;

}else {

sender.enabled = NO;

}

}else if (sender.tag == 38){

NSLog(@"点击了删除键");

if (_backView2.hidden) {

if (self.delegate && [self.delegate respondsToSelector:@selector(deleteBtnClick)]) {

[self.delegate deleteBtnClick];

}

}

}else {

_backView1.hidden = YES;

_backView2.hidden = NO;

if (self.delegate && [self.delegate respondsToSelector:@selector(clickWithString:)]) {

[self.delegate clickWithString:self.array1[sender.tag]];

}

}

}

- (void)btn2Click:(UIButton *)sender {

NSLog(@"LY >>> array2: - %@ -- tag - %zd", self.array2[sender.tag], sender.tag);

if (sender.tag == 29) {

NSLog(@"点击了abc键");

_backView1.hidden = NO;

_backView2.hidden = YES;

}else if (sender.tag == 37) {

NSLog(@"点击了删除键");

if (self.delegate && [self.delegate respondsToSelector:@selector(deleteBtnClick)]) {

[self.delegate deleteBtnClick];

}

}else {

if (self.delegate && [self.delegate respondsToSelector:@selector(clickWithString:)]) {

[self.delegate clickWithString:self.array2[sender.tag]];

}

}

}

btn1的点击事件方法谁backview1上按钮的点击事件

btn2的点击事件方法是backview2上按钮的点击事件

分属于不同的view，这样谁都不会影响到谁，哈哈

剩下的代码我就一次性贴上去了，不多解释了，上面有注释，应该不难懂的

- (void)deleteEnd {

_backView1.hidden = NO;

_backView2.hidden = YES;

}

//通知的监听方法

- (void)textFAction:(NSNotification *)notification {

NSLog(@"LY >> info -- %@", notification.userInfo);

NSString *str = notification.userInfo[@"text"];

if (str.length == 0) {

_btn.enabled = NO;

}else if (str.length == 7) {

[self hiddenView];

}else {

_backView1.hidden = YES;

_backView2.hidden = NO;

_btn.enabled = YES;

}

}

//初次弹出键盘时

- (void)showWithString:(NSString *)string {

NSLog(@"LY >> string -- %@", string);

_backView1.hidden = YES;

_backView2.hidden = NO;

_btn.enabled = YES;

}

//收回键盘

- (void)hiddenView {

CGSize size = [UIScreen mainScreen].bounds.size;

[UIView animateWithDuration:0.3 animations:^{

CGRect frame = _backView1.frame;

frame.origin.y = size.height;

_backView1.frame = frame;

} completion:^(BOOL finished) {

[self removeFromSuperview];

}];

[UIView animateWithDuration:0.3 animations:^{

CGRect frame = _backView2.frame;

frame.origin.y = size.height;

_backView2.frame = frame;

} completion:^(BOOL finished) {

[self removeFromSuperview];

}];

}

//手势的代理方法

#pragma mark >> UIGestureRecognizerDelegate

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {

if ([touch.view isDescendantOfView:_backView1] ||

[touch.view isDescendantOfView:_backView2] ) {

return NO;

}

return YES;

}

//  颜色转换为背景图片

//  这个之前用，后来让美工做了几张图片，一共就需要4张图片(abc建背景图，删除键 返回键 字符键)

- (UIImage *)imageWithColor:(UIColor *)color {

CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);

UIGraphicsBeginImageContext(rect.size);

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetFillColorWithColor(context, [color CGColor]);

CGContextFillRect(context, rect);

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

return image;

}

//销毁通知

- (void)dealloc {

[[NSNotificationCenter defaultCenter] removeObserver:self];

}

--------------------------以上是自定义view的代码------------------------------

以上就是自定义键盘view的所有代码，按次序拷贝下去，什么都不用改，就可以用

下面重点来了，如何用这个键盘了，怎么实现逻辑了，相信做过的人脑袋里就会想分属不同的类，调用 监听等等 ，我就不废话了，下面上代码：

我申明下，为了避免textfield点击会弹出键盘这种情况发生，我用的是一个textfield上放一个和textfield一样大小的button，当然button肯定不是textfield的子view，具体布局就是一个view上先放了一个textfield 在放一个button盖在上面，这样textfield的监听方法以及代理都接收不到信号，因为上面盖的有一个button。点击button弹出键盘，这个不难的。拖线更简单

@implementation ViewController

@property (weak, nonatomic) IBOutlet UITextField *plateTF;

@property (nonatomic, strong) LYPlateKeyBoardView *keyboardView;

在要弹出键盘的类中添加一个属性，后面要用到，当然如果不用也可以不用添加的，直接写成局部的就可以

- (void)viewDidLoad {

[super viewDidLoad];

[self.plateTF addObserver:self forKeyPath:@"text" options:NSKeyValueObservingOptionNew  context:nil];

}

在这个方法中要做一件事，注册观察者，也就是kvc，为什么要用观察者，上面申明说了，textfield 上面盖了一个button，上面解释过了，这里就不解释了。当然不一定要在个方法里面，你觉得合适就行，如果你封装好的方法里面，，load的时候会调用这个方法。

kvc实现的方法

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

NSLog(@"LY >>>>>  text --- %@", change[@"new"]);

NSLog(@"LY >>>>>  self.plateTF.text --- %@", self.plateTF.text);

//判断车牌号码大于7位的时候，怎么输入就输不进去了

if (self.carNumTF.text.length > 7) {

NSString *str = [self.plateTF.text substringToIndex:self.plateTF.text.length - 1];

NSLog(@"LY >>> str --- %@", str);

self.plateTF.text = str;

}

//发送通知并把textfield的值传过去

[[NSNotificationCenter defaultCenter] postNotificationName:@"abc" object:nil userInfo:@{@"text": change[@"new"]}];

}

通知的原理大家都知道，键盘view里有实现方法，可以一一对应过去

下面是弹出键盘的方法，就是点击textfield上的button的点击事件

- (IBAction)btnClick:(id)sender {

self.keyboardView = [[LYPlateKeyBoardView alloc] initWithFrame:[UIScreen mainScreen].bounds];

self.keyboardView.delegate = self;

[self.view addSubview:self.keyboardView];

//先判断下textfield上有没有之前输入的车牌号码，主要是来初始化view用的，结合键盘view的代码看下，很容易懂的

if (self.plateTF.text.length > 0) {

[self.keyboardView showWithString:self.plateTF.text];

}

}

这里说明下，因为我是没有加导航栏的view，所以键盘的告诉是没有问题的，可以如果一旦加了导航栏，那么这里添加键盘的时候应该用:

[self.view.window addSubview:self.keyboardView];

下面就是键盘view的代理方法实现

#pragma mark >> LYPlateKeyBoardViewDelegate

- (void)clickWithString:(NSString *)string {

NSLog(@"carNumTF -- %@", self.plateTF.text);

//输入一个字符拼接到后面

self.plateTF.text = [self.plateTF.text stringByAppendingString:string];

}

- (void)deleteBtnClick {

//这里要多个判断，不然会崩的，一直点击删除键的情况下

if (self.carNumTF.text.length == 0) {

}else if (self.plateTF.text.length == 1) {

//删除完了，没有字符可以删除了，切换显示的view

[self.keyboardView deleteEnd];

self.plateTF.text = [self.plateTF.text substringToIndex:[self.plateTF.text length] - 1];

}else {

self.plateTF.text = [self.plateTF.text substringToIndex:[self.plateTF.text length] - 1];

}

}

在此基本告于段落，不过有的人可能会用在项目中的时候就崩掉了，相信一些大神肯定知道问题出在哪里，也就是最后一步，也是很重要的一步，销毁观察者，这个不能忘记了，否则用到项目中会崩的。

- (void)dealloc {

//添加观察者之后 监听完毕之后要删除观察者

[self.plateTF removeObserver:self forKeyPath:@"text"];

}

效果图如下：

WechatIMG44.png

WechatIMG45.png

keyboard.gif

最后的最后，本人是一个ios小菜鸟，代码写的不好，请大神们不要见怪，谢谢！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349

推荐阅读更多精彩内容