Facebook的登錄界面，看起來很漂亮，eamil框和passwod框合在一起，那麼這種效果是怎麼做出來的呢？我們都知道輸入框用layer屬性是可以做成圓角的形式，那麼怎麼樣才能夠僅僅只讓上邊框有圓角呢？   好，廢話不多說，先來實戰一下。 ##新建一個項目 現在xcode新建的項目都是自帶故事板的，操作不是很方便，我們來把它改成說寫代碼   打開AppDelegate.h文件，添加以下代碼 - (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.h中添加以下代碼   #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.h中修改以下代碼      _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);