iOS开发 登录界面(界面版)

96
嫌疑人zx
2016.12.12 14:09* 字数 159

很多APP都会构建登录界面,我想分享我在搭建登录界面时用到的一些效果。
  传送门: iOS开发 登录界面(逻辑版)


输入框间距

输入框间距.png
封装的方法:
/**
 textField前面空一段距离
 
 @param textField 传入textField
 @param leftWidth 前面空的宽度
 */
-(void)setTextFieldLeftPadding:(UITextField *)textField forWidth:(CGFloat)leftWidth
{
    CGRect frame = textField.frame;
    frame.size.width = leftWidth;
    UIView *leftview = [[UIView alloc] initWithFrame:frame];
    textField.leftViewMode = UITextFieldViewModeAlways;
    textField.leftView = leftview;
}
演示代码
[self setTextFieldLeftPadding:FillInTheAccountNumber forWidth:10.0];

可弹按钮

可弹按钮_模型效果.gif

原创:GitHub地址 、简书 地址
(PS:下面的代码,在原创的基础上进行了一定的修改!有兴趣可以看看原创的代码,并不复杂!)

完整类别:

XYRPushButton.h

#import <UIKit/UIKit.h>

typedef void(^ClickBlock)();

@interface XYRPushButton : UIButton

@property (nonatomic, copy) ClickBlock clickBlock;
@property (nonatomic, assign) CGFloat buttonScale;//缩小的比率,小于=1.0,大于0.0

/**
 按钮初始化
 
 @param type UIButtonType
 @param frame CGRect
 @param title 按钮文字(可选,nil)
 @param color 文字颜色 (可选,nil)
 @param backgroundColor 背景色 (可选,nil)
 @param image 背景图片 (可选,nil)
 @param tempBlock 按钮被按下时,会调用这个回调
 @return 返回XYRPushButton的按钮
 */
+ (XYRPushButton *)XYRTouchButtonWithType:(UIButtonType)type
                                    frame:(CGRect)frame
                                    title:(NSString *)title
                               titleColor:(UIColor *)color
                          backgroundColor:(UIColor *)backgroundColor
                          backgroundImage:(NSString *)image
                                 andBlock:(ClickBlock)tempBlock;
@end

XYRPushButton.m

#import "XYRPushButton.h"

#define animateDelay 0.15   //默认动画执行时间
#define defaultScale 0.9    //默认缩小的比率

@implementation XYRPushButton

