ios学习第二天-登陆界面与功能
看看今天完成的登陆界面：
为了完成这个界面，可谓是伤透了脑经，有几个问题需要解决：
1.怎么从主界面跳转到主界面；
2.界面怎么从上到下布局；
3.设置按钮点击事件；
4.用户点击后获取账号和密码，拿到账号和密码后怎么网络请求与服务器交互。
我可是刚刚开学习ios第二天，一下来了这么多的任务，完全一脸懵逼了，完成这些起码也要ios初级开发吧。但是老大既然下了这个任务，咱们只能拼命做了。
1.咱们来搭建主界面，我这里采用的storyboard搭建主界面，主要是用来测试，直接拖进来三个按钮，修改名字，这里不做详细说明。
2.为login按钮设置点击时间，并且创建login的Viewcontroller,下面是我的跳转到login界面的代码
3.接下来咱们就开始编写登录界面了，首先创建最上面的登录文本内容，我这里采用的UILabel控件
//创建顶部的登陆文本
- (void) createLabel
{
UILabel *label = [[UILabel alloc]init];//第一步初始化控件
label.font = [UIFont systemFontOfSize:24];//设置字体大小
label.text = @"登录";//设置文本内容
label.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 100);//设置label的大小
label.textAlignment = NSTextAlignmentCenter;//设置文字居中显示
[self.view addSubview:label];//将label添加到主view中去
self.lb = label;
}
//用户名输入框
- (void)createAccountEt
{
UITextField *text = [[UITextField alloc]init];//初始化输入框
text.borderStyle = UITextBorderStyleRoundedRect;//设置输入框的样式
text.backgroundColor = [UIColor whiteColor];//设置输入框的背景颜色
text.placeholder = @"请输入用户名";//设置输入框的提示内容
[self.view addSubview:text];//讲输入框添加到主view中去
text.translatesAutoresizingMaskIntoConstraints = NO;//如果你定义的view想用autolayout，就将translatesAutoresizingMaskIntoConstraints设为NO，如果你使用的不是autolayout，就将translatesAutoresizingMaskIntoConstraints设为YES
NSLayoutConstraint *centx = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
[self.view addConstraint:centx];//设置输入框横向居中
NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
[self.view addConstraint:right];//设置输入框距离右边20
NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
[self.view addConstraint:left];//设置输入框距离左边20
NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.lb attribute:NSLayoutAttributeBottom multiplier:1 constant:0];
[self.view addConstraint:top];//设行代码是用来设置距离顶部的距离的，我这里不需要距离，所以设置为0
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:45];
[self.view addConstraint:height];//设置输入框的高度
self.accountEt = text;
}
//用户名输入框
- (void)createAccountEt
{
UITextField *text = [[UITextField alloc]init];
text.borderStyle = UITextBorderStyleRoundedRect;
text.backgroundColor = [UIColor whiteColor];
text.placeholder = @"请输入用户名";
[self.view addSubview:text];
text.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *centx = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
[self.view addConstraint:centx];
NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
[self.view addConstraint:right];
NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
[self.view addConstraint:left];
NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.lb attribute:NSLayoutAttributeBottom multiplier:1 constant:0];
[self.view addConstraint:top];
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:45];
[self.view addConstraint:height];
self.accountEt = text;
}
//登陆按钮
- (void) crateLoginBtn
{
UIButton *loginBtn = [[UIButton alloc]init];//初始化button
[loginBtn setTitle:@"登录" forState:UIControlStateNormal];//设置按钮文本，并指定状态
[loginBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];//设置正常状态文字的颜色绿色
[loginBtn setTitleColor:[UIColor yellowColor] forState:UIControlStateHighlighted];//设置被点击状态文字的颜色绿色
loginBtn.backgroundColor = [UIColor blueColor];//设置按钮的背景颜色
[loginBtn.layer setCornerRadius:5];//设置button的圆角
[self.view addSubview:loginBtn];
loginBtn.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *loginBtnConst = [NSLayoutConstraint constraintWithItem:loginBtn attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
[self.view addConstraint:loginBtnConst];
NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:loginBtn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
[self.view addConstraint:right];
NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:loginBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
[self.view addConstraint:left];
NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:loginBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.pwdEt attribute:NSLayoutAttributeBottom multiplier:1 constant:20];
[self.view addConstraint:top];
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:loginBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:45];
[self.view addConstraint:height];
self.btn = loginBtn;
[self.btn addTarget:self action:@selector(loginCommit)
forControlEvents:UIControlEventTouchUpInside];//为button设置点击点击事件，如果被点击将会调用loginCommit方法
}
4.如果用户点击登录按钮，我们将最先获取用户输入的用户名和密码，然后进行网络交互
- (void)loginCommit
{
NSURL *url = [NSURL URLWithString:@"http://。。。/login"];//设立是我们的域名
NSString *account = self.accountEt.text;//获取用户名
NSString *pwd = self.pwdEt.text;//获取密码
NSLog(@"%@",[SDKUtil getNowTimeTimestamp]);//获取当前时间戳
NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:url cachePolicy:0 timeoutInterval:30];//创建request对象
//设置请求方式为POST
request.HTTPMethod = @"POST";
//设置请求内容格式
[request setValue:@"application/json;charset=utf-8" forHTTPHeaderField:@"Content-Type"];
request.HTTPBody = [@"account=123456&password=123456&mark1=ddd&time=1234567890" dataUsingEncoding:NSUTF8StringEncoding];//设立是请求参数
NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
//判断错误
if (error) {
NSLog(@"请求出错:%@", error);
return;
}
NSLog(@"data=%@",[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding]);//服务器返回的结果
}];
//7.执行任务
[dataTask resume];
}
总结：讲到这里已经完成了整个登录界面的流程，其中说说我在这里遇到的坑。
1.设置点击时间无反应，原因是因为点击事件被劫持了，解决方法就是跳转到login界面时的方法错误了，错误方法是：addSubview方法添加viewController；
2.第二就是网络请求部分，我刚开始是直接打印的网络请求结果data，并不是我想要的，需要经过转换。