iOS登录界面和注册界面
一、登录和注册界面实现效果图:
二、实现原理
1、输入框的实现原理:把两个无边框的UITextField添加到一个作为背景的UIView上,然后重写UIView的 :
-(
void
)drawRect:(
CGRect
)rect 方法,用Quartz2D画出中间的那条分隔线。然后再设置背景UIView为带边框的圆角就可以实现上面的效果了。
注意:为了方便要把textField添加到背景view上,然后设置textField的frame值时根据View的frame值计算简单些。
三、直接上代码
注:由于代码是直接从自己的小项目中粘贴过来的,有些功能可能你用不到,可以自行删减。
1、我前面有一篇博客讲了如何设置textField的占位符和左边的图片,这里就不再赘述。
下面直接上代码:
新建一个BasicTextField类继承自UITextField
BasicTextField.h文件:
#import
<UIKit/UIKit.h>
@interface BasicTextField : UITextField
@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];
@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
@interface LoginBackgroundView : UIView
@end
LoginBackgroundView.m文件:
#define mianBodyColor(r, g, b) [UIColor colorWithRed:r/
255.0f
green:g/
255.0f
blue:b/
255.0f
alpha:
1
]
#import "LoginBackgroundView.h"
@implementation
LoginBackgroundView
//
重写此方法,用
Quartz2D
画出中间分割线
-(
void
)drawRect:(
CGRect
)rect{
CGContextRef context = UIGraphicsGetCurrentContext ();
CGContextSetLineWidth (context, 0.7 );
CGContextBeginPath (context);
CGContextMoveToPoint (context, 0 , 40 );
CGContextAddLineToPoint (context, self . frame . size . width , 40 );
CGContextClosePath (context);
[ mianBodyColor ( 207 , 207 , 207 ) setStroke ];
CGContextStrokePath (context);
}
CGContextRef context = UIGraphicsGetCurrentContext ();
CGContextSetLineWidth (context, 0.7 );
CGContextBeginPath (context);
CGContextMoveToPoint (context, 0 , 40 );
CGContextAddLineToPoint (context, self . frame . size . width , 40 );
CGContextClosePath (context);
[ mianBodyColor ( 207 , 207 , 207 ) setStroke ];
CGContextStrokePath (context);
}
3、新建
LoginView类继承自UIView,把这个
LoginView设置为控制器的rootView即可。
LoginView.h文件:
#import
<UIKit/UIKit.h>
@protocol LoginViewDelegate < NSObject >
@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"
#define mianBodyColor(r, g, b) [UIColor colorWithRed:r/ 255.0f green:g/ 255.0f blue:b/ 255.0f alpha: 1 ]
#import "LoginView.h"