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

以上。