#6 用RESTful API來訂杯珍奶喝吧！Part-3-menu呈現及banner輪播
接下來是這個APP的重頭戲，建置飲料menu、訂單的新增、查詢、修改、刪除功能，最花時間也是最重要的部份～請客位看倌耐心欣賞～
先來說說飲料menu建置的部份：
使用Airtable當成遠端資料庫，將飲料的相關資訊建置在其上，使用RESTful API取得資料及上傳資料
- 在Airtable上建立2個表單-DrinkingMenuList、OrderList
2. 在Xcode中新增View Controller，加入Navigation Controller及Tab Bar Controller，將Tab Bar項目改成"訂飲料"及購物車圖示
3. 在上面第2點新增的View Controller中放置1個Collection View建置輪播banner、2個Container View、1個Segmented Control及2個Table View Controller製作訂單列表(Segmented Control是用來切換冷熱飲List)，並設定好AutoLayout
4. 使用Segmented Control及2個Container View切換冷熱飲畫面，先拉好2個Container View的@IBOutlet Collection及Segmented Control的@IBAction，再來寫切換的function
節錄程式碼如下：
//將2個Container View拉到@IBOutlet Collection
@IBOutlet var drinkingContainerViews: [UIView]!
//Segmented Control的@IBAction
@IBAction func segmentedControlAction(_ sender: UISegmentedControl) {
//切換冷熱飲
drinkingContainerViewsChange()
}
//切換冷熱飲
func drinkingContainerViewsChange() {
//先將Container View全部設為隱藏
drinkingContainerViews.forEach {
$0.isHidden = true //$0代表傳入的Container View
}
//將選取到的Container View設定為顯示
drinkingContainerViews[segmentedControl.selectedSegmentIndex].isHidden = false
}5. 將2個Container View原有的View Controller刪除並與2個Table View Controller用Embed的方式連接，在Table View Controller自訂想要的Cell樣式後，新增2個Table View Controller型別檔(及2個Table View Cell型別檔，並指定給Table View Controller及Cell
6. 解析Airtable API的JSON檔
struct MenuList: Codable {
var records: [DrinkingRecords]
}
struct DrinkingRecords: Codable {
var fields: DrinkingDetail
}
struct DrinkingDetail: Codable {
var price: Int
var name: String
var image: [imageDeatil]
var iceHotKind: [String]
var category: String
struct imageDeatil: Codable {
var url: URL
}
}7. 透過API連線到Airtable取得飲品menu list，API_KEY置換成自己的
let urlString = "https://api.airtable.com/v0/appHy2q9FOUrGGhqS/DrinkingMenuList?api_key=API_KEY"
if let url = URL(string: urlString) {
URLSession.shared.dataTask(with: url) { data, response, error in
if let data {
let decoder = JSONDecoder()
do {
let menuDataList = try decoder.decode(MenuList.self, from: data)
for i in 0...(menuDataList.records.count - 1){
if menuDataList.records[i].fields.iceHotKind[0] == "Ice" {
self.menuList.append(menuDataList.records[i].fields)
}
}
DispatchQueue.main.async {
self.tableView.reloadData()
}
} catch {
print(error)
}
}
}.resume()
}8. 取得資料後呈現在APP上的樣子
9. 最後完成banner輪播，需在Assets放置7張一樣大小的圖片(想輪播幾張就放幾張)，接下來撰寫程式碼(做法參考：https://youtu.be/rXkemZojlW8)
重點!!! Collection View的Estimate Size設成none及Image View的Content Mode設成Scale To Fill
節錄程式碼如下：
//Controller conform to protocol
class MainViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout
//控制條件的計數
var imageIndex: Int = 0
//在Assets存了七張圖片，儲存圖片的陣列，因為要看起來一直往左滑動，故在最後補上第一張，才像是無限輪播
let imageArray = ["1", "2", "3", "4", "5", "6", "7", "1"]
//設定代理
photoCarouselCollectionView.delegate = self
photoCarouselCollectionView.dataSource = self
//使用內建時間計數器每2秒換圖
Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(autoPhotoCarousel), userInfo: nil, repeats: true)
//執行自動輪播
@objc func autoPhotoCarousel() {
var indexPath: IndexPath
imageIndex += 1
if imageIndex < imageArray.count {
indexPath = IndexPath(item: imageIndex, section: 0)
photoCarouselCollectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
} else {
//當圖片輪播到最後一張將imageIndex歸零，改以沒有動畫回到第一張
imageIndex = 0
indexPath = IndexPath(item: imageIndex, section: 0)
photoCarouselCollectionView.selectItem(at: indexPath, animated: false, scrollPosition: .centeredHorizontally)
autoPhotoCarousel()
}
}
//回傳1個section
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
//回傳陣列中的圖片數量
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageArray.count
}
//自定義重用cell
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "\(PhotoCarouselCollectionViewCell.self)", for: indexPath) as! PhotoCarouselCollectionViewCell
cell.photoCarouselImageView.image = UIImage(named: imageArray[indexPath.item])
return cell
}
//取得collection view位置及大小資訊
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return collectionView.bounds.size
}
//Collection View為左右捲動，所以cell左右間距為0
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
//Collection View為左右捲動，所以cell上下間距為0
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}夜深了～今天就到這邊吧～下次來談談訂單上傳的部份，謝謝觀賞～
關聯文章：
#4 用RESTful API來訂杯珍奶喝吧！Part-1-畫面及功能簡介 — 重來 就從 APPLE APP 開始吧 — Medium
#5 用RESTful API來訂杯珍奶喝吧！Part-2-Web官網整合介紹 — 重來 就從 APPLE APP 開始吧 — Medium
#7 用RESTful API來訂杯珍奶喝吧！Part-4-訂單上傳及查詢 — 重來 就從 APPLE APP 開始吧 — Medium
#8 用RESTful API來訂杯珍奶喝吧！Part-5-訂單修改及刪除 — 重來 就從 APPLE APP 開始吧 — Medium
