iOS学习记录-QQ登录界面

今天来完成一个简单的QQ的登录界面。
首先我们需要看一下QQ在登录启动时的界面是个什么样的效果。


iOS学习记录-QQ登录界面_第1张图片

iOS学习记录-QQ登录界面_第2张图片

在QQ刚启动时会展示上图的一个启动图的效果,然后展示下图需要输入账号和密码的界面。下面来开始创建一个工程进行搭建。

在显示的界面中有一个image,3个Button,两份Text。
把各个空间拖进view中,修改每一个控件的属性。


iOS学习记录-QQ登录界面_第3张图片

然后给登录按钮添加单击事件。

//  ViewController.m
//  QQ userInterface
//
//  Created by 袁跃 on 16/4/24.
//  Copyright © 2016年 iflytek. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
- (IBAction)login;
@property (weak, nonatomic) IBOutlet UITextField *txtQQ;
@property (weak, nonatomic) IBOutlet UITextField *txtPassword;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)login {
    NSString* txtQQ = self.txtQQ.text;
    NSString* txtpsw = self.txtPassword.text;
    
    NSLog(@"QQ:%@ 密码:%@",txtQQ,txtpsw);
    [self.view endEditing:YES];
}
@end

这就搭建好了一个简单的QQ的登录界面。效果如下


iOS学习记录-QQ登录界面_第4张图片

iOS学习记录-QQ登录界面_第5张图片

你可能感兴趣的:(iOS学习记录-QQ登录界面)