效果圖：

8DC3F234-C0AA-4A9F-A939-C0300FF0E044.png

分析如下：

1.底部按鈕View

4.png

(1. ) 三個(gè)按鈕，先設(shè)置中間按鈕
(2.) 將底部快速登錄整體高度200去掉

• 設(shè)置微博登錄：圖片、文字，上下都為0.
• copy微博登錄,設(shè)置另兩個(gè)按鈕
• 設(shè)置三個(gè)按鈕等寬、等高
• 設(shè)置三個(gè)按鈕top對(duì)齊，qq拖向微博,新浪拖向微博
• 設(shè)置qq左邊為0，右邊距離微博為0；新浪左邊距離微博為0 ，右邊距離為0

自定義按鈕
一般按鈕文字和圖片是如下顯示：

3F2591FC-F42E-4916-A02E-CCF8DCCC24AE.png

自定義后如下圖：

C8C5AEB4-6FEA-42DE-AFCA-318A0BE18BB4.png

解決方法兩種

第一種：取巧的話，可利用EdgeInset

第二種：自定義按鈕

-(void)layoutSubviews
{
    [super layoutSubviews];
    
    // 圖片中心點(diǎn)的位置
    self.imageView.xmg_centerX = self.xmg_width * 0.5;
    self.imageView.xmg_y = 0;
    
    // 文字位置
    [self.titleLabel sizeToFit];
    self.titleLabel.xmg_centerX = self.xmg_width * 0.5;
    self.titleLabel.xmg_y = self.xmg_height - self.titleLabel.xmg_height;
}

• 將按鈕類(lèi)名更換為自定義的按鈕（三個(gè)都要更換）

  
  
  ADFB05B9-7D19-4CF6-B615-CABB21FC1D03.png

2.頂部按鈕（注意點(diǎn) ：關(guān)閉按鈕的top = 注冊(cè)按鈕的Center Vertically）

2D65B462-A3DC-47EB-8F42-3F92397467AA.png

拓展：
按鈕的圖片：image與backImage的區(qū)別
image：圖片不會(huì)變形，但可點(diǎn)擊范圍會(huì)變大。
backImage：按鈕有多大，圖片就多大。

代碼：

/**
 *  監(jiān)聽(tīng)關(guān)閉按鈕
 */
  - (IBAction)close {
    [self dismissViewControllerAnimated:YES completion:nil];
}

當(dāng)點(diǎn)擊其他空白地方，也可關(guān)閉控制器----調(diào)用方法-(void)touchesBegan:

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self.view endEditing:YES];

}

3.中間登陸（注冊(cè)）界面

注意：

• 中間的登錄頁(yè)面有可能會(huì)再次使用，也可能在其他項(xiàng)目中使用，可將其抽出來(lái)，封裝到View里
• 注冊(cè)界面和登錄頁(yè)面相近，所以在封裝的View里，xib要描述2個(gè)View（登錄和注冊(cè)）
• 自定義UIView時(shí)，UIView不能在創(chuàng)建時(shí)就創(chuàng)建xib，自己在單獨(dú)建xib，進(jìn)行關(guān)聯(lián)。
• 問(wèn)題：一個(gè)view從xib中加載要不要固定尺寸？
  答案：需要在外部用的時(shí)候在確認(rèn)一下

相關(guān)問(wèn)題：
1.光標(biāo)靠左邊太近

ACB5045E-8E72-4282-B53F-2F9DC9CB63DE.png

解決：將Constant+10或者-10（左右都設(shè)置）如下圖：

E4DF343B-EAF9-415D-BCB2-0F69855D3DC6.png

2.添加后面的x號(hào)
Clear Button： is Always Visible

3.修改占位文字顏色
Placeholder ：占位文字
Color ：輸入文字的顏色
其他可參考Jianshu

2.png

4.密碼安全文本
Secure Text Entry

5. 聚焦時(shí)光標(biāo)顏色的改變
現(xiàn)在光標(biāo)顏色是藍(lán)色
目的：聚焦時(shí)，光標(biāo)顏色會(huì)變成亮白色，不聚焦時(shí)變成暗白色
參考：Jianshu

6.登錄按鈕圖片拉伸變形

問(wèn)題：邊框變形了，是因?yàn)閳D片被拉伸了

5.png

解決：具體可參考Jianshu

16.png

7.登錄邊框圓角
參考Jianshu

4.注冊(cè)界面

1.png

基本上和登錄界面 相同，就復(fù)制一下登錄界面，修改一下就好。

5.監(jiān)聽(tīng)是登錄界面還是注冊(cè)界面

