根据项目需求，在项目中许多地方都要用到TextField用于接受用户的输入，而且这些文本框全部都是统一的自定义样式。这样一来根本不可能使用系统的输入框，而且项目中多个界面的都有输入框，我们也不可能每个界面的每个输入框都去设计一遍，所以做了一个自定义的TextField。在某个页面添加多个自定义的TextField，编辑不同的TextField，当所有的TextField全部都有内容的时候，页面中的按钮变为可以点击状态，如果存在某一个文本框为空，则按钮为禁用状态。代码很简单，使用也很简单，可以先看效果图。
一、效果图:
QQ20180402-141926-HD.gif
1.主要实现的效果是：
- 当输入框内没有内容时，输入框左侧的图标是“铅笔”，表示用户需要进行编辑。
- 当输入框内有文本时，图标变成“笑脸”，表示用户输入了内容。
- 当页面的所有文本框有内容时，下边的“完成”按钮为可以点击状态。
- 当页面的文本框有一个内容为空时，下边的“完成”按钮为就是禁用状态。
2.主要实现原理：
自定义的输入框继承系统的UITextField，初始化时提供默认样式。
在自定义文本框内实现UITextFieldDelegate的方法- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string;
在该方法内实时判断用户是否输入了内容，如果有内容则改变输入框样式为选中状态，如果没有内容则改变输入框样式为默认样式。同时要在该方法内实时调用自定义文本框的委托方法- (void)textFieldChangedText:(MyTextField *)myTextField;，该方法在添加多个文本框的页面实现，根据文本框的是否存在内容来改变按钮的状态。
二、自定义TextField的代码:
1： .h文件
#import <UIKit/UIKit.h>
@protocol MyTextFieldDelegate;
@interface MyTextField : UITextField
@property (nonatomic, weak) id<MyTextFieldDelegate> textFieldDelegate;
@property (nonatomic) BOOL textIsEmpty; //文本是否为空
@end
@protocol MyTextFieldDelegate<NSObject>
- (void)textFieldChangedText:(MyTextField *)myTextField;
@end
2： .m文件
@interface MyTextField() <UITextFieldDelegate>
@end
@implementation MyTextField
#pragma mark - Override
- (instancetype)initWithCoder:(NSCoder *)aDecoder {
if (self = [super initWithCoder:aDecoder]) {
[self initialize];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self initialize];
}
return self;
}
- (void)setPlaceholder:(NSString *)placeholder {
NSDictionary *attributes = @{
NSFontAttributeName : [UIFont systemFontOfSize:16],
NSForegroundColorAttributeName : [UIColor grayColor]
};
NSAttributedString *attributedPlaceholder = [[NSAttributedString alloc] initWithString:placeholder attributes:attributes];
self.attributedPlaceholder = attributedPlaceholder;
}
#pragma mark- UITextFieldDelegate
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
NSMutableString * changedString=[[NSMutableString alloc] initWithString:textField.text];
[changedString replaceCharactersInRange:range withString:string];
if (changedString.length == 0) {
self.textIsEmpty = YES;
[self setNormalStyle];
}else{
self.textIsEmpty = NO;
[self setSelectedStyle];
}
// 实时监测文本框的编辑状态
if ([self.textFieldDelegate respondsToSelector:@selector(textFieldChangedText:)]) {
[self.textFieldDelegate textFieldChangedText:self];
}
return YES;
}
#pragma mark - Private
- (void)initialize {
/**
阻止键盘自动联想，如果没有这句话，想要实现这样的效果就不能用这样的方式了，
需要监听UITextFieldTextDidChangeNotification通知来做，
有需要的可以留言，我再发一个阻止键盘联想的情况下如何实现这样效果的代码
*/
self.autocorrectionType = UITextAutocorrectionTypeNo;
self.textIsEmpty = self.text.length == 0;
self.delegate = self;
self.font = [UIFont systemFontOfSize:16];
self.textColor = [UIColor B1Color];
[self setNormalStyle];
}
- (void)setNormalStyle {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"textfield_pen_icon"]];
imageView.contentMode = UIViewContentModeLeft;
self.leftView = imageView;
self.leftView.width = 30;
self.leftViewMode = UITextFieldViewModeAlways;
[self drawBottomBorder:1 color:[UIColor B5Color]];
}
- (void)setSelectedStyle {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"textfield_smile_icon"]];
imageView.contentMode = UIViewContentModeLeft;
self.leftView = imageView;
self.leftView.width = 30;
self.leftViewMode = UITextFieldViewModeAlways;
[self drawBottomBorder:1 color:[UIColor P2Color]];
}
@end
三、使用:
1.代码中使用方式：在要展示的viewController中添加就好
#pragma mark - Override
- (void)viewDidLoad {
[super viewDidLoad];
self.userNameTextField = [[MyTextField alloc] initWithFrame:CGRectMake(30, 50, self.view.bounds.size.width - 60, 35)];
self.userNameTextField.placeholder = @"请输入用户名";
[self.view addSubview:self.userNameTextField];
self.passwordTextField = [[MyTextField alloc] initWithFrame:CGRectMake(30, 100, self.view.bounds.size.width - 60, 35)];
self.passwordTextField.placeholder = @"请输入密码";
[self.view addSubview:self.passwordTextField];
self.userNameTextField.textFieldDelegate = self;
self.passwordTextField.textFieldDelegate = self;
[self setButtonState]; //viewDidLoad中调用表示初始化按钮的状态
}
#pragma mark - MyTextFieldDelegate
// 实现自定义文本框的委托方法
- (void)textFieldChangedText:(MyTextField *)myTextField {
[self setButtonState];
}
#pragma mark - Private
- (void)setButtonState {
if (!self.userNameTextField.textIsEmpty && !self.passwordTextField.textIsEmpty) {
self.sigininButton.userInteractionEnabled = YES;
self.sigininButton.alpha = 1;
} else {
self.sigininButton.userInteractionEnabled = NO;
self.sigininButton.alpha = 0.5;
}
}
@end
2.Nib使用方式：
- 拖动一个UITextField控件到View上，将它的class标识为MyTextField,取消边框，根据自己需求输入placeholder
步骤1
步骤2
好了，自定义完毕，使用也超级简单。如果能帮助到有一样问题的小伙伴，我很高兴，祝大家工作顺利。
网友评论