IOS登陆界面Masonry框架

1，登陆界面的设计
2，输入框（账号，密码）
3，点击按钮框（确认）

一，此章节主要详细的描述IOS移动开发时，利用Masonry框架布局，操作写登陆界面，这样更美观直接明了。
二，登陆界面在移动开发中也是很常见的一部分，密不可分，体现出了登陆的重要性。

如下所示：
1，view层（LoginView.h）

#import <UIKit/UIKit.h>

//设置代理方法
@protocol LoginViewDelegate <NSObject>

-(void)onLoginClick;

@end


@interface LoginView : UIView

//设置代理
@property (nonatomic, weak) id<LoginViewDelegate> delegate;

@property(strong,nonatomic) UITextField *mAccountTF;

@property(strong,nonatomic) UITextField *mPasswordTF;

@end

2,view层（LoginView.m）

#import "LoginView.h"

#ifdef __OBJC__
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h"
#endif

@implementation LoginView

-(instancetype) init{
    self = [super init];
    if(self){
        [self initView];
    }
    return self;
}


-(void)initView{
   //sperator 3 part
    UIView *topView = [[UIView alloc] init];
    [self addSubview:topView];
    //比例1:2:1
    [topView makeConstraints:^(MASConstraintMaker *make){
        make.left.equalTo(self).offset(10);
        make.right.equalTo(self).offset(-10);
        make.top.equalTo(self).offset(0);
        make.height.equalTo(self.height).multipliedBy(0.25);
    }];
    
    UILabel *topLabel = [[UILabel alloc] init];
    topLabel.textColor = [UIColor whiteColor];
    topLabel.font = [UIFont fontWithName:@"Helvetica" size:20];
    topLabel.text = @"BW Thermometer";
    [topView addSubview:topLabel];
    
    [topLabel makeConstraints:^(MASConstraintMaker *make){
        make.bottom.equalTo(topView.bottom);
        make.centerX.equalTo(topView.centerX);
        make.width.equalTo(@180);
        make.height.equalTo(@25);
    }];
    
    UIView *middleView = [[UIView alloc] init];
    [self addSubview:middleView];
    //比例1:2:1
    [middleView makeConstraints:^(MASConstraintMaker *make){
        make.left.equalTo(self).offset(10);
        make.right.equalTo(self).offset(-10);
        make.top.equalTo(topView.bottom);
        make.height.equalTo(self.height).multipliedBy(0.5);
    }];
    
    UIView *contentView = [[UIView alloc] init];
    [middleView addSubview:contentView];
    
    [contentView makeConstraints:^(MASConstraintMaker *make){
        make.centerY.equalTo(middleView.centerY);
        make.left.equalTo(middleView).offset(0);
        make.right.equalTo(middleView).offset(0);
        make.height.equalTo(@220);
    }];
    
    
    UIView *accountView = [[UIView alloc] init];
    [contentView addSubview:accountView];
    
    [accountView makeConstraints:^(MASConstraintMaker *make){
        make.top.equalTo(contentView).offset(0);
        make.left.equalTo(middleView).offset(0);
        make.right.equalTo(middleView).offset(0);
        make.height.equalTo(@55);
    }];
    
    
    UILabel *accountLable = [[UILabel alloc] init];
    accountLable.textColor = [UIColor whiteColor];
    accountLable.font = [UIFont fontWithName:@"Helvetica" size:18];
    accountLable.text = @"Account";
    [accountView addSubview:accountLable];
    
    [accountLable makeConstraints:^(MASConstraintMaker *make){
        make.centerY.equalTo(accountView.centerY);
        make.left.equalTo(accountView).offset(20);
        make.width.equalTo(@80);
        make.height.equalTo(@25);
    }];
    
    self.mAccountTF = [[UITextField alloc] init];
    self.mAccountTF.textColor = [UIColor whiteColor];
    self.mAccountTF.placeholder = @"Please input you account";
    [accountView addSubview:self.mAccountTF];
    
    [self.mAccountTF makeConstraints:^(MASConstraintMaker *make){
        make.centerY.equalTo(accountView.centerY);
        make.left.equalTo(accountLable).offset(90);
        make.right.equalTo(accountView).offset(-20);
        make.height.equalTo(@54);
    }];
    
    UIView *lineOne =[[UIView alloc] init];
    lineOne.backgroundColor = [UIColor whiteColor];
    [accountView addSubview:lineOne];
    
    [lineOne makeConstraints:^(MASConstraintMaker *make){
        make.top.equalTo(self.mAccountTF).offset(55);
        make.left.equalTo(accountView).offset(0);
        make.right.equalTo(accountView).offset(0);
        make.height.equalTo(@1);
    }];
    
    UIView *passwordView = [[UIView alloc] init];
    [contentView addSubview:passwordView];
    
    [passwordView makeConstraints:^(MASConstraintMaker *make){
        make.left.equalTo(middleView).offset(0);
        make.right.equalTo(middleView).offset(0);
        make.top.equalTo(accountView.bottom).offset(20);
        make.height.equalTo(@55);
    }];
    
    UILabel *passwordLable = [[UILabel alloc] init];
    passwordLable.textColor = [UIColor whiteColor];
    passwordLable.font = [UIFont fontWithName:@"Helvetica" size:18];
    passwordLable.text = @"Password";
    [passwordView addSubview:passwordLable];
    
    [passwordLable makeConstraints:^(MASConstraintMaker *make){
        make.centerY.equalTo(passwordView.centerY);
        make.left.equalTo(passwordView).offset(20);
        make.width.equalTo(@80);
        make.height.equalTo(@25);
    }];
    
    self.mPasswordTF = [[UITextField alloc] init];
    self.mPasswordTF.textColor = [UIColor whiteColor];
    self.mPasswordTF.keyboardType = UIKeyboardTypeNumbersAndPunctuation;
    self.mPasswordTF.borderStyle = UITextBorderStyleNone;
    self.mPasswordTF.secureTextEntry = YES;
    self.mPasswordTF.placeholder = @"Please input you password";
    [passwordView addSubview:self.mPasswordTF];
    
    [self.mPasswordTF makeConstraints:^(MASConstraintMaker *make){
        make.centerY.equalTo(passwordView.centerY);
        make.left.equalTo(accountLable).offset(90);
        make.right.equalTo(passwordView).offset(-20);
        make.height.equalTo(@50);
    }];
    
    UIView *lineTwo =[[UIView alloc] init];
    lineTwo.backgroundColor = [UIColor whiteColor];
    [passwordView addSubview:lineTwo];
    
    [lineTwo makeConstraints:^(MASConstraintMaker *make){
        make.top.equalTo(self.mPasswordTF).offset(55);
        make.left.equalTo(passwordView).offset(0);
        make.right.equalTo(passwordView).offset(0);
        make.height.equalTo(@1);
    }];
    
    UIButton *mLoginBt = [[UIButton alloc] init];
    mLoginBt.backgroundColor = [UIColor redColor];
    mLoginBt.layer.cornerRadius = 10;
    [mLoginBt setTitle:@"LOGIN" forState:UIControlStateNormal];
    [middleView addSubview:mLoginBt];
    
    [mLoginBt makeConstraints:^(MASConstraintMaker *make){
        make.right.equalTo(middleView).offset(-10);
        make.left.equalTo(middleView).offset(10);
        make.top.equalTo(lineTwo.bottom).offset(50);
        make.height.equalTo(@50);
    }];
    
    
    UIView *bottomView = [[UIView  alloc] init];
    [self addSubview:bottomView];
    
    [bottomView makeConstraints:^(MASConstraintMaker *make){
        make.left.equalTo(self).offset(10);
        make.right.equalTo(self).offset(-10);
        make.top.equalTo(middleView.bottom);
        make.height.equalTo(self.height).multipliedBy(0.25);
    }];
    
    [mLoginBt addTarget:self action:@selector(onLoginClick) forControlEvents:UIControlEventTouchUpInside];
}