判斷左邊的這條線的constant
備注：
（1）Constant ：表示當(dāng)前控件相對(duì)于SuperView的x/y的相對(duì)距離
（2）注意刷新UI，會(huì)調(diào)用[self.view layoutIfNeeded]方法，這個(gè)方法的作用是：

• 強(qiáng)制刷新 : 讓最新設(shè)置的約束值馬上應(yīng)用到UI控件上
• 會(huì)刷新到self.view內(nèi)部的所有子控件

2.png

代碼如下：（注意刷新UI）

// 注冊(cè)或登錄
- (IBAction)loginOrRegisterClick:(UIButton *)sender {
    sender.selected = !sender.selected;
    
    // 平移view
    _leadLine.constant = _leadLine.constant ==0? -self.loginOrRegisterView.xmg_width * 0.5 : 0;
    // 動(dòng)畫(huà)效果切換
    [UIView animateWithDuration:0.4 animations:^{
        [self.view layoutIfNeeded];
    }];
}

自定義UIView的完整代碼：

#import <UIKit/UIKit.h>

@interface BSLoginOrRegisterView : UIView

+ (instancetype)loginView;
+ (instancetype)registerView;
    
@end

#import "BSLoginOrRegisterView.h"

@implementation BSLoginOrRegisterView

+ (instancetype)loginView
{
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] firstObject];
}

+ (instancetype)registerView
{
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
}
@end

在Controller中的使用

@interface BSLoginOrRegisterController ()
@property (weak, nonatomic) IBOutlet UIView *loginOrRegisterView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leadLine;
@property (weak, nonatomic) IBOutlet UIView *quicklyLoginView;

@end

@implementation BSLoginOrRegisterController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 添加loginView
    BSLoginOrRegisterView *loginView = [BSLoginOrRegisterView loginView];
    [self.loginOrRegisterView addSubview:loginView];
    
    // 添加registerView
    BSLoginOrRegisterView *registerView = [BSLoginOrRegisterView registerView];
    [self.loginOrRegisterView addSubview:registerView];
    
    // 添加quicklyLoginView
    BSQuicklyLoginView *quicklyLoginView = [BSQuicklyLoginView quicklyLoginView];
    [self.quicklyLoginView addSubview:quicklyLoginView];
    
}

/**
 * viewDidLayoutSubviews才會(huì)根據(jù)布局調(diào)整空間的尺寸
 */
    
-(void)viewDidLayoutSubviews
{
    // 一定要調(diào)用super
    [super viewDidLayoutSubviews];
    
    // loginView的frame
    BSLoginOrRegisterView *loginView = self.loginOrRegisterView.subviews[0];
    loginView.frame = CGRectMake(0, 0, self.loginOrRegisterView.xmg_width * 0.5, self.loginOrRegisterView.xmg_height);
    
    // registerView的frame
    BSLoginOrRegisterView *registerView = self.loginOrRegisterView.subviews[1];
    registerView.frame = CGRectMake(self.loginOrRegisterView.xmg_width * 0.5, 0, self.loginOrRegisterView.xmg_width * 0.5, self.loginOrRegisterView.xmg_height);
    
    // quickluLoginView的frame
    BSQuicklyLoginView *quicklyLoginView = self.quicklyLoginView.subviews[0];
    quicklyLoginView.frame = CGRectMake(0, 0, self.quicklyLoginView.xmg_width, self.quicklyLoginView.xmg_height);
    
}
    
// 關(guān)閉
- (IBAction)closeClick:(id)sender {
    [self dismissViewControllerAnimated:YES completion:nil];
}
    
// 注冊(cè)或登錄
- (IBAction)loginOrRegisterClick:(UIButton *)sender {
    sender.selected = !sender.selected;
    
    // 平移view
    _leadLine.constant = _leadLine.constant ==0? -self.loginOrRegisterView.xmg_width * 0.5 : 0;
    // 動(dòng)畫(huà)效果切換
    [UIView animateWithDuration:0.4 animations:^{
        [self.view layoutIfNeeded];
    }];
}

可能出現(xiàn)問(wèn)題：

問(wèn)題1：注冊(cè)頁(yè)面加載不出來(lái)或則只加載一半

原因1：設(shè)置登錄頁(yè)面的trailing = view.trailing(登錄頁(yè)面的寬度不能確定，只是相對(duì)的)

解決1：將這個(gè)約束刪掉，設(shè)置登錄頁(yè)面的寬度（width=view.width）

問(wèn)題2：快速登錄按鈕，在點(diǎn)擊時(shí)，文字出現(xiàn)移動(dòng)現(xiàn)象

解決1：自定義按鈕時(shí)，label贏先sizeToFit,再改變x，y的值。