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,并不是我想要的,需要经过转换。

猜你喜欢

转载自blog.csdn.net/qq_37792992/article/details/80600395
今日推荐