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.登陸按鈕圓角

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 設置爲"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方法：

 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     }

 

源碼下載地址：http://download.csdn.net/detail/fangwulongtian/8583251

轉載請註明來源：http://www.cnblogs.com/wuxian/p/4322627.html