Swift-冰咖啡介紹

實作 Table View 的基本功能

咖啡是現代人幾乎每天都需要的精神糧食，好比老人家愛喝茶一般，以前曾經跌入過精品咖啡的坑中，也曾經想辭職開間有溫度的咖啡店，當一下厲害的咖啡吧台手，認識一些咖啡界的朋友，看遍了咖啡店的辛酸，加上味覺不是那麼敏銳，最終還是當個客人就好！

雖然熱的咖啡才喝得出每支咖啡的香氣與特殊口感，但炎炎夏日偶爾會想來杯冰咖啡消消暑，無論是運動前來杯冰滴加速脂肪燃燒還是下午嘴饞想喝飲料時，都非它莫屬，趁這次作業介紹一下自己知道且常在做的冰咖啡種類！

依據Peter網頁條列的功能，大致有完成的如下

1. 利用內建的 cell 樣式顯示表格內容，定義 UITableViewDataSource 的相關 function。

2. 表格的資料 : array 的成員型別是自訂型別，比方 struct Song。(比較好的做法)。

3. 利用 IBSegueAction，點選 cell 後可到下一頁顯示詳細資訊。

4. 客製 cell 顯示表格的內容，自訂 cell 類別和連結 outlet 到 cell 類別，搭配 as! 轉型。

5. cell 採用固定高度，cell 裡的元件設定 auto layout 條件。

此外，下一頁顯示詳細資訊部分，還額外增加點擊“影片“字樣的button會開啟網頁播放YouTube的教學影片，其中某個種類在網路上找不到只好把網址該為文字介紹的網頁(歐舍咖啡)，雖然有成功開啟網頁至YouTube頁面，但會顯示異常畫面不能播放，或者無法開啟頁面等等等，大概是以下的畫面！

播放異常畫面

流程簡述：

Step1. 建立自訂的TableViewController，並設定在storyboard上新加入的TableViewController

設定成自定義的TableViewController

Step2. 加入圖片至Assets，並重新命名

加入圖片至Assets

Step3. 固定table cell的高度並加入相關元件

固定高度做法可參考Peter的教學

如何讓 table view cell 固定高度

固定cell高度為180

Step4. 設定元件的Auto Layout

必須先自首，在這一塊我卡非常久，不論怎麼設定image view & Label都無法呈現在設定的位置，即使固定了兩者的width & height，最後使用stack view，令stack view與content view同樣大小，使得兩者勉強接近預期位置，經過Peter掃過設定後，原來….我把content view的class改到的，所以才有這些問題！

Step5. 自訂一個tableviewcell的類別，並將其設為TableCell的class

設定cell的類別

Step6. 將image與label拉IBOutlet至TableViewCell中

@IBOutlet weak var IceCoffeeImageView: UIImageView!
@IBOutlet weak var IceCoffeeName: UILabel!

Step7. 自訂IceCoffee的型別

import Foundation

struct IceCoffee {
var name: String
var principle: String
var iceCoffeeImage: String
var advantage: String
var disadvantage: String
var url: URL
}

Step8. 設定IceCoffees的內容，同時定義section與cell的數量

var iceCoffees = [IceCoffee(name: "冰滴咖啡", principle: "藉由冷凝自然滲透水壓，一點一滴萃取而出", iceCoffeeImage: "image1.png", advantage: "不酸澀、不傷胃、咖啡因較義式咖啡低", disadvantage: "需掌握滴速，太快味道太淡，太慢咖啡會發酵過頭 ; 耗時較長", url: URL(string:"https://youtu.be/4sAZlUZSlIc")!), IceCoffee(name: "冰萃咖啡", principle: "類似冷泡茶概念，將大量咖啡粉直接泡在低於5度C的冷水中，長時間低溫浸泡咖啡粉萃取的咖啡，大約需要8 -12小時", iceCoffeeImage: "image2.png", advantage: "不會有過多的雜質與苦澀味，味較為清新微甜，因為酸澀味和苦味都相對減低了，所以口感也更為順滑", disadvantage: "由於水和咖啡粉接觸的時間長了，咖啡因含量較高", url: URL(string:"https://youtu.be/olJXKlYWteA")!), IceCoffee(name: "冷縮咖啡之內縮法", principle: "用熱水快速萃取咖啡粉、然後加冰塊或急速降溫後的冷飲咖啡，製作耗時約需2~3分鐘", iceCoffeeImage: "image3.png", advantage: "方便快速", disadvantage: "容易因冰塊融化而味道較淡", url: URL(string:"https://youtu.be/HGfhlf9R3Ks")!), IceCoffee(name: "冷縮咖啡之外縮法", principle: "用熱水快速萃取咖啡粉，以金屬容器裝盛剛煮好的熱咖啡再以冷水在外頭隔水降溫", iceCoffeeImage: "image4.png", advantage: "味道較內縮法濃郁", disadvantage: "需要較多器具，也相較內縮法耗時一些", url: URL(string:"http://pcf.orsir.tw/index.php?section=13&page=0")!)]
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return iceCoffees.count
}

Step9. 設定cell的identifier與程式碼修改

設定identifier

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "IceCoffeeCell", for: indexPath) as! IceCoffeeTableViewCell
let iceCoffee = iceCoffees[indexPath.row]
cell.IceCoffeeName.text = iceCoffee.name
cell.IceCoffeeImageView.image = UIImage(named: iceCoffee.iceCoffeeImage)
return cell
}

Step10. 自訂IceCoffeeDetailViewController，同時在storyboard新增ViewController，並設class為IceCoffeeDetailViewController

設定ViewController的類別

Step11. 編輯IceCoffeeDetailViewController的程式碼，與其storyboard的UI元件

程式碼部分除了元件相關的Outlet與內容外，還增加buttonPressed的IBAction，點擊後開啟safari瀏覽器

Step12. 從cell拉segue至IceCoffeeDetailViewController

Step13. 在IceCoffeeTableViewController定義IBSegueAction

@IBSegueAction func showDetail(_ coder: NSCoder) -> IceCoffeeDetailViewController? {
if let row = tableView.indexPathForSelectedRow?.row {
let iceCoffee = iceCoffees[row]
return IceCoffeeDetailViewController(coder: coder, iceCoffee: iceCoffee)
} else {
return nil
}
}

Step14. segue與IceCoffeeTableViewController建立連結

segue拉線至TableViewController

選擇showDetail

成品

WeilinPan/iceCoffee

相關參考資料

傳送資料到其他頁面

7 Minutes Workout的十堂必修課

利用 IBSegueAction 傳資料到下個頁面的 controller — iOS 13 新功能

present SFSafariViewController 顯示網頁