IOS制做一个漂亮的登陆界面

上图是Facebook的登陆界面，看起来很漂亮，eamil框和passwod框合在一块儿，那么这种效果是怎么作出来的呢？咱们都知道输入框用layer属性是能够作成圆角的形式，那么怎么样才可以仅仅只让上边框有圆角呢？

好，废话很少说，先来实战一下。
##新建一个项目
如今xcode新建的项目都是自带故事板的，操做不是很方便，咱们来把它改为说写代码

打开AppDelegate.m文件，添加如下代码
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window=[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; self.window.rootViewController=[[ViewController alloc] init]; [self.window makeKeyAndVisible]; return YES; }

到此就完成了手写代码的第一步。

添加输入框和按钮

在ViewController.m中添加如下代码

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic,strong) UITextField *account;
@property (nonatomic,strong) UITextField *password;
@property (nonatomic,strong) UIButton *loginButton;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor colorWithRed:51/255.0 green:204/255.0 blue:255/255.0 alpha:1]];
    
    
    _account=[[UITextField alloc] initWithFrame:CGRectMake(20, 200, self.view.frame.size.width-40, 50)];
    _account.backgroundColor=[UIColor whiteColor];
    _account.placeholder=[NSString stringWithFormat:@"Email"];
    [self.view addSubview:_account];
    
    _password=[[UITextField alloc] initWithFrame:CGRectMake(20, 260, self.view.frame.size.width-40, 50)];
    _password.backgroundColor=[UIColor whiteColor];
    _password.placeholder=[NSString stringWithFormat:@"Password"];
    [self.view addSubview:_password];
    
    _loginButton=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    [_loginButton setFrame:CGRectMake(20, 320, self.view.frame.size.width-40, 50)];
    
    [_loginButton setTitle:@"Login" forState:UIControlStateNormal];
    [_loginButton setBackgroundColor:[UIColor colorWithRed:51/255.0 green:102/255.0 blue:255/255.0 alpha:1]];
    [_loginButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [self.view addSubview:_loginButton];
}

@end

运行一下看看效果

Oh God！简直被丑哭了，彻底无法看啊，咱们来给它美化一下。

美化

先把输入框加上圆角属性。

Apple早就为开发者想到了，咱们只要轻轻额添加一个属性便可实现这个效果

_account.layer.cornerRadius=5.0;

在layer下有一个cornerRadius属性，输入你想要圆角的大小就OK了。

运行程序，效果如上，恩，稍微好了那么一点点，仍是很挫，接下来要把两个输入框合并起来。

可是合起来之后中间就会有凹进去的部分，因此我想到了另外几种方法。

1.单独只为上边添加圆角。

2.总体加一张背景。

两种方法均可以实现，那么咱们先用第二种方法来实现。

先新建一个文件，继承UIView，把它做为背景。为何要新建一个UIView呢，应为咱们要用到它的绘图方法

- (void)drawRect:(CGRect)rect {
    // Drawing code
}

在ViewController.m中修改如下代码

_background=[[textFieldBackground alloc] initWithFrame:CGRectMake(20, 200, self.view.frame.size.width-40, 100)];
    [_background setBackgroundColor:[UIColor whiteColor]];
    [[_background layer] setCornerRadius:5];
    [[_background layer] setMasksToBounds:YES];
    
    [self.view addSubview:_background];
    
    _account=[[UITextField alloc] initWithFrame:CGRectMake(10, 0, self.view.frame.size.width-40, 50)];
    [_account setBackgroundColor:[UIColor clearColor]];
    _account.placeholder=[NSString stringWithFormat:@"Email"];
    _account.layer.cornerRadius=5.0;
    [_background addSubview:_account];
    
    _password=[[UITextField alloc] initWithFrame:CGRectMake(10, 50, self.view.frame.size.width-40, 50)];
    [_account setBackgroundColor:[UIColor clearColor]];
    _password.placeholder=[NSString stringWithFormat:@"Password"];
    _password.layer.cornerRadius=5.0;
    [_background addSubview:_password];

又变好看了一点，不过仍是少了点什么东西，对了，中间还少了一条分割线,这就是为何要新建一个UIView了，立刻要用到了他的绘图方法

修改一下方法

- (void)drawRect:(CGRect)rect {
    CGContextRef context=UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context,0.2);
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, 5, 50);
    CGContextAddLineToPoint(context,self.frame.size.width-5, 50);
    CGContextClosePath(context);
    [[UIColor grayColor] setStroke];
    CGContextStrokePath(context);
    
}

再看效果

就这样，一个简单的登陆界面就完成了

总结：

1.这个登陆界面用到的东西不是不少，主要也就是主要在设计这一块。
2.最后用到了绘图的方法。主要步骤分为如下几点：

//获取绘图上下文
   CGContextRef context=UIGraphicsGetCurrentContext();

   //设置粗细
   CGContextSetLineWidth(context,0.2);

   //开始绘图
   CGContextBeginPath(context);

   //移动到开始绘图点
   CGContextMoveToPoint(context, 5, 50);

   //移动到第二个点
   CGContextAddLineToPoint(context,self.frame.size.width-5, 50);

   //关闭路径
   CGContextClosePath(context);

   //设置颜色
   [[UIColor grayColor] setStroke];
   //绘图
   CGContextStrokePath(context);

以上。