iOS -- 自定義UITextField樣式且根據(jù)多個(gè)UITextField的編輯狀態(tài)改變按鈕狀態(tài)

根據(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)耸三。代碼很簡單,使用也很簡單浇揩,可以先看效果圖仪壮。

一、效果圖:

QQ20180402-141926-HD.gif
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
步驟1
步驟2

好了,自定義完畢涧卵,使用也超級(jí)簡單勤家。如果能幫助到有一樣問題的小伙伴,我很高興柳恐,祝大家工作順利伐脖。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市乐设,隨后出現(xiàn)的幾起案子讼庇,更是在濱河造成了極大的恐慌,老刑警劉巖近尚,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蠕啄,死亡現(xiàn)場離奇詭異,居然都是意外死亡戈锻,警方通過查閱死者的電腦和手機(jī)歼跟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來格遭,“玉大人哈街,你說我怎么就攤上這事【苎福” “怎么了骚秦?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長坪它。 經(jīng)常有香客問我骤竹,道長,這世上最難降的妖魔是什么往毡? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任蒙揣,我火速辦了婚禮,結(jié)果婚禮上开瞭,老公的妹妹穿的比我還像新娘懒震。我一直安慰自己,他們只是感情好嗤详,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布个扰。 她就那樣靜靜地躺著,像睡著了一般葱色。 火紅的嫁衣襯著肌膚如雪递宅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音办龄,去河邊找鬼烘绽。 笑死,一個(gè)胖子當(dāng)著我的面吹牛俐填,可吹牛的內(nèi)容都是我干的安接。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼英融,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼盏檐!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起驶悟,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤胡野,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后撩银,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體给涕,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年额获,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恭应。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡抄邀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出昼榛,到底是詐尸還是另有隱情境肾,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布胆屿,位于F島的核電站奥喻,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏非迹。R本人自食惡果不足惜环鲤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望憎兽。 院中可真熱鬧冷离,春花似錦、人聲如沸纯命。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽亿汞。三九已至瞭空,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背咆畏。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國打工图甜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鳖眼。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓黑毅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親钦讳。 傳聞我的和親對(duì)象是個(gè)殘疾皇子矿瘦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 摘要: IOS文本輸入框的使用方法總結(jié)。 (1)---------------------------------...
    翻山越嶺的另一邊閱讀 8,386評(píng)論 1 5
  • 用到的組件 1愿卒、通過CocoaPods安裝 2缚去、第三方類庫安裝 3、第三方服務(wù) 友盟社會(huì)化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,613評(píng)論 1 180
  • 看到標(biāo)題琼开,也許大家都會(huì)奇怪易结,正常的畫風(fēng)應(yīng)該是去九華山天臺(tái)寺燒香拜佛求簽的,怎么變成上班了柜候。 ...
    耄小毛閱讀 2,012評(píng)論 0 2
  • 當(dāng)今社會(huì)有一個(gè)非常普遍的現(xiàn)象搞动,那就是家長條件越好的孩子特長越多,越有特長渣刷,除了讀書鹦肿,最多的是彈鋼琴,拉小提琴辅柴,古箏...
    紫悅姐閱讀 157評(píng)論 0 1