iOS Development (入門) — Log in & News Reader 介面實作
Presenter : Edward Chiang
本週學了用Xcode做出Log in畫面和News Reader的實作，簡單地回顧一下學到的東西 :P
做一個簡單的Log in 畫面
- 準備各種尺寸的APPIcon
- 新增View Controller & Image set (LogInCover) 給Log in介面
- Image 用Aspect Fill & Clip To Bounds 來讓圖不變形且把突出邊界的地方切掉
- 新增Text Field
- 使用者可輸入帳號(可放預設字: Username or email在place holder)
- 使用者輸入密碼可把字元保護起來(Secure Text Entry)
- 新增Button
- 在Auto Layout下，用constrains做排版
- 新增完Text Field & Button，拖拉到程式碼
- 新增程式碼：按下Log in後，判斷密碼是否正確
@IBAction func logIn(_ sender: AnyObject) {
if self.passwordTextField.text == “123” {
print(“OK”)
} else {
print(“Wrong password!”)
}
}
延伸閱讀：
- Swift 3 text field magic, part 1: Creating text fields with maximum lengths [Updated]
- Swift 3 text field magic, part 2: Creating text fields that accept only a specific set of characters
做一個簡單的News Reader
- 新增Label
- 用super view疊上scroll view在疊上view的方式，呈現畫面可滑動的效果
- 用stack view把News title, source, date&time包在一起處理
- constrains 修改優先順序
let newsConent = [“title” : “…”, “source” : “…”, “dateTime” : “…”, “content” : “…”, “sourceUrl” : “…”]
self.newsTitleLabel.text = newsContent[“title”]
self.newsSourceLabel.text = newsContent[“source”]
self.dateTimeLabel.text = newsContent[“dateTime”]
self.newsContentLabel.text = newsContent[“content”]
self.sourceFromButton.setTitle(“前往查看更多”, for: .normal)
}
延伸閱讀：
