iOS登录界面和注册界面

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

@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文件：

#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);
}

3、新建 LoginView类继承自UIView，把这个 LoginView设置为控制器的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"