很多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];
}];
}
}];
}
