IOS登陸介面Masonry框架
阿新 • • 發佈：2018-12-18
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框架佈局。希望可以幫助到你們！謝謝您的閱讀！