姓名:唐來賓? 學號:17101223417
轉載http://mp.weixin.qq.com/s/vsopOQF6uJxHxWSsTX4p7A
【嵌牛導讀】最近由于項目需求,需要錄入車牌號碼,諸多限制條件要判斷車牌號碼的合理性,最后看見支付寶的車牌號碼輸入鍵盤,決定自己寫一個
考慮過用textfield的inputview來替換他嫡,但是本人總感覺會有坑在里面,所以最后決定用自定義的view來做一個 只要做一個簡單的彈出動畫即可實現(xiàn)inpuview一樣的效果,創(chuàng)建文件都會的 我就直接上代碼了
【嵌牛鼻子】鍵盤輸入至非,C++
【嵌牛提問】如何提高輸入效率?
【嵌牛正文】最近由于項目需求糠聪,需要錄入車牌號碼荒椭,諸多限制條件要判斷車牌號碼的合理性,最后看見支付寶的車牌號碼輸入鍵盤舰蟆,決定自己寫一個
考慮過用textfield的inputview來替換趣惠,但是本人總感覺會有坑在里面,所以最后決定用自定義的view來做一個 只要做一個簡單的彈出動畫即可實現(xiàn)inpuview一樣的效果身害,創(chuàng)建文件都會的 我就直接上代碼了
#import
//鍵盤view的代理味悄,用來監(jiān)控鍵盤輸入
@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; //省市簡寫數(shù)組
@property (nonatomic, strong) NSArray *array2; //車牌號碼字母數(shù)字數(shù)組
@end
構思時想用一個view來切換數(shù)組的方式來切換顯示的不同內容塌鸯,發(fā)現(xiàn)兩個數(shù)組以及view上布局有點讓人頭疼侍瑟,就用了2個view來布局,只要根據(jù)輸入的字符來隱藏其中一個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;
}
這里先懶加載兩個數(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)见擦,代碼有點繁瑣钉汗,主要就是計算坐標,九宮格布局鲤屡,這個可以自己寫的损痰,相信都會的,廢話不多說酒来,請看代碼:
- (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;
}];
}
這段代碼我沒有做注釋卢未,就是九宮格布局,計算坐標堰汉,寫過九宮格的都會辽社,我就不多做解釋了,關鍵在于后面邏輯的實現(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滴铅,這樣誰都不會影響到誰,哈哈
剩下的代碼我就一次性貼上去了就乓,不多解釋了汉匙,上面有注釋,應該不難懂的
- (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;
}
// ?顏色轉換為背景圖片
// ?這個之前用生蚁,后來讓美工做了幾張圖片噩翠,一共就需要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)邏輯了,相信做過的人腦袋里就會想分屬不同的類蠢涝,調用 監(jiān)聽等等 玄呛,我就不廢話了,下面上代碼:
我申明下和二,為了避免textfield點擊會彈出鍵盤這種情況發(fā)生徘铝,我用的是一個textfield上放一個和textfield一樣大小的button,當然button肯定不是textfield的子view,具體布局就是一個view上先放了一個textfield 在放一個button蓋在上面惕它,這樣textfield的監(jiān)聽方法以及代理都接收不到信號系谐,因為上面蓋的有一個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實現(xiàn)的方法
- (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;
}
//發(fā)送通知并把textfield的值傳過去
[[NSNotificationCenter defaultCenter] postNotificationName:@"abc" object:nil userInfo:@{@"text": change[@"new"]}];
}
通知的原理大家都知道,鍵盤view里有實現(xiàn)方法冒嫡,可以一一對應過去
下面是彈出鍵盤的方法拇勃,就是點擊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的代理方法實現(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小菜鳥横腿,代碼寫的不好颓屑,請大神們不要見怪,謝謝耿焊!