IOS-qq登录界面

++2016.7.17
++ by side @IOS-qq登录界面

===================================

我们现在越来越多的人离不开qq,微信等社交软件，那么qq到底是怎么开发出来的呢？

今天我们介绍qq的登录界面的简单开发过程(其实是作者水平有限)：

下面放出成果图

qq登录界面

源代码：

//
//  ViewController.m
//  QQ界面
//
//  Created by lanou on 16/7/12.
//  Copyright © 2016年 lanou. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

<UINavigationControllerDelegate,    UIImagePickerControllerDelegate>
//创建控件
@property(nonatomic,strong) UIButton*login,*header;
@property(nonatomic,strong)UILabel *user,*password;
@property(nonatomic,strong) UITextField *usertext ,*passwordtext;
@property(nonatomic,strong)UIImageView *imageView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//账号输入框采用默认键盘，密码输入框采用数字键盘兵能密文显示，两个文本框都有文本输入时打印出来，否则弹出如图提醒框
//登录按钮设置（背景图片、监听事件、）

self.login =[[UIButton alloc]initWithFrame:CGRectMake(100, 400, 200, 150)];
[self.login setImage:[UIImage imageNamed:@"login_btn_blue_nor.png"] forState:UIControlStateNormal];
self.header =[[UIButton alloc]initWithFrame:CGRectMake(160, 50, 80, 80)];
[self.header setBackgroundImage:[UIImage imageNamed:@"login_header.png"] forState:UIControlStateNormal ];


//设置圆形半径
self.header.layer.cornerRadius/*圆形半径*/=40;
//切割（伪装）圆形半径外的部分（将按钮的一层边角伪装）

self.header.layer.masksToBounds=YES;

//添加点击事件 去访问系统相册
[self.header addTarget:self action:@selector(setUserImage)
      forControlEvents:(UIControlEventTouchUpInside )];

//添加登陆监听事件

[self.login addTarget:self action:@selector(loginAction) forControlEvents:(UIControlEventTouchUpInside )];


//标签设置（标签名称、标签位置与大小、标签标题（文本）、）
self.user = [[UILabel alloc]initWithFrame:CGRectMake(40, 205, 80, 30)];
self.user.text=@"用户名:";
self.password = [[UILabel alloc]initWithFrame:CGRectMake(40, 255, 80, 30)];
 self.password.text =@"密码:";






//文本框设置（位置与大小、获取UITextField的文本，设置输入框键盘类型设置占位符 密文输入）
self.usertext= [[UITextField alloc]initWithFrame:CGRectMake(110, 200, 200, 40)];
//设置提示字
self.usertext.placeholder=@"请输入账号";

设置键盘类型
self.usertext.keyboardType = UIKeyboardTypeDefault;

    self.passwordtext=[[UITextField alloc]initWithFrame:CGRectMake(110, 250, 200, 40)];
self.passwordtext .placeholder=@"请输入密码";

[self.passwordtext setSecureTextEntry:YES];
 //设置键盘
    self.passwordtext.keyboardType= UIKeyboardTypeNumberPad;


self.passwordtext.enablesReturnKeyAutomatically=YES;
[self.usertext becomeFirstResponder ];

//添加到视图

    [self.view addSubview:self.login];
[self.view addSubview:self.user];
[self.view addSubview:self.password];
[self.view addSubview:self.passwordtext];
[self.view addSubview:self.usertext];
[self.view addSubview:self.header];
[self.view addSubview:self.imageView];


}
   //登陆按钮事件

-(void)loginAction{

NSString *userstring,*passtring;
userstring = self.usertext.text;
passtring = self.passwordtext.text;
if (![userstring isEqualToString:@""]&&![passtring isEqualToString:@""]) {
    NSLog(@"用户:%@",userstring);
    NSLog(@"密码:%@",passtring);
}else{
 UIAlertController *alertControler =[UIAlertController alertControllerWithTitle:@"警告" message:@"账号或密码输入错误，请重新输入" preferredStyle: UIAlertControllerStyleAlert];
    [self presentViewController:alertControler animated:YES completion:nil];
    
    
    UIAlertAction *okAlertion=[UIAlertAction actionWithTitle:@"确认" style: UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        
    }];
    UIAlertAction *cancerAlertion=[UIAlertAction actionWithTitle:@"返回" style:  UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        
    }];

    //给弹框添加行为
    [alertControler addAction:okAlertion];
    [alertControler addAction:cancerAlertion]
 }                         }
                                   
 //访问系统相册方法
 -(void )setUserImage{
    //使用图片代理-查看协议-并实现“didFinishPickingImage”事件

UIImagePickerController *imagePicker= [[UIImagePickerController alloc] init];

imagePicker.delegate = self;
//弹出系统相册
[self presentViewController:imagePicker animated:YES completion:nil/*弹出系统相册后的操作*/];
//completion:^{运行的代码块}

}
//这个方法是协议UIImagePickerControllerDelegate里面的，选择结束的时候会自动调用

 - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(nullable NSDictionary<NSString *,id> *)editingInfo {

//设置头像
[self.header setBackgroundImage:image forState:UIControlStateNormal  ];
//将系统相册消失掉(消失弹框)

 [picker dismissViewControllerAnimated:YES completion:nil];

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

@end

源代码1
源代码2

在开发此qq界面时就需要注意以下几点：

• 在开发之前自己应该有大概的结构框架，尤其是在设计UI界面的时候
• 在开发是要有步骤的进行
• 在实现相同功能的条件下尽量减少代码的冗余量
• 定义好所需要的控件
• 为定义的控件设置属性以及布局的控制与调试
• 添加到屏幕上，并预览界面样式
• 为控件添加监听事件以及功能方法的实现
• 注意特殊方法的实现，以及相关协议内所需要实现的方法
• 调试与改善

========================================@小怪兽
ps:因作者能力有限，有错误的地方请见谅