iOS中TextField抖動效果、toast提示語

不少app中在進行賬號的登錄時，倘若密碼和賬號有誤或者為空的時候，我們會收到相應的提示語，還有的會有一種抖動效果，

這樣的話可以方便用戶更直接的知道自己的造作有誤；而向分享、評論、登錄、注冊、收藏等場景中，不論是成功或者失敗，為了讓用戶有更好的用戶體驗，我們都應該做相應的提示，比如這樣：

toast提示語

抖動效果用的是AFViewShaker,提示語的實現是通過給MBProgressHUD寫一個類目方法。

1，我們先給MBProgressHUD寫個類目

// MBProgressHUD+TVAssistant.h的實現

#import "MBProgressHUD.h"

@interface MBProgressHUD (TVAssistant)

-(void)showToastWithText:(NSString *)text;
-(void)showToastWithText:(NSString *)text whileExecutingBlock:(dispatch_block_t)block;
+(MBProgressHUD *)showToastToView:(UIView *)view withText:(NSString *)text;

@end

// MBProgressHUD+TVAssistant.m的實現

-(void)showToastWithText:(NSString *)text
{
    [self show:NO];
    [self setMode:MBProgressHUDModeText];
    self.userInteractionEnabled = NO;
    self.detailsLabelText = text;
    self.detailsLabelFont = [UIFont boldSystemFontOfSize:16.];
   //    設置視圖停留的時間
    [self hide:YES afterDelay:2.];
}
-(void)showToastWithText:(NSString *)text isAutoHide:(BOOL)isAutoHide
{
    [self setMode:MBProgressHUDModeText];
    self.userInteractionEnabled = NO;
    self.detailsLabelText = text;
    self.detailsLabelFont = [UIFont boldSystemFontOfSize:14.];
    if (isAutoHide) {
        //    設置視圖停留的時間
        [self hide:YES afterDelay:2.];
    }
}

-(void)showToastWithText:(NSString *)text whileExecutingBlock:(dispatch_block_t)block
{
    [self setMode:MBProgressHUDModeText];
    self.userInteractionEnabled = NO;
    self.labelText = text;
//    設置視圖停留的時間
    dispatch_time_t time3s = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC));
    dispatch_after(time3s, dispatch_get_global_queue(0, 0), ^{
        [self hide:YES];
        dispatch_async(dispatch_get_main_queue(), ^{
            block();
        });
    });
}


+(MBProgressHUD *)showToastToView:(UIView *)view withText:(NSString *)text
{
    MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:view animated:YES];
    [hud showToastWithText:text];
    return hud;
}

2.在ViewController中導入頭文件

#import "MBProgressHUD+TVAssistant.h"
#import "AFViewShaker.h"

創建實例變量

@property(nonatomic, strong)LTView *userNameView;
@property(nonatomic, strong)LTView *pwdView;
@property(nonatomic, strong)AFViewShaker *shakeAccount;
@property(nonatomic, strong)AFViewShaker *shakePwd;
@property(nonatomic, strong)UIButton *loginButton;

然后我們創建UI

