iOS 自定义键盘

少年佳节倍多情,老去谁知感慨生;
不效艾符趋习俗,但祈蒲酒话升平。
鬓丝日日添白头,榴锦年年照眼明;
千载贤愚同瞬息,几人湮没几垂名。

UI想要的效果,我...只能默默的承受着

keyBoard.png

前言

端午将近,想想再过一个小时就要回家,心里难免有点激动,但是作为一个程序猿,怎么也不能闲着,于是想起了最近正在做的项目中关于自定义键盘,下面就与大家分享分享,因为时间关系,GLKeyBoard就写的有点简单,下面就来看看具体实现

思路

就以UITextField为例,在API中有这么一个属性inputView,当我们的UITextField成为第一响应者的时候就会弹出该view,当然我们默认情况下是系统默认的键盘,所以,要想自定义键盘,就需要在此处下功夫了。

动手
  1. 想必写这个界面,对各位是没有什么难度的,绝对妥妥的,十来分钟就搞定的事情,贴上部分代码
-(void)initializeViewComponents
{
    self.backgroundColor =UICOLOR_FROM_RGB_OxFF(0xbfc5ca);
    
    NSArray *array = @[@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"0",@"千",@"万",@"十万",@"百万",@"Delete",@"清除",];
    
    for (int i = 0; i < kKeyBoardNumber; i ++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.tag = kKeyBoardTag + i;
        [button setBackgroundColor:UICOLOR_FROM_RGB_OxFF(0xfefefe)];
        if (i == kKeyBoardNumber-2) {
            [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            [button setBackgroundColor:UICOLOR_FROM_RGB_OxFF(0xff4238)];
        }else{
            [button setTitleColor:UICOLOR_FROM_RGB_OxFF(0x303030) forState:UIControlStateNormal];
        }
        if (i > 9) {
            button.titleLabel.font = [UIFont systemFontOfSize:12];
        }else{
            button.titleLabel.font = [UIFont systemFontOfSize:15];
        }
        
        button.layer.cornerRadius = 5;
        [button.layer setMasksToBounds:YES];
        
        [button setTitle:array[i] forState:UIControlStateNormal];
        [button addTarget:self action:@selector(keyBoardClick:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:button];
        
        if (i == 0) {
            [button mas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(GTReViewXFloat(kKeyBoardWidth), GTReViewXFloat(kKeyBoardHeight)));
                make.top.equalTo(@(GTReViewXFloat(kKeyBoardTopPadding)));
                make.left.equalTo(self.mas_left).offset(GTReViewXFloat(5));
            }];
            
            _lastButton = button;
        }else if(i < 10){
            [button mas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(GTReViewXFloat(kKeyBoardWidth), GTReViewXFloat(kKeyBoardHeight)));
                make.top.equalTo(@(GTReViewXFloat(kKeyBoardTopPadding)));
                make.left.equalTo(_lastButton.mas_right).offset(GTReViewXFloat(kKeyBoardMiddlePadding));
            }];
            
            _lastButton = button;
        }else if(i == 10){
            [button mas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(GTReViewXFloat(kKeyBoardBigWidth), GTReViewXFloat(kKeyBoardHeight)));
                make.top.equalTo(_lastButton.mas_bottom).offset((GTReViewXFloat(kKeyBoardTopPadding)));
                make.left.equalTo(self.mas_left).offset(GTReViewXFloat(5));
            }];
            _lastButton = button;
        }else if (i < 14 && i > 10){
            [button mas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(GTReViewXFloat(kKeyBoardBigWidth), GTReViewXFloat(kKeyBoardHeight)));
                make.top.equalTo(_lastButton.mas_top);
                make.left.equalTo(_lastButton.mas_right).offset(GTReViewXFloat(kKeyBoardBottomMiddlePadding));
            }];
            _lastButton = button;
        }else if (i == 14){
            [button mas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(GTReViewXFloat(100), GTReViewXFloat(kKeyBoardHeight)));
                make.top.equalTo(_lastButton.mas_top);
                make.left.equalTo(_lastButton.mas_right).offset(GTReViewXFloat(kKeyBoardBottomMiddlePadding));
            }];
            _lastButton = button;
            
        }else if (i == 15){
            [button mas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(GTReViewXFloat(84), GTReViewXFloat(kKeyBoardHeight)));
                make.top.equalTo(_lastButton.mas_top);
                make.left.equalTo(_lastButton.mas_right).offset(GTReViewXFloat(kKeyBoardBottomMiddlePadding));
            }];
            _lastButton = button;
        }
    }
}

