由于项目有车辆管理需求，输入车牌的时候直接用系统键盘输入，好像用户体验没有那么好，所以立即观摩了一下支付宝车辆违章输入键盘，首先弹出的是输入键盘前缀的字体，然后会跳转输入字母数字的键盘页面。这个用户体验还是挺好的，方便，不需要用户手动一个个字去输入，直接上代码。
1、初始化键盘输入内容的数据
- (void)_initView {
_horizontalCount=10;
_index=0;
self.backgroundColor= [UIColorcolorWithWhite:0.7alpha:0.2];
_drawRects=@[].mutableCopy;
_provinces=@[@"京",@"津",@"沪",@"冀",@"晋",@"辽",@"吉",@"黑",@"苏",@"浙",
@"皖",@"闽",@"赣",@"鲁",@"豫",@"鄂",@"湘",@"粤",@"琼",@"川",
@"贵",@"云",@"陕",@"甘",@"青",@"蒙",@"桂",@"宁",@"新",@"藏",
@"ABC",@"军",@"使",@"领",@"警",@"学",@"港",@"澳",@"删除"];
_nums=@[@"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",@"删除",];
_data=_provinces;
}
2、根据数据绘制按钮在键盘视图上
#pragma mark 绘制
- (void)drawRect:(CGRect)rect {
if(_keyBoardStyle==InputKeyBoardStyleProvince) {
_verticalCount= (int)_data.count/KHorizontalCount;
if(_data.count%KHorizontalCount>0){
_verticalCount+=1;
}
CGFloatitemWidth = rect.size.width/KHorizontalCount;
CGFloatitemHeight = (rect.size.height-IphoneX_ButtomHeight) /_verticalCount;
intindex =0;
for(inti=0; i<_verticalCount; i++){
for(floatn=0; n
CGRectframe =CGRectMake(itemWidth * n, itemHeight * i, itemWidth, itemHeight);
UIImage*image = [UIImageimageNamed:@"keyboard02"];
if(index <_data.count){
NSString*chart =_data[index];
if(chart.length>=2){
frame =CGRectMake(frame.origin.x, frame.origin.y, itemWidth + itemWidth/2, itemHeight);
n +=0.5;
image = [UIImageimageNamed:@"keyboard_gray"];
}
[selfdrawItem:imageframe:framewithText:chart];
//[self drawImage:image withRect:frame withText:chart];
[_drawRectsaddObject:[NSValuevalueWithCGRect:frame]];
index ++;
}else{
UIButton*button = [UIButtonbuttonWithType:UIButtonTypeCustom];
button.frame= frame;
[buttonsetTitle:@""forState:UIControlStateNormal];
[buttonsetBackgroundImage:imageforState:UIControlStateNormal];
[selfaddSubview:button];
[selfdrawItem:imageframe:framewithText:@""];
//[self drawImage:image withRect:frame withText:@""];
}
}
}
}elseif(_keyBoardStyle==InputKeyBoardStyleABC) {
_verticalCount= (int)_data.count/_horizontalCount;
if(_data.count%_horizontalCount>0){
_verticalCount+=1;
}
CGFloatitemHeight = (rect.size.height-IphoneX_ButtomHeight) /_verticalCount;
CGFloatitemWidth;
for(intline=0; line<4; line++) {
switch(line) {
/*case 0:
_horizontalCount = 8;
itemWidth = rect.size.width / _horizontalCount;
[self diffDraw:itemWidth withHeight:itemHeight withLine:line];
break;*/
case0:
_horizontalCount=10;
itemWidth = rect.size.width/_horizontalCount;
[selfdiffDraw:itemWidthwithHeight:itemHeightwithLine:line];
break;
case1:
_horizontalCount=10;
itemWidth = rect.size.width/_horizontalCount;
[selfdiffDraw:itemWidthwithHeight:itemHeightwithLine:line];
break;
case2:
_horizontalCount=10;
itemWidth = rect.size.width/_horizontalCount;
[selfdiffDraw:itemWidthwithHeight:itemHeightwithLine:line];
break;
case3:
_horizontalCount=10;
itemWidth = rect.size.width/_horizontalCount;
[selfdiffDraw:itemWidthwithHeight:itemHeightwithLine:line];
break;
}
}
}
}
- (void)diffDraw:(CGFloat)itemWidth withHeight:(CGFloat)itemHeight withLine:(int)line {
for(floatn=0; n<_horizontalCount; n++) {
UIImage*image = [UIImageimageNamed:@"keyboard02"];
CGRectframe =CGRectMake(itemWidth * n, itemHeight * line, itemWidth, itemHeight);
if(_index<_data.count){
NSString*string =_data[_index];
if(string.length>=2){
frame =CGRectMake(frame.origin.x, frame.origin.y, itemWidth + itemWidth/2, itemHeight);
n +=0.5;
image = [UIImageimageNamed:@"keyboard_gray"];
}
[selfdrawItem:imageframe:framewithText:string];
//[self drawImage:image withRect:frame withText:_data[_index]];
[_drawRectsaddObject:[NSValuevalueWithCGRect:frame]];
}
_index++;
}
}
- (void)drawItem:(UIImage*)image frame:(CGRect)frame withText:(NSString*)withText {
if(withText ==nil|| withText.length<=0){
return;
}
UIView*itemView = [[UIViewalloc]initWithFrame:frame];
UIButton*button = [UIButtonbuttonWithType:UIButtonTypeCustom];
button.frame=CGRectMake(2.5,7.5, frame.size.width-5, frame.size.height-15);
[buttonsetTitle:withTextforState:UIControlStateNormal];
[buttonsetTitleColor:[UIColorblackColor]forState:UIControlStateNormal];
[buttonsetBackgroundImage:imageforState:UIControlStateNormal];
button.titleLabel.font= [UIFontsystemFontOfSize:16];
button.userInteractionEnabled=NO;
[itemViewaddSubview:button];
[selfaddSubview:itemView];
}
- (void)drawImage:(UIImage*)image withRect:(CGRect)rect withText:(NSString*)text {
CGRectkeyBoardRect =CGRectMake(rect.origin.x+2, rect.origin.y+2, rect.size.width-4, rect.size.height-4);
CGSizeimageSize =CGSizeMake(rect.size.width, rect.size.height);
if(text ==nil|| text.length<=0){
return;
}
[imagedrawInRect:keyBoardRect];
UIGraphicsBeginImageContext(imageSize);
NSMutableParagraphStyle*style = [[NSMutableParagraphStylealloc]init];
style.alignment=NSTextAlignmentCenter;
UIFont*font;
CGFloatitemWidth;
if(text.length>1){
itemWidth =KSWidth/KHorizontalCount;
font = [UIFontsystemFontOfSize:15weight:0.5];
}else{
itemWidth =24;
font = [UIFontsystemFontOfSize:16];
}
NSDictionary*attributes =@{NSFontAttributeName: font,
NSParagraphStyleAttributeName: style,
NSForegroundColorAttributeName: [UIColorblackColor]
};
CGFloatitemHeight =60;
CGRecttextFrame =CGRectMake((rect.size.width- itemWidth)/2, (rect.size.height- itemHeight)/2, itemWidth, itemHeight);
[textdrawInRect:textFramewithAttributes:attributes];
UIImage*newImage =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[newImagedrawInRect:keyBoardRect];
}
3、处理键盘视图点击事件
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
[[UIDevicecurrentDevice] playInputClick];
UITouch*touch = [[eventall Touches] anyObject];
CGPointlocation = [touch locationInView:self];
[_drawRects enumerateObjectsUsingBlock:^(NSValue*rectValue,NSUIntegeridx,BOOL*_Nonnullstop) {
if(CGRectContainsPoint(rectValue.CGRectValue, location)) {
NSString*clickKey =_data[idx];
if([clickKey isEqualToString:@"删除"]){
_clickDelete(InputKeyBoardStyleDelete);
}elseif([clickKey isEqualToString:@"确认"]){
_clickDelete(InputKeyBoardStyleEnsure);
}
elseif([clickKey isEqualToString:@"ABC"]){
_data=_nums;
_keyBoardStyle=InputKeyBoardStyleABC;
for(UIView*view in self.subviews) {
[view removeFromSuperview];
}
[_drawRectsr emoveAllObjects];
[self setNeedsDisplay];
//_clickDelete(InputKeyBoardStyleABC);
}
else if([clickKey isEqualToString:@"返回"]){
_data=_provinces;
_index=0;
_horizontalCount=10;
_keyBoardStyle=InputKeyBoardStyleProvince;
[_drawRects removeAllObjects];
for(UIView*view in self.subviews) {
[view removeFromSuperview];
}
[self setNeedsDisplay];
}else{
if(_keyBoardStyle==InputKeyBoardStyleProvince) {
_data=_nums;
_keyBoardStyle=InputKeyBoardStyleABC;
[_drawRects removeAllObjects];
for(UIView*view in self.subviews) {
[view removeFromSuperview];
}
[self setNeedsDisplay];
}
_clickKeyBoard(clickKey);
}
}
}];
}
4、点击按键声音
@interfaceInputKeyBoardView :UIView
@end
#pragma mark - UIInputViewAudioFeedback
- (BOOL)enableInputClicksWhenVisible {
returnYES;
}
5、调用self.textFiled.inputView=_keyBoardView;
最后，谢谢查阅，Demo后续补充。
网友评论