自定义数字键盘

项目中可能需要用到自定义的键盘。学习了下找到的2款数字键盘。自定义键盘可以通过设置UITextField的inputView实现。inputAccessoryView可以设置键盘上的工具条。


1.gif

1. 带小数点常规数字键盘

布局就采用xib了,然后铺满了button,拉满了约束。总之是做到平分、等宽、等高就可以了。另外用代码设置了高亮的背景色。
然后把键盘的使用封装到了控件当中,TTTextFieldTTTextView。使用控件就可以支持数字键盘。

点击的处理,通常会考虑让控件做为代理,然后根据点击的按钮进行text的拼接。可是如果要支持2种控件,就考虑在keyboardView中持有控件,内部进行输入的逻辑判断,修改控件的text内容。

按键事件处理:

- (IBAction)keyboardClick:(id)sender
{
    [[UIDevice currentDevice] playInputClick];
    
    UIButton *btn = (UIButton *)sender;
    NSString *strValue = nil;
    if ([self.textView isKindOfClass:[UITextView class]])
    {
        strValue = ((UITextView *)self.textView).text;
    }
    else if ([self.textView isKindOfClass:[UITextField class]])
    {
        strValue = ((UITextField *)self.textView).text;
    }
    
    // 利用textView 在此处修改text,而不是去textField textView修改2遍
    if ([self.delegate respondsToSelector:@selector(NumberKeyboard:didClickWithButton:)])
    {
        // 这样处理的话 这个代理暂时没有用了
        [self.delegate NumberKeyboard:self didClickWithButton:btn];
    }
    
    if (btn.tag <= 100) // 文本
    {
        [self setTextWithSender:btn OriginalText:strValue];
    }
    else // 功能
    {
        switch (btn.tag)
        {
            case 200: // ABC
            {
                id tempTextView = _textView;
                [tempTextView setInputView:nil];
                [tempTextView reloadInputViews];
                [self addBackKeyboardButton:@"More-Key"];
            }
                break;
            case 201: // del
            {
                if(_textView && [_textView respondsToSelector:@selector(deleteBackward)])
                {
                    [_textView deleteBackward];
                }
                else
                {
                    id tempTextView = _textView;
                    if(strValue.length <= 0)
                        return;
                    // 当前文字
                    NSMutableString* strText = [[NSMutableString alloc] initWithString:[tempTextView text]];
                    // 最后一个字符
                    NSRange theRange = NSMakeRange(strText.length-1, 1);
                    [strText deleteCharactersInRange:theRange];
                    [tempTextView setText:[NSString stringWithFormat:@"%@",strText]];
                    [tempTextView setNeedsDisplay];
                }

            }
                break;
            case 202: // 隐藏
            case 203: // 确定
            {
                
                if ([self.textView isKindOfClass:[UITextView class]])
                    [(UITextView *)self.textView resignFirstResponder];
                
                else if ([self.textView isKindOfClass:[UITextField class]])
                    [(UITextField *)self.textView resignFirstResponder];
            }
                break;
                
            default:
                break;
        }
    }

}
  • 普通文本的处理

- (void)setTextWithSender:(UIButton *)sender OriginalText:(NSString *)strValue方法中 主要是对小数点的输入、小数位数、0开头问题等的处理,并且对text进行拼接和设置。

  • 功能按键的处理
  1. ABC
[tempTextView setInputView:nil];
[tempTextView reloadInputViews];
[self addBackKeyboardButton:@"More-Key"];

比较关键的就是在切换回系统的键盘后,找到了系统键盘More-Key这个键,就是看到的123。在上面添加了一个按钮,用于切换回我们的数字键盘。
因为我们项目中是禁用第三方键盘的,所以没有问题。如果你跟我一样使用的是搜狗输入法,那么因为不能获取到搜狗的按键view,就切不回来了。要是有朋友知道可以实现的话,还请可以指教一下。

  1. 删除
    由于textView不支持deleteBackward方法,所以麻烦点,要取到文本内容,截取到最后一个字符之前。或者deleteCharactersInRange删除最后一个字符。
  2. 确定、隐藏
    就是取消第一响应者。

TTTextField

/**
 *  随机数 还是 普通数字键盘
 */
@property (nonatomic, assign) KeyboardViewType keyboardViewType;
/**
 *  数字键盘 限制小数位数    默认2位
 */
@property (nonatomic, assign) NSUInteger dotvalue;
/**
 *  随机键盘 限制输入长度    默认不限制
 */
@property (nonatomic, assign) NSUInteger PWDlength;
@end

在设置type的时候,进行自定义键盘的设置。

