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 設置為"[e-mail]"也就是你要設置的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