这里不建议像我这样,把需要的键值写在这里,最好是新建一个plist文件,这个布局代码也有点乱,大家多担待。

  1. 写完之后,激动的我赶快想看下效果,于是飞快的写下了下面的代码
    GLKeyBoard *keyBoard = [[GLKeyBoard alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, GTReViewXFloat(85))];
    
    _textFiled = [[UITextField alloc] init];
    _textFiled.delegate = (id)self;
    _textFiled.textColor = [UIColor orangeColor];
    _textFiled.borderStyle = UITextBorderStyleRoundedRect;
    _textFiled.placeholder = @"随便输...";
    _textFiled.inputView = keyBoard;
    [self.view addSubview:_textFiled];

正当我兴奋不已的时候,我艹,什么鬼,点了按钮都没反应,恍然大悟,原来按钮点击那里什么都没处理....

  1. 进入按钮点击后的核心处理
    首先,我们的在GLKeyBoard中添加点东西
//键盘点击类型
typedef NS_ENUM(NSInteger,GLKeyBoardType) {
    GLKeyBoardClearAll,
    GLKeyBoardDelete,
    GLKeyBoardOther
};
//键盘点击事件
typedef void(^KeyBoardClickBlcok)(GLKeyBoardType keyBoardType, NSString *text);

这样后,我们在点击处就可以添加下面的代码了

-(void)keyBoardClick:(UIButton *)sender
{
    NSInteger tag = sender.tag - kKeyBoardTag;
    switch (tag) {
        case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:case 8:case 9:case 10:case 11:case 12:case 13:
        {
            if (self.keyBoardClickBlock) {
                self.keyBoardClickBlock(GLKeyBoardOther, sender.currentTitle);
            }
        }
            break;
        case 14:
        {
            if (self.keyBoardClickBlock) {
                self.keyBoardClickBlock(GLKeyBoardDelete, sender.currentTitle);
            }
        }
            break;
        case 15:{
            if (self.keyBoardClickBlock) {
                self.keyBoardClickBlock(GLKeyBoardClearAll, sender.currentTitle);
            }
        }
            break;
        default:
            break;
    }
}

然后我们就可以在block中对textField中进行值的处理了
一开始,我想的是在viewcontroller中,直接添加处理方法,根据按钮的类型,来改变值,但是这样的话,岂不是每个用到的地方都要写一篇,难免太复杂,于是我想到了category,这就有了UITextField+GLKeyBoard这个类的诞生
在该类中主要添加了一个方法
- (void)updateText:(NSString *)text,根据按钮点击的文字来更改输入控件的值,方法过程也不是很复杂,每个地方都有标注,相信大家看了都会明白
最主要的思想就是根据光标来分割两边的字符,然后将新的字符插入到光标位置,并移动光标的位置。

- (void)updateText:(NSString *)text
{
    if ([text isEqualToString:@"千"]) {
        [self changeTextWithNumber:1000];
    }else if ([text isEqualToString:@"万"]){
        [self changeTextWithNumber:10000];
    }else if ([text isEqualToString:@"十万"]){
        [self changeTextWithNumber:100000];
    }else if ([text isEqualToString:@"百万"]){
        [self changeTextWithNumber:1000000];
    }
    else{
        UITextPosition *beginning = self.beginningOfDocument;//文字的开始地方
        UITextPosition *startPosition = self.selectedTextRange.start;//光标开始位置
        UITextPosition *endPosition = self.selectedTextRange.end;//光标结束位置
        NSInteger startIndex = [self offsetFromPosition:beginning toPosition:startPosition];//获取光标开始位置在文字中所在的index
        NSInteger endIndex = [self offsetFromPosition:beginning toPosition:endPosition];//获取光标结束位置在文字中所在的index
        
        // 将输入框中的文字分成两部分,生成新字符串,判断新字符串是否满足要求
        NSString *originText = self.text;
        NSString *beforeString = [originText substringToIndex:startIndex];//从起始位置到当前index
        NSString *afterString = [originText substringFromIndex:endIndex];//从光标结束位置到末尾
        
        NSInteger offset;
        
        if (![text isEqualToString:@""]) {
            offset = text.length;
        } else {
            // 只删除一个字符
            if (startIndex == endIndex) {
                if (startIndex == 0) {
                    return;
                }
                offset = -1;
                beforeString = [beforeString substringToIndex:(beforeString.length - 1)];
            } else {
                //光标选中多个
                offset = 0;
            }
        }
        
        NSString *newText = [NSString stringWithFormat:@"%@%@%@", beforeString, text, afterString];
        self.text = newText;
        
        // 重置光标位置
        UITextPosition *nowPosition = [self positionFromPosition:startPosition offset:offset];
        UITextRange *range = [self textRangeFromPosition:nowPosition toPosition:nowPosition];
        self.selectedTextRange = range;
    }
}