//登录
-(void)onLoginClick{
    if(self.delegate){
        [self.delegate onLoginClick];
    }
}

@end

3，controller层（ViewController.h）

#import <UIKit/UIKit.h>
#import "LoginView.h"

@interface ViewController : UIViewController

@property(nonatomic,strong) LoginView *loginView;

@end

4，controller层（ViewController.m）

#import "ViewController.h"
#import <Charts/Charts-Swift.h>

@interface ViewController ()<LoginViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initView];
}
-(void)initView{
    //grayColor background
    self.view.backgroundColor = [UIColor grayColor];
    [self loginViewd];
    self.loginView.frame = self.view.bounds;
    [self.view addSubview:self.loginView];
    self.loginView.delegate = self;
}
-(LoginView *)loginViewd{
    if(self.loginView==nil){
        self.loginView=[[LoginView alloc] init];
    }
    return self.loginView;
}
/*
    代理
 */
-(void)onLoginClick{
    NSLog(@"打印出来错误了吧!");
}
@end

注释：切记引入头文件，导入第三方框架，引入Masonry框架布局，如果对Masonry不熟悉，可以详细先去了解下。具体操作基本就这些了。

结束语： 此本文章阐述到此为止，登陆界面的设计布局完毕，讲解了利用Masonry框架布局。希望可以帮助到你们！谢谢您的阅读！