版权声明:本文为博主原创文章,未经博主允许不得转载。若有问题,请联系QQ1215192693 https://blog.csdn.net/qq_37523448/article/details/83614685
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框架布局。希望可以帮助到你们!谢谢您的阅读!