到此为止,我们的键盘就OK啦,来看看效果

init.png

嗯哼,怎么感觉不对呢?

  1. 位置不对
  2. 键盘上面怎么多了一截呢?

排查后,才发现是导入了IQKeyboard这个类,导致键盘默认会有个工具栏在上面,但是我们美工妹子说了,不能要,好吧,于是我查看API,发现了这个参数

/**
 Automatic add IQToolbar functionality. Default is YES.
 */
@property(nonatomic, assign, getter = isEnableAutoToolbar) BOOL enableAutoToolbar;

于是我添加了一行代码,在vc

   //如果不需要
  [[IQKeyboardManager sharedManager] setEnableAutoToolbar:NO];

瞬间就对了,那么第一个问题怎么办呢?我首先想到的就是在键盘弹出的时候去修改坐标,但是我们必须的拿到这个键盘的view,我显示把GLKeyBoard *keyBoard这个对象当作键盘来设置,然后当头一棒,不行的,完全没反应。
看来只能自己写个方法来查找我们自定义的keyBoard

- (UIView *)findKeyboard
{
    UIView *keyboardView = nil;
    NSArray *windows = [[UIApplication sharedApplication] windows];
    for (UIWindow *window in [windows reverseObjectEnumerator])//逆序效率更高,因为键盘总在上方
    {
        keyboardView = [self findKeyboardInView:window];
        if (keyboardView)
        {
            return keyboardView;
        }
    }
    return nil;
}

- (UIView *)findKeyboardInView:(UIView *)view
{
    for (UIView *subView in [view subviews])
    {
        NSLog(@" 打印信息:%s",object_getClassName(subView));
        if (strstr(object_getClassName(subView), "UIInputSetHostView"))
        {
            return subView;
        }
        else
        {
            UIView *tempView = [self findKeyboardInView:subView];
            if (tempView)
            {
                return tempView;
            }
        }
    }
    return nil;
}

这里有个问题要注意下,就是如果你不晓得哪个是我们的keyBoard,可以在NSLog(@" 打印信息:%s",object_getClassName(subView));这个位置打个断点,看看view具体展示的是那个

point.png

网上有这样的
if (strstr(object_getClassName(subView), "UIKeyboard")),经测试是不行的,我估计应该是在后面的版本中发生了变化
在找到keyBoard这个view后,一切就变的简单了
我们只需要在键盘即将弹出的通知处添加下面代码就搞定啦

//键盘出现时候调用的事件
-(void) keyboadWillShow:(NSNotification *)note{
    NSDictionary *info = [note userInfo];
    CGRect keyboardFrame = [[info objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];//键盘的frame

    keyboardFrame.origin.y = CGRectGetMaxY(_textFiled.frame) + 4.5;
    UIView *keyBoardView = [self findKeyboard];
    
    
    [UIView animateWithDuration:0.2 animations:^{
        [keyBoardView setFrame:keyboardFrame];
    }];
}

在这里,还遇到个小坑,就是如果textField是写在cell中的,那么添加通知,最好不要在cell的初始化方法中添加,建议在textField的代理textFieldDidBeginEditing中添加,因为通知是一对多的,如果在cell的初始化方法中添加,当有很多cell的时候,键盘会上下跳动,而且坐标不是你想要的坐标

结语

关于自定义键盘,就差不多这么,希望大家能喜欢,要放假了,祝大家端午快乐~回家包包子去了....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容