最近由于項目需求吕嘀，需要錄入車牌號碼兽间，諸多限制條件要判斷車牌號碼的合理性谒臼，最后看見支付寶的車牌號碼輸入鍵盤会烙，決定自己寫一個

考慮過用textfield的inputview來替換，但是本人總感覺會有坑在里面韭赘，所以最后決定用自定義的view來做一個 只要做一個簡單的彈出動畫即可實現(xiàn)inpuview一樣的效果缩滨，創(chuàng)建文件都會的 我就直接上代碼了

#import <UIKit/UIKit.h>

//鍵盤view的代理，用來監(jiān)控鍵盤輸入
@protocol LYPlateKeyBoardViewDelegate <NSObject>

//點擊鍵盤上的按鈕
- (void)clickWithString:(NSString *)string;

//點擊刪除按鈕
- (void)deleteBtnClick;

@end

@interface LYPlateKeyBoardView : UIView

@property (nonatomic, weak) id<LYPlateKeyBoardViewDelegate> delegate;

//公共方法 - 字符串已經(jīng)刪除完畢
- (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()<UIGestureRecognizerDelegate>
{
    UIView *_backView1; //第一個view
    UIView *_backView2; //第二個view
//    UIView *_bottomView;
    UIButton *_btn;
}

@property (nonatomic, strong) NSArray *array1; //省市簡寫數(shù)組
@property (nonatomic, strong) NSArray *array2; //車牌號碼字母數(shù)字?jǐn)?shù)組

@end

構(gòu)思時想用一個view來切換數(shù)組的方式來切換顯示的不同內(nèi)容脉漏，發(fā)現(xiàn)兩個數(shù)組以及view上布局有點讓人頭疼，就用了2個view來布局袖牙，只要根據(jù)輸入的字符來隱藏其中一個view

@implementation LYPlateKeyBoardView

- (NSArray *)array1 {
    if (!_array1) {
        _array1 = @[@"京",@"津",@"渝",@"滬",@"冀",@"晉",@"遼",@"吉",@"黑",@"蘇",@"浙",@"皖",@"閩",@"贛",@"魯",@"豫",@"鄂",@"湘",@"粵",@"瓊",@"川",@"貴",@"云",@"陜",@"甘",@"青",@"蒙",@"桂",@"寧",@"新",@"",@"藏",@"使",@"領(lǐng)",@"警",@"學(xué)",@"港",@"澳",@""];
    }
    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;
}

這里先懶加載兩個數(shù)組侧巨，下面就是view的初始化方法，在初始化方法中注冊了一個通知和添加一個手勢鞭达，用途代碼注釋上都有些

- (instancetype)initWithFrame:(CGRect)frame {
    
    if (self = [super initWithFrame:frame]) {
        
        self.backgroundColor = HEXCOLOR(0x000000, 0.1);
        
        //注冊一個通知司忱，后面會用到，來監(jiān)聽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方法里面實現(xiàn)，代碼有點繁瑣撮胧，主要就是計算坐標(biāo)桨踪，九宮格布局，這個可以自己寫的芹啥，相信都會的锻离，廢話不多說铺峭，請看代碼：

- (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;
    }];
}

這段代碼我沒有做注釋，就是九宮格布局汽纠，計算坐標(biāo)卫键，寫過九宮格的都會，我就不多做解釋了虱朵，關(guān)鍵在于后面邏輯的實現(xiàn)莉炉，下面是鍵盤上按鈕的點擊事件的監(jiān)聽代碼：

- (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，這樣誰都不會影響到誰碴犬，哈哈

剩下的代碼我就一次性貼上去了絮宁，不多解釋了，上面有注釋服协，應(yīng)該不難懂的

- (void)deleteEnd {
    _backView1.hidden = NO;
    _backView2.hidden = YES;
}

//通知的監(jiān)聽方法
- (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;
}

//  顏色轉(zhuǎn)換為背景圖片
//  這個之前用绍昂，后來讓美工做了幾張圖片，一共就需要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的所有代碼窘游，按次序拷貝下去，什么都不用改跳纳，就可以用
下面重點來了忍饰，如何用這個鍵盤了，怎么實現(xiàn)邏輯了寺庄，相信做過的人腦袋里就會想分屬不同的類艾蓝，調(diào)用 監(jiān)聽等等 ，我就不廢話了铣揉，下面上代碼：

我申明下，為了避免textfield點擊會彈出鍵盤這種情況發(fā)生餐曹，我用的是一個textfield上放一個和textfield一樣大小的button逛拱，當(dāng)然button肯定不是textfield的子view，具體布局就是一個view上先放了一個textfield 在放一個button蓋在上面台猴，這樣textfield的監(jiān)聽方法以及代理都接收不到信號朽合，因為上面蓋的有一個button。點擊button彈出鍵盤饱狂，這個不難的曹步。拖線更簡單

@implementation ViewController

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

在要彈出鍵盤的類中添加一個屬性，后面要用到休讳，當(dāng)然如果不用也可以不用添加的讲婚，直接寫成局部的就可以

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.plateTF addObserver:self forKeyPath:@"text" options:NSKeyValueObservingOptionNew  context:nil];
}

在這個方法中要做一件事，注冊觀察者俊柔，也就是kvc筹麸，為什么要用觀察者活合，上面申明說了，textfield 上面蓋了一個button物赶，上面解釋過了白指，這里就不解釋了。當(dāng)然不一定要在個方法里面酵紫，你覺得合適就行告嘲，如果你封裝好的方法里面，奖地，load的時候會調(diào)用這個方法橄唬。

kvc實現(xiàn)的方法

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    
    NSLog(@"LY >>>>>  text --- %@", change[@"new"]);
    NSLog(@"LY >>>>>  self.plateTF.text --- %@", self.plateTF.text);
    
   //判斷車牌號碼大于7位的時候，怎么輸入就輸不進(jìn)去了
   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;
    }
    //發(fā)送通知并把textfield的值傳過去
    [[NSNotificationCenter defaultCenter] postNotificationName:@"abc" object:nil userInfo:@{@"text": change[@"new"]}];
    
}

通知的原理大家都知道鹉动，鍵盤view里有實現(xiàn)方法轧坎，可以一一對應(yīng)過去
下面是彈出鍵盤的方法，就是點擊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用的缸血，結(jié)合鍵盤view的代碼看下，很容易懂的
if (self.plateTF.text.length > 0) {
        [self.keyboardView showWithString:self.plateTF.text];
    }
    
}

這里說明下械筛，因為我是沒有加導(dǎo)航欄的view捎泻，所以鍵盤的告訴是沒有問題的，可以如果一旦加了導(dǎo)航欄埋哟，那么這里添加鍵盤的時候應(yīng)該用:

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

下面就是鍵盤view的代理方法實現(xiàn)

#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 {
    
    //添加觀察者之后 監(jiān)聽完畢之后要刪除觀察者
    [self.plateTF removeObserver:self forKeyPath:@"text"];
}

效果圖如下：

WechatIMG44.png

WechatIMG45.png

keyboard.gif

最后的最后晨逝，本人是一個ios小菜鳥，代碼寫的不好懦铺，請大神們不要見怪捉貌，謝謝！