根據(jù)項(xiàng)目需求,在項(xiàng)目中許多地方都要用到TextField用于接受用戶的輸入,而且這些文本框全部都是統(tǒng)一的自定義樣式褥符。這樣一來根本不可能使用系統(tǒng)的輸入框鹃操,而且項(xiàng)目中多個(gè)界面的都有輸入框韭寸,我們也不可能每個(gè)界面的每個(gè)輸入框都去設(shè)計(jì)一遍,所以做了一個(gè)自定義的TextField荆隘。在某個(gè)頁面添加多個(gè)自定義的TextField恩伺,編輯不同的TextField,當(dāng)所有的TextField全部都有內(nèi)容的時(shí)候臭胜,頁面中的按鈕變?yōu)榭梢渣c(diǎn)擊狀態(tài)莫其,如果存在某一個(gè)文本框?yàn)榭振校瑒t按鈕為禁用狀態(tài)耸三。代碼很簡單,使用也很簡單浇揩,可以先看效果圖仪壮。
一、效果圖:
1.主要實(shí)現(xiàn)的效果是:
- 當(dāng)輸入框內(nèi)沒有內(nèi)容時(shí)胳徽,輸入框左側(cè)的圖標(biāo)是“鉛筆”积锅,表示用戶需要進(jìn)行編輯。
- 當(dāng)輸入框內(nèi)有文本時(shí)养盗,圖標(biāo)變成“笑臉”缚陷,表示用戶輸入了內(nèi)容。
- 當(dāng)頁面的所有文本框有內(nèi)容時(shí)往核,下邊的“完成”按鈕為可以點(diǎn)擊狀態(tài)箫爷。
- 當(dāng)頁面的文本框有一個(gè)內(nèi)容為空時(shí),下邊的“完成”按鈕為就是禁用狀態(tài)聂儒。
2.主要實(shí)現(xiàn)原理:
自定義的輸入框繼承系統(tǒng)的UITextField虎锚,初始化時(shí)提供默認(rèn)樣式。
在自定義文本框內(nèi)實(shí)現(xiàn)UITextFieldDelegate的方法- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string;
在該方法內(nèi)實(shí)時(shí)判斷用戶是否輸入了內(nèi)容衩婚,如果有內(nèi)容則改變輸入框樣式為選中狀態(tài)窜护,如果沒有內(nèi)容則改變輸入框樣式為默認(rèn)樣式。同時(shí)要在該方法內(nèi)實(shí)時(shí)調(diào)用自定義文本框的委托方法- (void)textFieldChangedText:(MyTextField *)myTextField;
非春,該方法在添加多個(gè)文本框的頁面實(shí)現(xiàn)柱徙,根據(jù)文本框的是否存在內(nèi)容來改變按鈕的狀態(tài)。
二奇昙、自定義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];
}
// 實(shí)時(shí)監(jiān)測文本框的編輯狀態(tài)
if ([self.textFieldDelegate respondsToSelector:@selector(textFieldChangedText:)]) {
[self.textFieldDelegate textFieldChangedText:self];
}
return YES;
}
#pragma mark - Private
- (void)initialize {
/**
阻止鍵盤自動(dòng)聯(lián)想护侮,如果沒有這句話,想要實(shí)現(xiàn)這樣的效果就不能用這樣的方式了敬矩,
需要監(jiān)聽UITextFieldTextDidChangeNotification通知來做概行,
有需要的可以留言,我再發(fā)一個(gè)阻止鍵盤聯(lián)想的情況下如何實(shí)現(xiàn)這樣效果的代碼
*/
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 = @"請(qǐng)輸入用戶名";
[self.view addSubview:self.userNameTextField];
self.passwordTextField = [[MyTextField alloc] initWithFrame:CGRectMake(30, 100, self.view.bounds.size.width - 60, 35)];
self.passwordTextField.placeholder = @"請(qǐng)輸入密碼";
[self.view addSubview:self.passwordTextField];
self.userNameTextField.textFieldDelegate = self;
self.passwordTextField.textFieldDelegate = self;
[self setButtonState]; //viewDidLoad中調(diào)用表示初始化按鈕的狀態(tài)
}
#pragma mark - MyTextFieldDelegate
// 實(shí)現(xiàn)自定義文本框的委托方法
- (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使用方式:
- 拖動(dòng)一個(gè)UITextField控件到View上凳忙,將它的class標(biāo)識(shí)為MyTextField,取消邊框业踏,根據(jù)自己需求輸入placeholder
好了,自定義完畢涧卵,使用也超級(jí)簡單勤家。如果能幫助到有一樣問題的小伙伴,我很高興柳恐,祝大家工作順利伐脖。