+ (XYRPushButton *)XYRTouchButtonWithType:(UIButtonType)type
                                    frame:(CGRect)frame
                                    title:(NSString *)title
                               titleColor:(UIColor *)color
                          backgroundColor:(UIColor *)backgroundColor
                          backgroundImage:(NSString *)image
                                 andBlock:(ClickBlock)tempBlock
{
    XYRPushButton * pushBtn = [XYRPushButton buttonWithType:type];
    pushBtn.frame = frame;
    
    if (title!=nil) {
        [pushBtn setTitle:title forState:UIControlStateNormal];
    }
    if (color!=nil) {
        [pushBtn setTitleColor:color forState:UIControlStateNormal];
    }
    if (backgroundColor!=nil) {
        [pushBtn setBackgroundColor:backgroundColor];
    }
    if (image!=nil) {
        [pushBtn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
    }
    
    [pushBtn addTarget:pushBtn action:@selector(pressedEvent:) forControlEvents:UIControlEventTouchDown];
    [pushBtn addTarget:pushBtn action:@selector(cancelEvent:) forControlEvents:UIControlEventTouchUpOutside];
    [pushBtn addTarget:pushBtn action:@selector(unpressedEvent:) forControlEvents:UIControlEventTouchUpInside];
    
    //给按钮的block赋值
    pushBtn.clickBlock = tempBlock;
    
    return pushBtn;
}

//按钮的压下事件 按钮缩小
- (void)pressedEvent:(XYRPushButton *)btn{
    //缩放比例必须大于0,且小于等于1
    CGFloat scale = (_buttonScale && _buttonScale <=1.0) ? _buttonScale : defaultScale;
    
    [UIView animateWithDuration:animateDelay animations:^{
        btn.transform = CGAffineTransformMakeScale(scale, scale);
    }];
}
//点击手势拖出按钮frame区域松开,响应取消
- (void)cancelEvent:(XYRPushButton *)btn{
    [UIView animateWithDuration:animateDelay animations:^{
        btn.transform = CGAffineTransformMakeScale(1.0, 1.0);
    } completion:^(BOOL finished) {
        
    }];
}
//按钮的松开事件 按钮复原 执行响应
- (void)unpressedEvent:(XYRPushButton *)btn{
    [UIView animateWithDuration:animateDelay animations:^{
        btn.transform = CGAffineTransformMakeScale(1.0, 1.0);
    } completion:^(BOOL finished) {
        //执行动作响应
        if (self.clickBlock) {
            self.clickBlock();
        }
    }];
}
演示代码
 XYRPushButton *btn=[XYRPushButton XYRTouchButtonWithType:UIButtonTypeCustom frame:CGRectMake(50, 50, 200, 30) title:@"好的" titleColor:[UIColor colorWithRed:239/255.0 green:103/255.0 blue:84/255.0 alpha:1.0] backgroundColor:[UIColor colorWithRed:72/255.0 green:96/255.0 blue:143/255.0 alpha:1.0] backgroundImage:nil andBlock:^{
        NSLog(@"被点击!");
    }];
    btn.center=CGPointMake(self.view.frame.size.width/2, 100);
    [self.view addSubview:btn];

验证码倒计时效果

模型效果:


模型效果.gif

项目效果:


项目效果.gif
封装方法
/**
 获取验证码,倒计时
 @param sender 获取验证码的按钮
 @param time 倒计的时间
 */
-(void)startTimeWithButton:(UIButton *)sender WithTime:(int)time{
    sender.userInteractionEnabled=NO;//关闭按钮的交互
    sender.backgroundColor=[UIColor lightGrayColor];
    [sender setTitleColor:[UIColor colorWithRed:67/255.0 green:67/255.0 blue:67/255.0 alpha:1.0] forState:UIControlStateNormal];

    __block int timeout=time; //倒计时时间
    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    dispatch_source_t _timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0,queue);
    dispatch_source_set_timer(_timer,dispatch_walltime(NULL, 0),1.0*NSEC_PER_SEC, 0); //每秒执行
    
    dispatch_source_set_event_handler(_timer, ^{
        if(timeout<=0){ //倒计时结束,关闭
            dispatch_source_cancel(_timer);
            dispatch_async(dispatch_get_main_queue(), ^{
                //设置界面的按钮显示 根据自己需求设置(倒计时结束后调用)
                [sender setTitle:@"获取验证码" forState:UIControlStateNormal];
                //设置可点击
                sender.userInteractionEnabled = YES;
                //恢复之前的颜色
                [sender setBackgroundColor:[UIColor colorWithRed:72/255.0 green:96/255.0 blue:143/255.0 alpha:1.0]];
                [sender setTitleColor:[UIColor colorWithRed:75/255.0 green:200/255.0 blue:123/255.0 alpha:1.0] forState:UIControlStateNormal];
            });
        }else{//倒计时未结束
            int seconds = timeout % (time+1);
            NSString *strTime = [NSString stringWithFormat:@"%d", seconds];
            dispatch_async(dispatch_get_main_queue(), ^{
                [sender setTitle:[NSString stringWithFormat:@"重新发送(%@)",strTime] forState:UIControlStateNormal];
            });
            timeout--;
        }
    });
    dispatch_resume(_timer);
}
演示代码
- (void)viewDidLoad {
    [super viewDidLoad];
    //倒计时按钮
    UIButton *btn2=[[UIButton alloc] initWithFrame:CGRectMake((self.view.frame.size.width-200)/2, 200, 200, 30)];
    [btn2 setTitle:@"获取验证码" forState:UIControlStateNormal];
    [btn2 setTitleColor:[UIColor colorWithRed:75/255.0 green:200/255.0 blue:123/255.0 alpha:1.0] forState:UIControlStateNormal];
    btn2.backgroundColor=[UIColor colorWithRed:72/255.0 green:96/255.0 blue:143/255.0 alpha:1.0];
    //设置圆角
    btn2.layer.masksToBounds=YES;
    btn2.layer.cornerRadius=5.0;
    [btn2 addTarget:self action:@selector(startTime:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn2];
}

-(void)startTime:(UIButton *)sender{
    [self startTimeWithButton:sender WithTime:10];
}

注册状态效果

发送状态.gif
封装的方法:
/**
 按钮动态信息提示
 
 @param buttton 需要动态显示信息的按钮
 @param title   动态显示的文字
 @param color   颜色
 */
+(void)animateButtonWithButton:(UIButton *)buttton WithTitle:(NSString *)title WithColor:(UIColor *)color{
    CATransition *transition=[[CATransition alloc] init];
    transition.type=kCATransitionPush;
    transition.subtype=kCATransitionFromTop;
    transition.duration=0.5;
    [buttton.titleLabel.layer addAnimation:transition forKey:kCATransition];
    [buttton setTitle:title forState:UIControlStateNormal];
    [buttton setTitleColor:color forState:UIControlStateNormal];
}
演示代码:

说明:演示代码和gif的效果是一样的,只是里面的文字不一样而已,大家不要介意!

/**
 确认重置密码
 */
-(void)resetPassword:(UIButton *)sender{
    [Share animateButtonWithButton:sender WithTitle:@"修改中" WithColor:[UIColor colorWithRed:165/255.0 green:42/255.0 blue:42/255.0 alpha:1]];
    [[请求注册**********接口保密] withBlock:^(BOOL isSuccessful, id result, NSString *error) {
        if (isSuccessful) {
            NSString *err=[[NSString alloc] initWithFormat:@"%@",[result objectForKey:@"Error"]];
            if (err.length==0) {
                [Share delay:1.5 withBlack:^{
                    [Share animateButtonWithButton:sender WithTitle:@"修改成功" WithColor:[UIColor colorWithRed:238/255.0 green:99/255.0 blue:99/255.0 alpha:1]];
                }];
                [Share delay:2.5 withBlack:^{
                    //                    [写登录成功,退出当前页面的方法];
                }else{
                    [Share delay:1.5 withBlack:^{
                        [Share animateButtonWithButton:sender WithTitle:@"验证码错误!" WithColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:128/255.0 alpha:1]];
                    }];
                    [Share delay:3.0 withBlack:^{
                        [Share animateButtonWithButton:sender WithTitle:@"确 认" WithColor:kGlobalMainColor];
                    }];
                }
          }else{
            [Share delay:1.5 withBlack:^{
            [Share animateButtonWithButton:sender WithTitle:@"请求失败" WithColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:128/255.0 alpha:1]];
                     }];
            [Share delay:3.0 withBlack:^{
                    [Share animateButtonWithButton:sender WithTitle:@"确 认" WithColor:kGlobalMainColor];
                     }];
            }
                 }];
    }
iOS 开发
Web note ad 1