#9.2點餐系統App
Published in
13 min readNov 30, 2022
程式重點：
- NavigationBarItem的收藏愛心功能製作
- @IBSegueAction傳值
- performSegue判讀換頁
- UISearchController 搜尋篩選功能
- scrollView輪播功能
- NavigationBarItem的收藏愛心功能製作
首先先把一個Button拉進 Bar Button Item
請注意！一定要位在Bar Button Item之下，使用Button進行功能操作
如果使用Bar Button Item進行操作，屬性上的操作會變得很難
@IBOutlet weak var saveHeartButoon: UIButton!
//傳值過來的收藏資料
var savehearts = [Fields]()
var saveHeart = false
override func viewDidLoad() {
super.viewDidLoad()
//在介面上設定好true false相對應的圖示
saveHeartButoon.isSelected = shop.heart ?? false
}
@IBAction func saveHeart(_ sender: UIButton) {
sender.isSelected.toggle()
saveHeart = sender.isSelected
print("saveHeartUIBarButtonItem",saveHeart)
if saveHeart == false{
shop.heart = false
let index = savehearts.firstIndex { Fields in
Fields.shopName == shop.shopName
}
if let index{
//刪除
savehearts.remove(at: index)
print("3", index, savehearts)
}
print("saveHeart",saveHeart)
}
else{
shop.heart = true
savehearts.append(shop)
print("1",savehearts)
print("saveHeart",saveHeart)
}
Fields.saveHeartData(saveheart: savehearts)
}
收藏店家會顯示在常去店家當中．
- @IBSegueAction傳值
- performSegue判讀換頁
接著是點選相對的菜單，會跳到不同的頁面．須依靠performSegue搭配@IBSegueAction，還可以利用@IBSegueAction進行頁面的相互傳值
例如點選漢堡菜單，要換頁到漢堡菜單的介面，且把點選的東西價錢圖片等一併傳過去．
//利用section的字串，搭配withIdentifier來進行判斷
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let group = group[indexPath.section]
shopSellOk = shopSellDic[group]!
let shopSell = shopSellOk[indexPath.row]
switch group {
case "米堡":
performSegue(withIdentifier: "美式漢堡", sender: nil)
case "輕享套餐(附中杯紅茶)":
performSegue(withIdentifier: "超值套餐(附中杯紅茶)", sender: nil)
default:
performSegue(withIdentifier: shopSell.select, sender: nil)
}
}
@IBSegueAction func showUShambuger(_ coder: NSCoder, sender: Any?, segueIdentifier: String?) -> ShopItemsTableViewController? {
let controller = ShopItemsTableViewController(coder: coder)
if let row = tableView.indexPathForSelectedRow?.row {
controller?.prepare = shopSellOk[row]
}
return controller
}
@IBSegueAction func showSet(_ coder: NSCoder, sender: Any?, segueIdentifier: String?) -> shopHambugerTableViewController? {
let controller = shopHambugerTableViewController(coder: coder)
if let row = tableView.indexPathForSelectedRow?.row{
controller?.prepareHamburgerAction = shopSellOk[row]
}
return controller
}
@IBSegueAction func showDrink(_ coder: NSCoder, sender: Any?, segueIdentifier: String?) -> DrinkTableViewController? {
// 用個變數接起來,代表能到 那個頁面東西
let controller = DrinkTableViewController(coder: coder)
if let row = tableView.indexPathForSelectedRow?.row{
controller?.prepareDrink = shopSellOk[row]
}
return controller
}
@IBSegueAction func showToShopTime(_ coder: NSCoder, sender: Any?, segueIdentifier: String?) -> ShopTimeTableViewController? {
let controller = ShopTimeTableViewController(coder: coder)
controller?.shopTimeNext = shopTime
return controller
}- UISearchController 搜尋篩選功能
對總資料進行搜尋，把總資料中包含搜尋字串的資料，全部顯示在畫面上．當沒有搜尋時，就是原來的介面．
var searchController = UISearchController()
//依搜尋結果篩選出來的資料，沒篩選就是全部的資料
var currentMenu = [Fieldsl]()
//未分類的全部資料
var shopSellAll = [Fieldsl]()
var shopSellDic = [String:[Fieldsl]]()
var group = [String]()
override func viewDidLoad() {
super.viewDidLoad()
//navigationBar searchBar
searchController.searchResultsUpdater = self
searchController.delegate = self
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = true
ShopItemController.shared.fetchshopSell { result
in
switch result{
case .success(let respones):
let shopSell:DataShopSell! = respones
for i in shopSell.records.indices{
let sell = Fieldsl(name: shopSell.records[i].fields.name, price: shopSell.records[i].fields.price, select: shopSell.records[i].fields.select, sale: shopSell.records[i].fields.sale, image: shopSell.records[i].fields.image)
self.shopSellAll.append(sell)
}
// 把抓來的東西 給currentMenu ，也就是當前目錄
self.currentMenu = self.shopSellAll
//分類
self.classifyShopSell()
case .failure(_):
print("error")
}
}
}
//區分資料的函式，下載資料跟篩選時，都會用到．所以拉出來做一個函式
classifyShopSell(){
self.shopSellDic = Dictionary(grouping: self.currentMenu) { shop in
shop.select
}
self.group = self.shopSellDic.keys.sorted()
DispatchQueue.main.async {
self.tableView.reloadData()
self.hideActivityIndicatorView()
}
}
extension ShopSellTableViewController:UISearchResultsUpdating{
func updateSearchResults(for searchController: UISearchController) {
if let searchText = searchController.searchBar.text, searchText.isEmpty == true {
currentMenu = shopSellAll
print("current",currentMenu)
}
else{
//篩選包含 搜尋字串的資列
currentMenu = shopSellAll.filter({ $0.name.contains(searchController.searchBar.text ?? "")
})
}
classifyShopSell()
}
}
- scrollView輪播功能
能製作輪播功能的手段有非常多種．曾經嘗試過用collectionView製作，最後失敗了．沒有解出來．在時間壓力下，用了比較間單但步驟瑣碎的scrollView進行製作．適合頁面少的輪播功能．
@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var pageControl: UIPageControl!
weak var timer:Timer!
let photoArry:[String] = ["picture1","picture2","picture3","picture4","picture5"]
override func viewDidLoad() {
scrollView.delegate = self
//設定『頁面指示器』的總頁數
pageControl.numberOfPages = imageViews.count
//設定『頁面指示器』的目前頁
pageControl.currentPage = 0
timer = Timer.scheduledTimer(withTimeInterval: 4, repeats: true, block: {
timer
in
//Step1.決定下一頁的頁碼
//如果現在不是最後一頁
if self.pageControl.currentPage < self.pageControl.numberOfPages - 1
{
//將頁碼加1
self.pageControl.currentPage += 1
}
//如果現在是最後一頁
else
{
//將頁碼調回第一頁
self.pageControl.currentPage = 0
}
//Step2.找到下一張圖片的所在位置
let currentRect = self.imageViews[self.pageControl.currentPage].frame
//Step3.將ScrollView捲動到下一張圖片
self.scrollView.scrollRectToVisible(currentRect, animated: true)
})
}
//scrollView發生捲動時
override func scrollViewDidScroll(_ scrollView: UIScrollView)
{
//以contentOffset的值配合scrollView寬度，計算前半部超出scrollView顯示範圍的倍率，當作『頁面指示器』的目前頁
pageControl.currentPage = Int(scrollView.contentOffset.x / self.scrollView.bounds.width)
}參考文章：
