在開發(fā)中經(jīng)常碰到一些會(huì)用到自定義的數(shù)字鍵盤的,這些一般都是隨機(jī)或者按照一定的規(guī)則來(lái)生成的數(shù)字鍵盤,這段時(shí)間剛好有這個(gè)需求所以就寫了一個(gè)先看下效果
Untitled.gif
先說(shuō)一下實(shí)現(xiàn)思路:
其實(shí)開發(fā)這種鍵盤很簡(jiǎn)單的,直接自定義一個(gè)UITextField 的 inputView就行了, 這個(gè)自定的view上面是一個(gè)toolbar 下面則是用的 collectionview 然后處理點(diǎn)擊事件來(lái)控制輸入效果
那接下來(lái)我們來(lái)看一下實(shí)現(xiàn)過程:
首先我們先來(lái)實(shí)現(xiàn)自定義的View
- (void)setupComponents
{
self.bounds = CGRectMake(0, 0, self.bounds.size.width, kKeyBoardHeight);
[self setupToolBar];
[self setupCollectionView];
}
-(void)setupToolBar
{
UIToolbar *toolBar = [UIToolbar new];
toolBar.backgroundColor = [UIColor groupTableViewBackgroundColor];
[self addSubview:toolBar];
UIImageView *safeImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"keyboard_safe"]];
[toolBar addSubview:safeImage];
UILabel *safeLabel = [UILabel new];
safeLabel.textAlignment = NSTextAlignmentCenter;
safeLabel.text = @"安全鍵盤";
safeLabel.textColor = self.fontColor;
safeLabel.font = [UIFont systemFontOfSize:15];
[toolBar addSubview:safeLabel];
UIBarButtonItem *flexibleBarBtnItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
UIBarButtonItem *finishInputBarBtnItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(doneBtnClick)];
toolBar.tintColor = [UIColor blackColor];
toolBar.items = @[flexibleBarBtnItem, finishInputBarBtnItem];
[toolBar mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self);
make.leading.equalTo(self);
make.trailing.equalTo(self);
make.height.mas_equalTo(KToolBarViewHeight);
}];
[safeImage mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(15.0f, 17.0f));
make.centerY.equalTo(toolBar);
make.trailing.equalTo(safeLabel.mas_leading).offset(-6.0f);
}];
[safeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(CGSizeMake(toolBar.center.x+11.0f, toolBar.center.y));
}];
}
-(void)setupCollectionView
{
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.minimumInteritemSpacing = self.itemSpace;
flowLayout.minimumLineSpacing = self.itemSpace;
flowLayout.sectionInset = UIEdgeInsetsMake(self.itemSpace, 0, -self.itemSpace, 0);
flowLayout.itemSize = CGSizeMake(kItemWidth, kItemHeight);
_keyboardView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, KToolBarViewHeight, [UIScreen mainScreen].bounds.size.width, self.frame.size.height - KToolBarViewHeight) collectionViewLayout:flowLayout];
_keyboardView.backgroundColor = [UIColor groupTableViewBackgroundColor];
_keyboardView.delaysContentTouches = NO;
_keyboardView.dataSource = self;
_keyboardView.delegate = self;
[self addSubview:_keyboardView];
[_keyboardView registerClass:[SafeKeyboardImageCell class] forCellWithReuseIdentifier:NSStringFromClass([SafeKeyboardImageCell class])];
[_keyboardView registerClass:[SafeKeyboardTextCell class] forCellWithReuseIdentifier:NSStringFromClass([SafeKeyboardTextCell class])];
}
這里很簡(jiǎn)單就是UI的搭建 用到了masonry來(lái)自動(dòng)布局的,但這里我們是自己添加的toolbar,里面有一個(gè)完成按鈕,收鍵盤用的,如果你用到了IQKeyBoardManager等這種鍵盤控制的三方庫(kù)的可能需要做一下兼容沒因?yàn)樗麄円沧詣?dòng)加了一個(gè)toolbar 例如:IQKeyBoardManager
-(void)textFieldBeginEditing
{
if (randomKeyboard && changeWhenAppear)
{
[self refresh];
}
//如果用到了IQKeyboardManager
[IQKeyboardManager sharedManager].enableAutoToolbar = NO;
}
-(void)textFieldEndEditing
{
//如果用到了IQKeyboardManager
[IQKeyboardManager sharedManager].enableAutoToolbar = YES;
}
接下來(lái)就是數(shù)據(jù)源了:
使用隨機(jī)排序的數(shù)據(jù)源
- (void)refresh
{
if (randomKeyboard)
{
[_titleArr removeAllObjects];
NSMutableArray *startArray=[[NSMutableArray alloc] initWithObjects:@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",nil];
NSMutableArray *resultArray = [[NSMutableArray alloc] initWithCapacity:0];
NSInteger m = 10;
for (int i=0; i<m; i++)
{
int t=arc4random()%startArray.count;
resultArray[i] = startArray[t];
startArray[t] = [startArray lastObject];
[startArray removeLastObject];
}
[resultArray insertObject:@"C" atIndex:9];
[resultArray insertObject:@"D" atIndex:11];
_titleArr = resultArray;
}
else
{
_titleArr = [NSMutableArray arrayWithArray:@[@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"C",@"0",@"D"]];
}
[_keyboardView reloadData];
}
然后處理點(diǎn)擊事件
- (void)showInputWithNumberStr:(NSString *)numStr
{
if ([@"C" isEqualToString:numStr])
{
_textField.text = @"";
_safeKeyboardDidChangedBlock ? _safeKeyboardDidChangedBlock(_textField.text) : nil;
}
else if([@"D" isEqualToString:numStr])
{
[_textField deleteBackward];
}
else
{
[_textField insertText:numStr];
}
}
最后設(shè)置UITextField的inputView為我們自定義的view就OK了
- (instancetype)initWithTextField:(UITextField *)textField
{
if (self = [super init])
{
_textField = textField;
_textField.inputView = self;
[_textField addTarget:self action:@selector(textFieldChangedEditing) forControlEvents:UIControlEventEditingChanged];
[_textField addTarget:self action:@selector(textFieldBeginEditing) forControlEvents:UIControlEventEditingDidBegin];
[_textField addTarget:self action:@selector(textFieldEndEditing) forControlEvents:UIControlEventEditingDidEnd];
}
控件中已經(jīng)給出2個(gè)自定義需求的參數(shù),需要的同學(xué)可以直接修改就行,其中第二個(gè)參數(shù)changeWhenAppear這個(gè)是表示每次鍵盤出現(xiàn)都隨機(jī)排序鍵盤,設(shè)置為NO的話,鍵盤只在實(shí)例化的時(shí)候隨機(jī)一次后面都是按這個(gè)隨機(jī)排序出現(xiàn)的,你點(diǎn)擊收起再?gòu)棾鰜?lái)排序不變
const static BOOL randomKeyboard = YES;//是否使用隨機(jī)鍵盤
const static BOOL changeWhenAppear = YES;//每次鍵盤出現(xiàn)都改變隨機(jī)(隨機(jī)鍵盤才有效)
控件我簡(jiǎn)單的封裝了下,需要的小伙伴拿去吧
