iOS仿支付寶車牌號碼輸入鍵盤

姓名：唐來賓? 學號：17101223417

轉載http://mp.weixin.qq.com/s/vsopOQF6uJxHxWSsTX4p7A

【嵌牛導讀】最近由于項目需求，需要錄入車牌號碼，諸多限制條件要判斷車牌號碼的合理性，最后看見支付寶的車牌號碼輸入鍵盤，決定自己寫一個

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

【嵌牛鼻子】鍵盤輸入，C++

【嵌牛提問】如何提高輸入效率？

【嵌牛正文】最近由于項目需求，需要錄入車牌號碼，諸多限制條件要判斷車牌號碼的合理性，最后看見支付寶的車牌號碼輸入鍵盤，決定自己寫一個

#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閱讀 229,836評論 6贊 540
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,275評論 3贊 428
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 177,904評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,633評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,368評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,736評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,740評論 3贊 446
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,919評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,481評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,235評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,427評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,968評論 5贊 363
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,656評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,055評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,348評論 1贊 294
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,160評論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,380評論 2贊 379

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

iOS仿支付寶車牌號碼輸入鍵盤

iOS仿支付寶車牌號碼輸入鍵盤

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

iOS仿支付寶車牌號碼輸入鍵盤

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频