这里记录一下我的整体思维过程。中间可能或有问题、矛盾，引以为戒。
首先搭建登录界面，要清楚登录界面的布局
之后，设置出自己需要的属性
//登录界面背景图片
@property(nonatomic,strong)UIImageView * imageV;
//用户名
@property(nonatomic,strong)UITextField * userNameField;
//密码
@property(nonatomic,strong)UITextField * passWordField;
//登录Button
@property(nonatomic,strong)UIButton * loginButton;
//忘记密码
@property(nonatomic,strong)UIButton * forgetButton;
//存放界面
@property(nonatomic,strong)UIView * storeView;
开始设置用户名、密码的TextField，我写了一个方法，方便调用。属性较多，为了方便自定义两个field可能不同要求，都写进方法里了（有什么用，你家的用户名、密码的field长得不一样？？）
-(UITextField *)setInfoTextField:(UITextField *)field color:(UIColor *)color placeholder:(NSString *)placeholder secureTextEntry:(BOOL )secure image:(NSString *)imageName cornerRadius:(CGFloat)radius{
//颜色
field.backgroundColor = color;
//占位符
field.placeholder = placeholder;
//密文输入
field.secureTextEntry = secure;
//添加右侧图片
UIImageView * imageV1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
field.leftView = imageV1;
field.leftViewMode = UITextFieldViewModeAlways;
//设置边框弧度 cornerRadius
field.layer.cornerRadius = radius;
//是否有×号
field.clearButtonMode = UITextFieldViewModeAlways;
//显示边框样式
// field.borderStyle = UITextBorderStyleRoundedRect;
//内容对齐方式
//self.uesrNameField.textAlignment = UITextAlignmentLeft;
return field;
}
方法写好了之后，设置登录界面
//登录界面背景图片
self.imageV = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.imageV.image = [UIImage imageNamed:@"Bitmap.png"];
[self.view addSubview:self.imageV];
//存放界面
self.storeView = [[UIView alloc] initWithFrame:CGRectMake(20, 70, self.view.frame.size.width - 40, 200)];
[self.view addSubview:self.storeView];
//用户名
self.userNameField = [self setInfoTextField:[[UITextField alloc] initWithFrame:CGRectMake(10, 10, self.storeView.frame.size.width - 20, 60)] color:[UIColor whiteColor] placeholder:@"请输入用户名" secureTextEntry:NO image:@"email.png" cornerRadius:5.0 ];
[self.storeView addSubview:self.userNameField];
//密码
self.passWordField = [self setInfoTextField:[[UITextField alloc] initWithFrame:CGRectMake(10, 70, self.storeView.frame.size.width - 20, 60)] color:[UIColor whiteColor] placeholder:@"请输入密码" secureTextEntry:YES image:@"Lock.png" cornerRadius:5.0];
[self.storeView addSubview:self.passWordField];
//登录按钮
_loginButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[_loginButton setFrame:CGRectMake(10, CGRectGetMaxY(_passWordField.frame)+10, self.storeView.frame.size.width - 20, 60)];
[_loginButton setTitle:@"登录" forState:UIControlStateNormal];
[_loginButton setBackgroundColor:[UIColor colorWithRed:51/255.0 green:102/255.0 blue:255/255.0 alpha:0]];
[_loginButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[self.storeView addSubview:self.loginButton];
这里设置storeView的主要目的是方便以后整体调整。然而，我现在想放上图片的时候，模拟器卡死了。重启一下。。。
登录界面00.png
感觉好挫的样子。优化一下。
现在创建一个新建一个文件，继承于UIView
为什么要继承与UIView呢？
因为我们要用到它的绘图方法
创建UIView文件.png
这个方法是在简书上借鉴别的大神的方法，我就不多赘余了。但是这个与我的要求有一点点冲突。我是把两个Field和登录Button放在一个View里了。所以，我有写了一个方法。。。来专门设置需要变圆角的一个角
- (void)applyRoundCorners:(UIRectCorner)corners radius:(CGFloat)radius textField:(UITextField *)textField
{
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:textField.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = textField.bounds;
maskLayer.path = maskPath.CGPath;
textField.layer.mask = maskLayer;
}
//调用方法
[self applyRoundCorners:UIRectCornerTopLeft|UIRectCornerTopRight radius:5 textField:_userNameField];
[self applyRoundCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight radius:5 textField:self.passWordField];
登录界面01.png
中间缺了一条分割线。
登录界面02.png
加分割线，说出来丢人，我是直接加了个UIView。。。
之后添加了个注册按钮，忘记密码按钮，头像
登录界面03.png
背景的模糊图片就是本来就是模糊的图片。