-(void)setKeyboardViewType:(KeyboardViewType)keyboardViewType
{
    _keyboardViewType = keyboardViewType;
    if (keyboardViewType == KeyboardViewNum)
    {
        NumberKeyboardView *keyboard = [NumberKeyboardView shareKeyboardView];
        keyboard.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, kKeyboardHeight);
        self.inputView = keyboard;
    }
    else if (keyboardViewType == KeyboardViewRandomNum)
    {
        RanNumKeyboardView *ranKeyboard = [RanNumKeyboardView shareKeyboardView];
        ranKeyboard.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, kKeyboardHeight);
        // 设置随机数排列
        [ranKeyboard setRandomNumberText];
        self.inputView = ranKeyboard;
    }
}

通过设置控件的dotvalue,去keyboardView中进行小数位数的控制

-(void)setDotvalue:(NSUInteger)dotvalue
{
    _dotvalue = dotvalue;
    NumberKeyboardView *keyboard = [NumberKeyboardView shareKeyboardView];
    keyboard.dotvalue = dotvalue;
}

keyboardView的代理设置和textView设置就不一一贴代码了,一看就知道了。

关于键盘音效的问题,需要注意一下。

To enable a custom input or accessory view for input clicks, perform the following two steps:

  1. Adopt the UIInputViewAudioFeedback protocol in your input view class.
  1. Implement the enableInputClicksWhenVisible delegate method to return YES.

就是以下2点

@interface NumberKeyboardView : UIView<UIInputViewAudioFeedback>
#pragma mark - UIInputViewAudioFeedback
- (BOOL)enableInputClicksWhenVisible
{
    return YES;
}

2. 随机数字键盘

也就是招商手机银行的数字键盘效果,参考了WAMaker/SelfDefineKeyboard的demo,只是他的block有点绕,我就简单的换成代理实现了。要是有什么不足的地方希望可以提醒我。

主要就是在控件设置键盘的时候调用方法设置按钮文字。当然在每次控件becomeFirstResponder的时候都重新设置一遍,做到随机的效果。

// 设置键盘文字
- (void)setRandomNumberText
{
    NSMutableArray *numbers = [NSMutableArray array];
    int startNum = 0;
    int length = 10;
    // 0-9 string
    for (int i = startNum; i < length; i++)
    {
        [numbers addObject:[NSString stringWithFormat:@"%d", i]];
    }
    // settitle
    for (int i = 0; i < self.arrKeys.count; i++)
    {
        UIButton *button = self.arrKeys[i];
        if (i == kKeyboardDelIndex) {
            [button setTitle:kKeyboardDeleteText forState:UIControlStateNormal];
            continue;
        } else if (i == kKeyboardDoneIndex) {
            [button setTitle:kKeyboardDoneText forState:UIControlStateNormal];
            continue;
        }
        // 0-9
        int index = arc4random() % numbers.count;
        // 换成索引
        [button setTitle:numbers[index] forState:UIControlStateNormal];
        // count减少
        [numbers removeObjectAtIndex:index];
    }
}

然后就是对PWDlength进行控制,感觉可能会遇到这种需求吧,默认是无限制的。

此处就不支持textView了,没什么使用场景。

demo地址,要是有什么不足之处,错误的地方请及时告知我,好好改进。

对于功能更加齐全的字母密码键盘 推荐

iFindTA/NHKeyboardPro
![QQ20160406-1@2x.png](http://upload-images.jianshu.io/upload_images/810907-5ef4bfab4027ebbf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 =375x667)

1111

QQ20160406-3@2x.png

打算看看代码,把几种键盘用工具条切换加上去

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

推荐阅读更多精彩内容

  • 好久没有写Android的文章了,有两三个月多了吧,刚开始搞微信小程序,后来又开搞ReactNative,现在又兴...
    Code4Android阅读 17,628评论 4 26
  • 来自产品经理的"简单"需求一则 需求:在输入身份证号码的时候,弹出来的键盘是能够切换到字母的九宫格数字键盘。(左边...
    伊尔今夏阅读 10,446评论 5 33
  • 自定义数字键盘 1.键盘布局horizontalGap:按键间的水平间隔keyHeight:按键高度以%或者%p结...
    StChris阅读 4,618评论 0 23
  • 在开发中经常碰到一些会用到自定义的数字键盘的,这些一般都是随机或者按照一定的规则来生成的数字键盘,这段时间刚好有这...
    fuaiyi阅读 2,178评论 0 2
  • 敦煌莫高窟规模之大,艺术成就之高,海内外名声之响自不必说。但对于黄金周出游的我们来说,它唯一却致命的缺陷只有一个:...
    Teresa特蕾鲨阅读 2,380评论 1 2