iOS -- 自定义UITextField样式且根据多个UITextField的编辑状态改变按钮状态

根据项目需求,在项目中许多地方都要用到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

好了,自定义完毕,使用也超级简单。如果能帮助到有一样问题的小伙伴,我很高兴,祝大家工作顺利。

推荐阅读更多精彩内容