-(void)createUI{
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.frame];
    imageView.image = [UIImage imageNamed:@"bj3"];
    [self.view addSubview:imageView];
    _userNameView = [[LTView alloc] initWithFrame:CGRectMake(45, 150, (self.view.frame.size.width -90), 49)];
    [self.view addSubview:_userNameView];
    _userNameView.iconImageView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e614", 30, [UIColor whiteColor])];

    NSDictionary *dic = @{NSForegroundColorAttributeName:[UIColor whiteColor], NSFontAttributeName:[UIFont systemFontOfSize:15]};
    _userNameView.rightTextFiled.attributedPlaceholder = [[NSAttributedString alloc] initWithString:@"手機/用戶名/郵箱" attributes:dic];
    _userNameView.rightTextFiled.tintColor = [UIColor whiteColor];
    _userNameView.rightTextFiled.keyboardType = UIKeyboardTypeAlphabet;
    _userNameView.rightTextFiled.delegate = self;


    _pwdView = [[LTView alloc] initWithFrame:CGRectMake(45, _userNameView.frame.origin.y + _userNameView.frame.size.height, (self.view.frame.size.width -90), 49)];
    [self.view addSubview:_pwdView];
      _pwdView.iconImageView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e607", 30, [UIColor whiteColor])];
    NSDictionary *dic1 = @{NSForegroundColorAttributeName:[UIColor whiteColor], NSFontAttributeName:[UIFont systemFontOfSize:15]};
    _pwdView.rightTextFiled.delegate = self;
    _pwdView.rightTextFiled.attributedPlaceholder = [[NSAttributedString alloc] initWithString:@"密碼" attributes:dic1];
    _pwdView.rightTextFiled.tintColor = [UIColor cyanColor];
    _pwdView.rightTextFiled.secureTextEntry = YES;

    _loginButton = [UIButton buttonWithType:UIButtonTypeSystem];
    _loginButton.frame = CGRectMake((self.view.frame.size.width - 230)/2, _pwdView.frame.origin.y + _pwdView.frame.size.height + 30 , _pwdView.frame.size.width, 40);
    _loginButton.layer.cornerRadius = 20;
    _loginButton.layer.borderWidth = .5;
    _loginButton.tag = 1002;
    [_loginButton addTarget:self action:@selector(didClickButton:) forControlEvents:UIControlEventTouchUpInside];
    _loginButton.titleLabel.font = [UIFont systemFontOfSize:20];
    [_loginButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    _loginButton.layer.borderColor = [UIColor whiteColor].CGColor;
    [_loginButton setTitle:@"登錄" forState:UIControlStateNormal];

    [self.view addSubview:_loginButton];
}

在-(void)loadView方法中調用方法，同時初始化抖動效果

-(void)loadView{
    [super loadView];
    [self createUI];

    //    給userNameView添加抖動效果
    _shakeAccount = [[AFViewShaker alloc] initWithView:_userNameView];
    //    給pwdView添加抖動效果
    _shakePwd = [[AFViewShaker alloc] initWithView:_pwdView];

}

這時候的的界面是這樣的

其中，界面上的圖標是用的iconfont，我在前面的一篇文章中有介紹過iconfont的使用，可以參考在iOS開發中使用iconfont圖標

3.實現登錄按鈕的點擊事件

-(void)didClickButton:(UIButton *)button{
    if ([_userNameView.rightTextFiled.text isEqualToString:@"123"] && [_pwdView.rightTextFiled.text isEqualToString:@"123"]) {
        [_shakePwd shake];
        [_shakeAccount shake];
//        提示語在視圖上顯示的時間可以自己在類目中調整
        [MBProgressHUD showToastToView:self.view withText:@"用戶名或密碼錯誤"];
    }
   else if (_userNameView.rightTextFiled.text.length == 0  ) {

       //        當賬號為空時，開始抖動，抖動成功后顯示相應的提示語，shakeWithDuration的時間可以自己調，想要抖動效果慢一些的話就將值設得大一些，反之，則設得小一些

       [_shakeAccount shakeWithDuration:.5 completion:^{
             [MBProgressHUD showToastToView:self.view withText:@"用戶名不能為空"];
        }];

    }else if (_pwdView.rightTextFiled.text.length == 0) {
        //        當密碼為空時，開始抖動，并顯示相應的提示語

        [_shakePwd shake];
        [MBProgressHUD showToastToView:self.view withText:@"密碼不能為空"];

    }else{

//        登錄成功后顯示相應的提示語

        [MBProgressHUD showToastToView:self.view withText:@"登錄成功"];

    }

}

這樣簡單的抖動效果和相應的toast提示語就實現了。最后的效果如圖。

效果圖

閱讀原文