Swift实战-小QQ(第1章):QQ登录界面

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1.新建小QQ项目

2.将所需用到的图片资源(resource)文件夹，添加到项目中.并新建一个登录页面：LoginViewController.swift

3.修改LoginViewController.swift代码为

import UIKit
class LoginViewController: UIViewController {

    //

}

4.将Main.storyboard的默认的view视图，关联为LoginViewController控制器，并拖控件进入view视图布局.

简单布局如下，

5.登录按钮圆角

1 class LoginViewController: UIViewController {
2     //登录按钮
3     @IBOutlet weak var btnLogin: UIButton!
4     override func viewDidLoad() {
5         //
6         btnLogin.layer.cornerRadius=4.0
7         btnLogin.layer.masksToBounds=true
8     }
9 }

6.运行一下看看效果：

7.完善App的LaunchScreen.xib和Logo图标设置
将LaunchScreen视图中的Label删除掉，只放一张图片即可

找到Supoorting Files目录下的Info.plist文件双击打开,添加节点：Bundle display name为“小QQ” ,并添加一个节点Icon file 设置为"[email protected]"也就是你要设置的Logo的图片名称。

8.添加初始动画,
*将“帐号view”，“密码view”和“登录按钮” 关联插座(IBOutlet)到controller

    @IBOutlet weak var btnLogin: UIButton!//登录按钮
    @IBOutlet weak var accountView: UIView!//帐号组View
    @IBOutlet weak var passwordView: UIView!//密码组View
    @IBOutlet weak var accountBoxView: UIView!//帐号盒子View

*在viewDidLoad方法里添加初始动画代码

 override func viewDidLoad() {
        //登录按钮圆边框
        btnLogin.layer.cornerRadius=4.0
        btnLogin.layer.masksToBounds=true
        //让2个view和1个button从下向上移
        UIView.animateWithDuration(0.8, animations: { () -> Void in
            //上移值
            let upValue:CGFloat=200.0
            //accountView上移
            var accountFrame:CGRect=self.accountView.frame
            accountFrame.origin.y=accountFrame.origin.y-upValue
            self.accountView.frame=accountFrame
            //passwordView上移
            var passwordFrame:CGRect=self.passwordView.frame
            passwordFrame.origin.y=passwordFrame.origin.y-upValue
            self.passwordView.frame=passwordFrame
            //btnLogin上移
            var btnLoginFrame:CGRect=self.btnLogin.frame
            btnLoginFrame.origin.y=btnLoginFrame.origin.y-upValue
            self.btnLogin.frame=btnLoginFrame
        })
    }

9.展开与收起accountBox(帐号盒子:用来显示已登录过的帐号，可进行帐号切换)

*在storyboad的LoginViewController的View视图上，添加一个UIView 命名为:accountBoxView

*将其关联插座(IBOutlet)到controller

*将帐号右侧的下拉按钮关联动作(IBAction)让它执行：showAccountBox方法：

 1  //点击下拉按钮弹出/隐藏帐号盒
 2     @IBAction func showAccountBox(sender: UIButton) {
 3         if(sender.selected)
 4         {
 5             UIView.animateWithDuration(0.8, animations: { () -> Void in
 6                 //1.将accountbox隐藏出来
 7                 self.accountBoxView.hidden=false
 8                 //2.将密码组往上移
 9                 var passwordFrame:CGRect=self.passwordView.frame
10                 passwordFrame.origin.y=passwordFrame.origin.y-82.0
11                 self.passwordView.frame=passwordFrame
12                 //3.将按钮往上移
13                 var btnLoginFrame:CGRect=self.btnLogin.frame
14                 btnLoginFrame.origin.y=btnLoginFrame.origin.y-82.0
15                 self.btnLogin.frame=btnLoginFrame
16             })
17 
18         }else{
19             UIView.animateWithDuration(0.8, animations: { () -> Void in
20                 //1.将accountbox显示出来
21                 self.accountBoxView.hidden=false
22                 //2.将密码组往下移
23                 var passwordFrame:CGRect=self.passwordView.frame
24                 passwordFrame.origin.y=passwordFrame.origin.y+82.0
25                 self.passwordView.frame=passwordFrame
26                 //3.将按钮往下移
27                 var btnLoginFrame:CGRect=self.btnLogin.frame
28                 btnLoginFrame.origin.y=btnLoginFrame.origin.y+82.0
29                 self.btnLogin.frame=btnLoginFrame
30             })
31         }
32         //将按钮选中状态改变
33         var nowState:Bool=self.btnLogin.selected
34         if(nowState==true)
35         {
36             self.btnLogin.selected=false
37         }else
38         {
39             self.btnLogin.selected=true
40         }
41     }