今天專案的 Github link
其實哦
寫 Swift 也有幾個禮拜了
我一直覺得使用 Interface Builder 的確很方便
但是在程式面與視覺面之間的溝通常常會漏東漏西的
比方說如果要設定 reusable identifier 時
除了程式裡面的字串要設定以外，還要再到 storyboard 裡設定同樣的字串
一個簡單的小程式可能不超過 20 個 View 的情況下
還可以這樣做，當程式長得非常大的時候，好像就很難注意到這件事，
而且 View 太多 storyboard 就會開始變慢….
因此今天要來試著在 Swift 中
如何不用 Storyboard，來打造我們的程式
(當然 xib/nib 還是會用到，只是我們單純捨棄 storyboard，用程式來控制流程)
首先，一樣先建立一個測試專案
接著我們要動到的程式碼是 AppDelegate.swift:
編輯它:
@UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? var viewController: ViewController? func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // Override point for customization after application launch.
請大家先看看下面的小短片，注意一下過場動畫的流暢度
一開始是沒有加過場動畫，後來改程式碼變成有過場動畫
direct link
後來發現給一個預設的 backgroundColor 後就不會發生殘影的問題了
是因為 push 的 view 沒有 backgroundColor
和同事討論後發現:
Apple Developer Reference
UIView 的 backgroundColor 的 default 值是 null!
Discussion Changes to this property can be animated. The default value is nil, which results in a transparent background color.
所以是這個原因導致在轉場的時候有殘影
不過切換 View 時 target view 沒有 backgroundColor 的情況應該比較少吧…(?)
剛好在寫鐵人賽的 app 想先把流程弄出來時遇到了這個雷 XD
本日專案的 Github link
由於 Swift 剛推出不到一年
有許多的 third-party library 一定還沒轉換成 Swift
或者是作者沒心力轉會成 Swift
但是有些套件非常方便，那在 Swift 要怎麼使用 Objective-C 的套件呢?
Xcode 有提供橋接的方式，非常好用
接下來就介紹一下如何使用吧!
以下的例子是一個叫做 Reachability 的套件
它可以簡單地幫我們判斷是否有網路連線 3g or wifi 之類的
所以我們先下載這個套件吧!
https://github.com/tonymillion/Reachability
下載解壓縮後
將 .h 和 .m 檔拖曳進 Xcode 專案中
接下來 Xcode 就會問一個非常重要的問題!:
是否要建立橋接的 .h 檔案!
當然是選擇建立囉~
此時的專案結構就會變成這樣:
再來編輯 bridge-header.h 檔
將想要橋接的 objc 套件 import 進去
#import "Reachability.h" 這樣我們就可以在 Swift 中直接使用該套件的類別與方法了!
接下來就讓我們試試看!
在 ViewController 中加入以下程式碼:
// // ViewController.swift // BridgeObjcDemo // // Created by Jerry Huang on 2014/10/18.
今天的主題延續昨天的 Navigation + TableView
我們要來客製化 TableViewCell
通常 TableView 可以被拿來做很多事情，不僅只是像是 ListView 而已
而 TableViewCell 可以做更深度的切版，排列元素
因此自定 TableViewCell 是一件算是還蠻重要的事情
下面的 Code 是延續昨天的專案
我先把已更改過的程式碼貼上來:
import UIKit class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate { @IBOutlet var tableView: UITableView! var arr = ["A", "B", "C"] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated.
今天要把 Navigation View 和 Table View 結合起來!
把 NavigationController 拉進 Storyboard
將程式進入點指向 NavigationController
把原本程式自動產生的 UIViewController 刪除
把自動產生的 TableViewController 刪除!
拉一個新的 UIViewController
將 NavigationController 的 RootViewController 指向新的 ViewController
把 TableView 拉進 ViewController
再將 TableViewCell 拉進 TableView
再點選 ViewController, 到右上角中找尋 Custom Class
將 ViewController.swift 指定給該 ViewController
接著把 UITableView 引進程式碼裡做關聯
再來就是實作 Table 的 data 了
class ViewController: UIViewController, UITableViewDataSource { class ViewController: UIViewController, UITableViewDataSource { @IBOutlet var tableView: UITableView! var arr = ["A", "B", "C"] override func viewDidLoad() { super.
昨天我們實際操作了 tableView 的實作，今天要加入換頁
意思就是假設我點了名為 “99” 的 cell，點擊後會跳轉到另外一頁，同樣顯示 “99”
所以除了跳頁外，還要加入值的傳遞
首先打開昨天的專案，我們要繼續下去
回到 storyboard 中，昨天我們加入了 dataSource，今天要加入 delegate:
回到程式碼中 ViewController.swift
在 class 的宣告再加上 UITableViewDataSource
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate { 再來就要設計換頁的流程了
回到 storyboard
拉一個新的 ViewController 到空白處
接著點擊左邊的 TableViewCell, 按住 ctrl + 拖曳，拉到剛剛建立的 ViewController 上
選擇 show detail
就會長這樣:
再來新增一個 ViewController
接著讓新的 storyboard viewcontroller 連接到剛剛新增的 DetailViewController 程式碼
記得先點選 ViewController
在 storyboard 的 DetailViewController 中拉一個 label
並且將該 label 連接到 DetailViewController 的程式碼中
因此 DetailViewController 就會變這樣:
今天要來練習新的東西 - TableView
據同事說明，TableView 是最常用到的 View 之一
在我們的實戰開發中也會用到 TableView
因此今天就先簡單的來建立出單頁純顯示資料的 TableView
TableView 的概念大概是如下圖:
長得有點像 ListView 但是每一行又可以多切開，放一些東西
每一行都稱之為一個 TableViewCell
今天就來要簡單寫一個資料已經預先定義好，並且會顯示在 view 上面的 TableView
要進行下去之前當然就先開一個新的練習專案囉
開啟完專案後，首先第一件事情就是進 storyboard
選擇 TableView 拉進 storyboard 裏
接著再選擇 TableViewCell 拉進 TableView 中
透過此圖，我們了解到可以打開 storyboard 的 tree 來看看它們之間的關係
下面此步驟很重要，資料的連接就靠這條線:
先選取 TableView (可以使用階層樹或是點擊 storyboard)，然後選擇右方的 connection inspector (右上角的最右邊的那一個按鈕)
裡頭有個 dataSource 以及 delegate
我們先按住 dataSource 右邊的空心圓按鈕，拖曳拉到 storyboard 中的 ViewController，如上圖所示
這樣子等等在程式碼中產生的資料才會有和 storyboard 的 UI 做連結
最後一個和 storyboard 相關的操作是將 storyboard 的 TableView 和 程式碼做連結，好方便我們在程式碼中對 storyborad 的 TableView 做操作
延續昨天的主題，今天我們要做的事情是：
爲新的 ViewController 實際加入程式碼 (ViewController2.swift) 加入一個 button 來控制是否前進下一頁或後退 我們先新增一個檔案:
接著選擇 CocoaTouch Class:
回到 storyboard, 選擇第二個 ViewController
並按照下圖，將 Class 指定給 View2Controller
這樣子 storyboard 的 View2 就會指定到 View2Controller 了
我們在 View2Controller 的 viewDidLoad 方法中加入一行程式碼
來驗證他是否有吃到 View2Controller
self.title = "View2 by me" Run 起來看的話就會是這樣:
的確是有吃到程式碼的
再來就是要加入按鈕了:
我們先拉一個 Button 進 View2Controller
並且將該 Button 拉進 View2Controller 的 code
設定該 button 爲 Action, 並且名稱是 ‘backToView’
意即我們要讓點下 View2Controller 的 Button 行為為回到上一個 View
另外對 View2 為他加入一個 storyboard ID, View2，等等會用到:
今天來試著拉拉看 Navigation View
什麼是 Navigation View?
就是類似下圖的東西:
用來控制 View 之間的流程
今天我們繼續使用 storyboard 來簡單拉拉 Navigation View
首先先開一個新 project 吧!
接著我們到 storyboard，選擇 ViewController
再來我們要嵌入 Navigation View
所以要選擇: Edit -> Embed in -> Navigation View
選擇後，就會發現 storyboard 的 layout 改變了
Navigation View 實際上是透過 NavigationController 來控制
原本程式的進入點是 ViewController
由於我們要使用 Navigation View
因此透過 Xcode 將 NavigationController 嵌進去
讓程式進入點變成 NavigationController
再透過 NavigationController 將程式導到 ViewController
接下來我們命名一下 ViewController:
然後我們從右下角的 Object library 選擇 Bar Button items 加入
並將該物件拉到 NavigationBar 的右方
今天來放一些基本的元件:
放入一個文字輸入框、文字標簽、按鈕，
在文字框輸入一些字後，按下按鈕後，會在文字標簽顯示剛剛輸入的內容：
首先使用右下角的 Object library 中將上述三種元件拉到 storyborad 中
圖中依順序是文字標簽、文字輸入框、按鈕
接著我們要使用到的文件是文字標簽以及文字輸入框，另外要將按鈕加入事件
因此程式的流程是:
按下按鈕後-> 執行按鈕事件 -> 抓到文字輸入框的輸入內容 -> 將文字標簽的內容改變成文字輸入框的內容
因此先使用昨天的方式，將文字標簽及文字輸入框拉到 ViewController 中以便使用它們，在圖中的程式碼 12, 13 行：
這樣我們就可以控制文字標簽的文字以及拿到輸入框的文字了
再來就是最重要的按鈕事件了!
一樣使用 ctrl + 拖曳的方式將按鈕拉到程式碼中，但是這次是要選擇 「IBAction」，是事件的意思:
接著就會產生出一段 function:
名為 titleButton, 我們在方法中輸入一行程式碼:
titleLabel.text = titleField.text 意思就是將文字標簽的字改成文字輸入框的文字
接著我們就把程式跑起來吧!
在文字框中輸入文字，按下按鈕，標簽就可以變文字了!
