很多APP都會構(gòu)建登錄界面践啄，我想分享我在搭建登錄界面時用到的一些效果浇雹。
傳送門： iOS開發(fā) 登錄界面(邏輯版)
輸入框間距
輸入框間距.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
原創(chuàng)：GitHub地址 、簡書 地址
（PS:下面的代碼屿讽，在原創(chuàng)的基礎(chǔ)上進行了一定的修改昭灵！有興趣可以看看原創(chuàng)的代碼，并不復雜７ヌ浮）
完整類別：
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 按鈕被按下時履澳，會調(diào)用這個回調(diào)
@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 //默認動畫執(zhí)行時間
#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區(qū)域松開，響應(yīng)取消
- (void)cancelEvent:(XYRPushButton *)btn{
[UIView animateWithDuration:animateDelay animations:^{
btn.transform = CGAffineTransformMakeScale(1.0, 1.0);
} completion:^(BOOL finished) {
}];
}
//按鈕的松開事件 按鈕復原 執(zhí)行響應(yīng)
- (void)unpressedEvent:(XYRPushButton *)btn{
[UIView animateWithDuration:animateDelay animations:^{
btn.transform = CGAffineTransformMakeScale(1.0, 1.0);
} completion:^(BOOL finished) {
//執(zhí)行動作響應(yīng)
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;//關(guān)閉按鈕的交互
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); //每秒執(zhí)行
dispatch_source_set_event_handler(_timer, ^{
if(timeout<=0){ //倒計時結(jié)束，關(guān)閉
dispatch_source_cancel(_timer);
dispatch_async(dispatch_get_main_queue(), ^{
//設(shè)置界面的按鈕顯示 根據(jù)自己需求設(shè)置（倒計時結(jié)束后調(diào)用）
[sender setTitle:@"獲取驗證碼" forState:UIControlStateNormal];
//設(shè)置可點擊
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{//倒計時未結(jié)束
int seconds = timeout % (time+1);
NSString *strTime = [NSString stringWithFormat:@"%d", seconds];
dispatch_async(dispatch_get_main_queue(), ^{
[sender setTitle:[NSString stringWithFormat:@"重新發(fā)送(%@)",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];
//設(shè)置圓角
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];
}
注冊狀態(tài)效果
發(fā)送狀態(tài).gif
封裝的方法：
/**
按鈕動態(tài)信息提示
@param buttton 需要動態(tài)顯示信息的按鈕
@param title 動態(tài)顯示的文字
@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];
}];
}
}];
}
