iOS - 輸入支付密碼方格(封裝)

Untitled.gif
前言:

需求如上,需要設(shè)計輸入密碼的方格類型,本人進(jìn)行了簡單的封裝,可以設(shè)置方格的個數(shù),方格邊框的顏色,支持密碼刪除,下面給出分裝的詳細(xì)代碼以及使用方法

思路:

自定義一個UIView然后在添加一個UITextField這樣可以保證點擊方格以外的部分可以鍵盤的編輯狀態(tài)(要把這個UITextField隱藏才行),首先創(chuàng)建幾個輸入框,用個數(shù)組保存,然后把鍵盤輸入的內(nèi)容,通過遍歷數(shù)組內(nèi)的輸入方格,將輸入的內(nèi)容按順序賦值給這些方格

具體代碼,在.h文件中利用block回調(diào)輸入的密碼
#import <UIKit/UIKit.h>
typedef void (^ReturnPasswordStringBlock)(NSString *password);
@interface PasswordView : UIView
@property (copy, nonatomic) ReturnPasswordStringBlock returnPasswordStringBlock;
@end
在.m文件中具體實現(xiàn)
  • 可以在此文件中自定義密碼的位數(shù),方格邊框的顏色,方格的尺寸
#import "PasswordView.h"
// 輸入密碼的位數(shù)
static const int boxCount = 6;
// 輸入方格的邊長
static const CGFloat boxWH = 40;
@interface PasswordView()
@property (strong, nonatomic) NSMutableArray *boxes;
// 占位編輯框(這樣就點擊密碼格以外的部分,可以彈出鍵盤)
@property (weak, nonatomic) UITextField *contentTextField;

@end

@implementation PasswordView
- (instancetype)initWithFrame:(CGRect)frame{
    if (self == [super initWithFrame:frame]) {
        
        self.backgroundColor = [UIColor whiteColor];
        [self setUpContentView];
    }
    return self;
}

- (void)setUpContentView
{
    UITextField *contentField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    self.contentTextField = contentField;
    contentField.placeholder = @"請輸入支付密碼";
    contentField.hidden = YES;
    [contentField addTarget:self action:@selector(txchange:) forControlEvents:UIControlEventEditingChanged];
    [self addSubview:contentField];
    
    // 密碼格之間的間隔
    CGFloat margin = 10;
    for (int i = 0; i < boxCount; i++)
    {
        CGFloat x = ([UIScreen mainScreen].bounds.size.width - boxCount * boxWH - (boxCount - 1)* margin) * 0.5 + (boxWH + margin) * i;
        UITextField *pwdLabel = [[UITextField alloc] initWithFrame:CGRectMake(x, (self.frame.size.height - boxWH) * 0.5, boxWH, boxWH)];
        pwdLabel.layer.borderColor = LineCommanColorA.CGColor;
        pwdLabel.enabled = NO;
        pwdLabel.textAlignment = NSTextAlignmentCenter;//居中
        pwdLabel.secureTextEntry = YES;//設(shè)置密碼模式
        pwdLabel.layer.borderWidth = 1;
        [self addSubview:pwdLabel];
        
        [self.boxes addObject:pwdLabel];
    }
    //進(jìn)入界面黔寇,contentTextField 成為第一響應(yīng)
    [self.contentTextField becomeFirstResponder];
}
#pragma mark 文本框內(nèi)容改變
- (void)txchange:(UITextField *)tx
{
    NSString *password = tx.text;

    for (int i = 0; i < self.boxes.count; i++)
    {
        UITextField *pwdtx = [self.boxes objectAtIndex:i];
        pwdtx.text = @"";
        if (i < password.length)
        {
            NSString *pwd = [password substringWithRange:NSMakeRange(i, 1)];
            pwdtx.text = pwd;
        }
        
    }
    // 輸入密碼完畢
    if (password.length == boxCount)
    {
         [tx resignFirstResponder];//隱藏鍵盤
        if (self.returnPasswordStringBlock != nil) {
            self.returnPasswordStringBlock(password);
        }

    }
}
#pragma mark --- 懶加載
- (NSMutableArray *)boxes{
    if (!_boxes) {
        _boxes = [NSMutableArray array];
    }
    return _boxes;
}
@end
分類的用法:

首先是導(dǎo)入頭文件

 PasswordView *pdView = [[PasswordView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 60)];
    pdView.returnPasswordStringBlock = ^(NSString *password){
// 這里可以對輸入的密碼進(jìn)行處理
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"輸入的密碼是" message:password delegate:nil cancelButtonTitle:@"完成" otherButtonTitles:nil, nil];
        [alert show];

    };
    [self.view addSubview:pdView];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瓷炮,一起剝皮案震驚了整個濱河市简十,隨后出現(xiàn)的幾起案子历筝,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異敢靡,居然都是意外死亡,警方通過查閱死者的電腦和手機苦银,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門啸胧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人幔虏,你說我怎么就攤上這事纺念。” “怎么了想括?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵陷谱,是天一觀的道長。 經(jīng)常有香客問我,道長烟逊,這世上最難降的妖魔是什么渣窜? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮宪躯,結(jié)果婚禮上乔宿,老公的妹妹穿的比我還像新娘。我一直安慰自己访雪,他們只是感情好详瑞,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著冬阳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪党饮。 梳的紋絲不亂的頭發(fā)上肝陪,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機與錄音刑顺,去河邊找鬼氯窍。 笑死,一個胖子當(dāng)著我的面吹牛蹲堂,可吹牛的內(nèi)容都是我干的狼讨。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼柒竞,長吁一口氣:“原來是場噩夢啊……” “哼政供!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起朽基,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤布隔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后稼虎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體衅檀,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年霎俩,在試婚紗的時候發(fā)現(xiàn)自己被綠了哀军。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡打却,死狀恐怖杉适,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情柳击,我是刑警寧澤淘衙,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站腻暮,受9級特大地震影響彤守,放射性物質(zhì)發(fā)生泄漏毯侦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一具垫、第九天 我趴在偏房一處隱蔽的房頂上張望侈离。 院中可真熱鬧,春花似錦筝蚕、人聲如沸卦碾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽洲胖。三九已至,卻和暖如春坯沪,著一層夾襖步出監(jiān)牢的瞬間绿映,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工腐晾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叉弦,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓藻糖,卻偏偏與公主長得像淹冰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子巨柒,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

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