我的筆記: Ep2_How to Build a Login Page

從程式碼建立 NavigationController

讓專案開啟時，不要去讀 storyboard

專案 → General → Deployment Info → 清空Main Interface

初始化windows, 並將frame設定為主要螢幕的大小

window = UIWindow(frame:UIScreen.main.bounds)

window 是用來顯示App所有畫面的變數(optional variable)

設定 windows 為 NavigationController (NavigationItem+ViewController)

設定 NavigationController的ViewController 為 ViewController.swift

windows?.rootViewController = UINavigationController(rootViewController:ViewController())

將 windows 顯示出來

window?.makeKeyAndVisible()

(此時的執行畫面，上面是NavigationItem(黑的)，下面是ViewController(灰色))

(因為2個都還沒有設定)

ViewController.swift

NavigationController 加入 TableViewController

將 Class ViewController:UIViewController 改成 Class ViewController:UITableViewController

(此時執行畫面，下面的變成TableViewController)

NavigationController 加入 BarButtonItem

navigationItem.leftBarButtonItem = UIBarButtonItem

(title:"Logout" , style:.Plain , target:self , action:#selector(handLogout))

func handLogout() {}

(此時執行畫面，上面不再是黑色的，而且左上方多了Logout按鈕)

------------------------ This is Separator Line ------------------------

跳頁

LogViewController.swift

建立 LoginViewController.swift

設定 LoginViewController 背景顏色

view.backgroundColor = UIColor(red:61/255 , green:91/255 , blue:151/255 , alpha:1 )

設定status的顏色

override var preferredStatusBarStyle:UIStatusBarStyle

{

return .lightContent

}

ViewController.swift

按 Logout 按鈕，跳至LoginViewController頁面

func handLogout()

{

let loginViewController = LoginViewController()

present(loginViewController , animated:true , completion:nil)

}

補充

將 UIColor 縮減

extension UIColor

{

convenience init(r:CGFloat , g:CGFload , b:CGFload)

{

self.init(red:r/255 , green:g/255 , blue:b/255 , alpha:1)

}

view.backgroundColor = UIColor(r:61 , g:91 , b:151)

------------------------ This is Separator Line ------------------------

建立 UIView

LoginViewController.swift
建立 UIView 變數
let myView = UIView()
設定 UIView 背景顏色
myView.backgroundColor = UIColor.whiteColor()
將 UIView 加到畫面
myView.translatesAutoresizingMaskInfoConstraints = false
view.addSubView(myView)
設定 UIView 圓角
myView.layer.cornerRadius = 5
myView.layer.masksToBounds = true

設定 UIView 座標和大小 ( 需寫在addSubView後面 )
myView.centerXAnchor.constraint( equalTo:view.centerXAnchor ).isActive = true
myView.centerYAnchor.constraint( equalTo:view.centerYAnchor ).isActive = true
myView.widthAnchor.constraint( equalTo:view.widthAnchor , constant:-24 ).isActive = true
myView.heightAnchor.constraint( equalToConstant:150 ).isActive = true

補充
將 UIView 寫到 viewDidLoad 外
let myView =
{
myView.backgroundColor = UIColor.whiteColor()
myView.translatesAutoresizingMaskInfoConstraints = false
view.addSubView(myView)
myView.layer.cornerRadius = 5
myView.layer.masksToBounds = true\
}()

func setupInputsContanerView()
{
設定 myView 中心點的X座標 = 畫面中心點的X座標
myView.centerXAnchor.constraint( equalTo:view.centerXAnchor ).isActive = true
設定 myView 中心點的Y座標 = 畫面中心點的Y座標
myView.centerYAnchor.constraint( equalTo:view.centerYAnchor ).isActive = true
設定 myView 寬度 = 畫面的寬度-24
myView.widthAnchor.constraint( equalTo:view.widthAnchor , constant:-24 ).isActive = true
設定 myView 高度 = 150
myView.heightAnchor.constraint( equalToConstant:150 ).isActive = true
}

最後viewDidLoad變成
viewDidLoad()
{
view.addSubView(myView)
setup myView()
}

------------------------ This is Separator Line ------------------------

建立 Button

let loginbRegisterBtn:UIButton =
{
let button = UIButton( type:UIButtonType.system )
button.backgroundColor = UIColor( r:80 , g:101 , b:161 )
button.setTitle( "Register" , for:.normal )
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitleColor( UIColor.whiteColor() , forState:.normal )
button.titleLabel?.font = UIFont.boldSystemFont( ofSize:17 )
return button
} ()

viewDidLoad()
{
view.addSubView(loginRegisterButton)
}

setUpLoginRegisterBtn()
{
設定 Button 中心點X座標 = 畫面中心點X標座
loginRegisterBtn.centerXAnchor.constraint( equalTo:view.centerXAnchor).isActive = true
設定 Button 頂點座標 = myView的底部座標
loginRegisterBtn.topAnchor.constraint( equalTo:myView.bottonAnchor , constant:12 ).isActive = true
設定 Button 寬度 = myView寬度
loginRegisterBtn.widthAnchor.constraint( equalTo:myView.width ).isActive = true
設定 Button 高度 = 50
lgoinRegisterBtn.heightAnchor.constraint( equalToConstant:50 ).isActive = true
}

------------------------ This is Separator Line ------------------------