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

1.新建小QQ项目

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

3.修改LoginViewController.swift代码为

import UIKit
class LoginViewController: UIViewController {

    //

}

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

简单布局如下，

5.登录按钮圆角

 class LoginViewController: UIViewController {
     //登录按钮
     @IBOutlet weak var btnLogin: UIButton!
     override func viewDidLoad() {
         //
         btnLogin.layer.cornerRadius=4.0
         btnLogin.layer.masksToBounds=true
     }
 }

6.运行一下看看效果：

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

找到Supoorting Files目录下的Info.plist文件双击打开,添加节点：Bundle display name为“小QQ” ,并添加一个节点Icon file 设置为"AppIcon-129x29@2x.png"也就是你要设置的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方法：

  //点击下拉按钮弹出/隐藏帐号盒
     @IBAction func showAccountBox(sender: UIButton) {
         if(sender.selected)
         {
             UIView.animateWithDuration(0.8, animations: { () -> Void in
                 //1.将accountbox隐藏出来
                 self.accountBoxView.hidden=false
                 //2.将密码组往上移
                 var passwordFrame:CGRect=self.passwordView.frame
                 passwordFrame.origin.y=passwordFrame.origin.y-82.0
                 self.passwordView.frame=passwordFrame
                 //3.将按钮往上移
                 var btnLoginFrame:CGRect=self.btnLogin.frame
                 btnLoginFrame.origin.y=btnLoginFrame.origin.y-82.0
                 self.btnLogin.frame=btnLoginFrame
             })

         }else{
             UIView.animateWithDuration(0.8, animations: { () -> Void in
                 //1.将accountbox显示出来
                 self.accountBoxView.hidden=false
                 //2.将密码组往下移
                 var passwordFrame:CGRect=self.passwordView.frame
                 passwordFrame.origin.y=passwordFrame.origin.y+82.0
                 self.passwordView.frame=passwordFrame
                 //3.将按钮往下移
                 var btnLoginFrame:CGRect=self.btnLogin.frame
                 btnLoginFrame.origin.y=btnLoginFrame.origin.y+82.0
                 self.btnLogin.frame=btnLoginFrame
             })
         }
         //将按钮选中状态改变
         var nowState:Bool=self.btnLogin.selected
         if(nowState==true)
         {
             self.btnLogin.selected=false
         }else
         {
             self.btnLogin.selected=true
         }
     }

源码下载地址：http://download.csdn.net/detail/fangwulongtian/8583251

转载请注明来源：http://www.cnblogs.com/wuxian/p/4322627.html