轉(zhuǎn)載自
iOS登錄界面和注冊界面
一伊履、登錄和注冊界面實現(xiàn)效果圖：
一韩容、實現(xiàn)原理
1、輸入框的實現(xiàn)原理：把兩個無邊框的UITextField 添加到一個作為背景的UIView上唐瀑，然后重寫UIView的： -(void)drawRect:(CGRect)rect 方法群凶，用Quartz2D畫出中間的那條分隔線。然后再設(shè)置UIView為帶邊框的圓角就可以實現(xiàn)上面的效果了哄辣。
注意：為了方便把textField添加到背景View上座掘，然后設(shè)置textField的frame值時根據(jù)view的frame值計算更簡單些
二、直接上代碼
1\新建一個BasicTextField 類 繼承自UITextField
BasicTextField.h文件：
#import <UIKit/UIKit.h>
@interface BasicTextField:UITextField
@end
BasicTextField.m文件
#import "BasicTextField.h"
@implementation BasicTextField
// 重寫 leftView的X 值
-（CGRect）leftViewRectForbounds:(CGRect)bounds{
? ? ? ?CGRect iconRect = [super leftViewRectForBounds:bounds];
? ? ? ?iconRect.origin.x += 10;
? ? ? return iconRect;
// 重寫占位符的x值
-(CGRect)placeholderRectForBounds:(CGRect)bounds{
? ? ? ? CGRect placeholderRect = [super placeholderRectForBounds:bounds];
? ? ? ?placeholderRect.origin.x ?+= 1;
? ? ? ? return placeholderRect;
// 重寫文字輸入時的x值
- (CGRect)editingRectForBounds:(CGRect)bounds{
CGRect editingRect = [super editingRectForBounds:bounds];
editingRect.origin.x += 20;
return editingRect;
}
// 重寫文字顯示時的x值
-（CGRect）textRectForBounds:(CGRect)bounds{?
CGRect textRect = [super editingRectForBounds:bounds];
textRect.origin.x += 20;
return textRect;
}
@end
2柔滔、新建LoginBackgroundView類繼承自UIView,作為textField的輸入框的背景溢陪。
LoginBackGroundView.h文件：
#import<UIKit/UIKit.h>
@interface LoginBackgroundView:UIView
@end
LoginBackGroundView.m文件
// 重寫此方法，用Quartz2D畫出中間分隔線
-(void)drawRect:(CGRect)rect{
CGRectContextref context = UIGraphicsGetCurrentConetext();
CGContextSetLineWidth(context,0.7);
CGContextBeginPath(path);
CGContextMoveToPoint(context,0,40);
CGContextAddLineToPoint(context,self.frame.size.width,40);
CGContextClosePath(context);
[mianBodyColor(207,207,207)setStroke];
CGContextStrokePath(context);
3睛廊、新建LoginView類繼承自UIView,把這個LoginView設(shè)置為控制器的rootView即可
LoginView.h文件
#import<UIKit/UIkit.h>
@protocol LoginViewDelegate<NSObject>
@interface LoginView:UIView
@end
LoginView.m文件
#define textFieldColor(r,g,b) [UIColor colorWithRed:r/255.0f green"g/255.0f ?blue:b/255.0f ?alpha:1];
#define mianBodyColor(r,,g,b) [UIColor colorWithRed:r/255.0f ? green:g/255.0f ?blue:b/255.0f ?alpha:1];
#import"LoginView.h"
#import"BasicTextField.h"
#import"LoginBackgroundView.h"
@interface LoginView ()<UITextFieldDelegate>
@property (noatomic, strong) LoginBackgroundView *backgroundView;
@property(noatomic, strong) BasicTextField *userTextField;
@property(noatomic, strong) BasicTextField *passwordTextField;
@property(noatomic, strong) UIButton *loginButton;
@property (noatomic, strong) UIActivityIndicatorView *loginingActivityIndicatorView;
@property (noatomic, assign) BOOL isUserEmpty;
@property (noatomic, assign) BOOL isPasswordEmpty;
@end
@implementation LoginView
-(id)initWithFrame:(CGRect)frame {
self = [super initWithFrame];
if (self) {
[self ?addLoginBackgroundView:frame];
[self customAllButons:frame];
[self customUserTextField:self.backgoundView.frame];
[self customPasswordTextField:self.backgroundView.frame];
}
return self;
}
// 添加textField的背景view
-(void)addLoginBackgroundView:(CGRect)frame{
?CGFloat backGroundX = 30;
CGFloat backGroundY = 160;
CGFloat backGroundW = frame.size.width - ?60;
CGFloat backGroundH = 80;
self.backgroundView= [[LoginBackgroundViewalloc]initWithFrame:CGRectMake(backgroundX, backgroundY, backgroundW, backgroundH)];
[self.backgroundViewsetBackgroundColor:[UIColorwhiteColor]];
self.backgroundView.layer setCornerRadius:5.0];
self.backgroundView.layer setBorderWidth:1.0];
self.backgroundView.layer setBorderColor:textFieldColor(207,207,207).CGColor];
[selfaddSubview:self.backgroundView];
}
- (void)customAllButtons:(CGRect)frame {
//返回button
UIButton*backButton = [[UIButtonalloc]initWithFrame:CGRectMake(19,35,22,22)];
[backButtonsetBackgroundImage:[UIImageimageNamed:@"back"]forState:UIControlStateNormal];
[backButtonaddTarget:selfaction:@selector(clickTheBackButton:)forControlEvents:UIControlEventTouchDown];
[self addSubview:backButton];
//登錄button
CGFloatloginButtonX =30;
CGFloatloginButtonY =250;
CGFloatloginButtonW = frame.size.width-60;
self.loginButton= [[UIButtonalloc]initWithFrame:CGRectMake(loginButtonX, loginButtonY, loginButtonW,40)];
[self.loginButton setEnabled:No];
self.loginButton.titleLable.alpha = 0.5;
[self.loginButton,layer setCornerRadius:0.3];
[self.loginButtonsetTitle:@"登錄"forState:UIControlStateNormal];
self.loginButton setTitleColor:[UIColor whiteColor] forState:UIControlStateReserved];
[self.loginButton setBackgroundColor:mianBodyColor(133,122,250)];
[self.loginButtonaddTarget:selfaction:@selector(clickLoginButton:)forControlEvents:UIControlEventTouchDown];
[selfaddSubview:self.loginButton]
//忘記密碼
CGFloatforgetButtonW =73;
CGFloatforgetButtonX = loginButtonX + loginButtonW - forgetButtonW;
CGFloatforgetButtonY =0.916* (loginButtonY +100);
CGFloatforgetButtonH =20;
UIButton*forgetButton = [[UIButtonalloc]initWithFrame:CGRectMake(forgetButtonX, forgetButtonY, forgetButtonW, forgetButtonH)];
[forgetButtonaddTarget:selfaction:@selector(clickForgetpasswordTextFieldButton:)forControlEvents:UIControlEventTouchDown];
[forgetButtonsetTitle:@"忘記密碼?"forState:UIControlStateNormal];
[forgetButton.titleLabelsetFont:[UIFontsystemFontOfSize:14]];
[forgetButtonsetTitleColor:textFieldColor(74,74,74)forState:UIControlStateNormal];
[selfaddSubview:forgetButton];
}
- (void)customUserTextField:(CGRect)frame{
self.userTextField= [[BasicTextFieldalloc]initWithFrame:CGRectMake(0,0, frame.size.width,40)];
self.userTextField.keyboardType=UIKeyboardTypeNumberPad;
self.userTextField.delegate=self;
self.userTextField.tag=7;
self.userTextField.placeholder=@"請輸入賬號";
[self.userTextFieldsetFont:[UIFontsystemFontOfSize:14]];
UIImageView*userTextFieldImage = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"userIcon"]];
self.userTextField.leftView= userTextFieldImage;
self.userTextField.leftViewMode=UITextFieldViewModeAlways;
self.userTextField.clearButtonMode=UITextFieldViewModeAlways;
[[NSNotificationCenterdefaultCenter]addObserver:selfselector:@selector(userTextFieldDidChange)name:UITextFieldTextDidChangeNotificationobject:self.userTextField];
self.isPasswordEmpty=YES;
[self.backgroundViewaddSubview:self.userTextField];
}
- (void)customPasswordTextField:(CGRect)frame{
self.passwordTextField= [[BasicTextFieldalloc]initWithFrame:CGRectMake(0,40, frame.size.width,40)];
self.passwordTextField.delegate=self;
self.passwordTextField.tag=11;
self.passwordTextField.placeholder=@"請輸入密碼";
[self.passwordTextFieldsetFont:[UIFontsystemFontOfSize:14]];
UIImageView*passwordTextFieldImage = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"passwordIcon"]];
self.passwordTextField.leftView= passwordTextFieldImage;
self.passwordTextField.leftViewMode=UITextFieldViewModeAlways;
self.passwordTextField.clearButtonMode=UITextFieldViewModeAlways;
self.passwordTextField.secureTextEntry=YES;
//設(shè)置監(jiān)聽
[[NSNotificationCenterdefaultCenter]addObserver:selfselector:@selector(passwordTextFieldDidChange)name:UITextFieldTextDidChangeNotificationobject:self.passwordTextField];
self.isUserEmpty=YES;
[self.backgroundViewaddSubview:self.passwordTextField];
}
- (void)addLogioningActivityIndicatorView{
CGFloatlogioningActivityIndicatorViewX =self.loginButton.frame.origin.x+80;
CGFloatlogioningActivityIndicatorViewY =self.loginButton.frame.origin.y;
CGFloatlogioningActivityIndicatorViewWH =self.loginButton.frame.size.height;
self.logioningActivityIndicatorView= [[UIActivityIndicatorViewalloc]initWithFrame:CGRectMake(logioningActivityIndicatorViewX, logioningActivityIndicatorViewY, logioningActivityIndicatorViewWH, logioningActivityIndicatorViewWH)];
[selfaddSubview:self.logioningActivityIndicatorView];
}
- (void)clickLoginButton:(id)sender{
[self.loginButtonsetTitle:@"登錄中..."forState:UIControlStateNormal];
[selfaddLogioningActivityIndicatorView];
[self.logioningActivityIndicatorViewstartAnimating];
//當(dāng)點擊登錄按鈕時形真，賬號和密碼輸入框放棄第一響應(yīng)者，此時鍵盤退出
[self.userTextFieldresignFirstResponder];
[self.passwordTextFieldresignFirstResponder];
}
- (void)clickForgetpasswordTextFieldButton:(id)sender{
//點擊忘記密碼button后需要執(zhí)行的代碼
}
- (void)clickTheBackButton:(id)sender{
//點擊左上角圈叉按鈕返回上一界面
}
#pragma makr --UITextFieldDelegate
//UITextField的代理方法超全，點擊鍵盤return按鈕退出鍵盤
- (BOOL)textFieldShouldReturn:(UITextField*)textField{
[self.passwordTextFieldresignFirstResponder];
returnYES;
}
//此處為userTextField的監(jiān)聽方法咆霜，后面會細講，主要是實時監(jiān)聽textField值的變化
- (void)userTextFieldDidChange{
if(self.userTextField.text.length>0) {
UIImageView*loginTextFieldImage = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"userIconEdited"]];
self.userTextField.leftView= loginTextFieldImage;
self.isUserEmpty=NO;
if(self.isPasswordEmpty==NO) {
self.loginButton.titleLabel.alpha=1;
[self.loginButtonsetEnabled:YES];
}
}else{
UIImageView*loginTextFieldImage = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"userIcon"]];
self.userTextField.leftView= loginTextFieldImage;
[self.loginButtonsetTitle:@"登錄"forState:UIControlStateNormal];
self.loginButton.titleLabel.alpha=0.5;
[self.loginButtonsetEnabled:NO];
self.isUserEmpty=YES;
[self.logioningActivityIndicatorViewstopAnimating];
}
}
//passwordTextField的監(jiān)聽方法
- (void)passwordTextFieldDidChange{
if(self.passwordTextField.text.length>0) {
self.isPasswordEmpty=NO;
UIImageView*loginTextFieldImage = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"passwordIconEdited"]];
self.passwordTextField.leftView= loginTextFieldImage;
if(self.isUserEmpty==NO){
self.loginButton.titleLabel.alpha=1;
[self.loginButtonsetEnabled:YES];
}
}else{
self.isPasswordEmpty=YES;
UIImageView*loginTextFieldImage = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"passwordIcon"]];
self.passwordTextField.leftView= loginTextFieldImage;
[self.loginButtonsetTitle:@"登錄"forState:UIControlStateNormal];
self.loginButton.titleLabel.alpha=0.5;
[self.loginButtonsetEnabled:NO];
[self.logioningActivityIndicatorViewstopAnimating];
}
}
//點擊界面空白處退出鍵盤
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event{
[self.userTextFieldresignFirstResponder];
[self.passwordTextFieldresignFirstResponder];
}
@end
