iOS Development (入門) – Log in & News Reader 介面實作

Presenter : Edward Chiang

本週學了用Xcode做出Log in畫面和News Reader的實作,簡單地回顧一下學到的東西 😛

做一個簡單的Log in 畫面

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-16-%e4%b8%8b%e5%8d%883-58-28  %e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-16-%e4%b8%8b%e5%8d%883-39-25  %e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-16-%e4%b8%8b%e5%8d%883-33-56

  1. 準備各種尺寸的APPIcon
  2. 新增View Controller & Image set (LogInCover) 給Log in介面
  3. Image 用Aspect Fill & Clip To Bounds 來讓圖不變形且把突出邊界的地方切掉
  4. 新增Text Field
    1. 使用者可輸入帳號(可放預設字: Username or email在place holder)
    2. 使用者輸入密碼可把字元保護起來(Secure Text Entry)
  5. 新增Button
  6. 在Auto Layout下,用constrains做排版
  7. 新增完Text Field & Button,拖拉到程式碼
  8. 新增程式碼:按下Log in後,判斷密碼是否正確

    @IBAction func logIn(_ sender: AnyObject) {

        if self.passwordTextField.text == “123″ {

            print(“OK")

        } else {

            print(“Wrong password!")

        }

    }

延伸閱讀:

  1. Swift 3 text field magic, part 1: Creating text fields with maximum lengths [Updated]
  2. Swift 3 text field magic, part 2: Creating text fields that accept only a specific set of characters

做一個簡單的News Reader

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-16-%e4%b8%8b%e5%8d%884-21-23%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-16-%e4%b8%8b%e5%8d%884-22-51

  1. 新增Label
  2. 用super view疊上scroll view在疊上view的方式,呈現畫面可滑動的效果
  3. 用stack view把News title, source, date&time包在一起處理
  4. 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)

    }

 

延伸閱讀:

  1. iOS 9 新功能 : 堆疊視圖介紹 (Stack Views)

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-16-%e4%b8%8b%e5%8d%887-46-02   %e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-16-%e4%b8%8b%e5%8d%887-46-16

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s