iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
1

前言

終於回到我的訂購飲料 App,早在 Day13 - popover 教學 的文章我就很想在我的 App 加入這個功能,但是礙於 popover 只是一個呈現方式,我得先花時間把 App 裡面的功能完善。
難得我覺得我的功能都完善了,該是時候把 popover 加入我的 App了!!但是一開始就遇到困難...

網路上很多教學都是用 button 作動來產生 popover,我之前的教學文也屬於這種...但是貪心的我是想要在使用者點選 cell 後來產生 popover...沒想到用 button 那招完全不行啊!!

還好~網路上還是有一篇教學文
TABLEVIEW CELL POPOVER VIEW

感嘆網路!!讚嘆網路啊!!

先秀一下結果

1. 建立 popover 的 view controller

基本上做法跟 Day13 類似,我要利用 popover 呈現一個 table view,所以要在這個 view controller 中創建一個 table view

2. 在我們要呈現 popover 的 table view 中調用 func tableView (didSelectRowAt indexPath: IndexPath)

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if let indexPath = tableView.indexPathForSelectedRow {
            // 初始化我們的 popover view controller
            let popover = UIStoryboard(name: "Main", bundle: nil ).instantiateViewController(withIdentifier: "drinkPopover") as! DrinkPopover
            
            //popover中的 title 圖片和文字 
            popover.titleImageName = titleName
            popover.titleLabelName = List[indexPath.row]
            
            //宣告 popover 的呈現方式
            popover.modalPresentationStyle = .popover
            
            //popover presentation 的設定
            let popoverController = popover.popoverPresentationController
            popoverController?.delegate = self
            popoverController?.sourceView = tableView.cellForRow(at: indexPath)
            popoverController?.sourceRect = CGRect(x: 0, y: 0, width: view.frame.width / 2, height: 44)
            popoverController?.permittedArrowDirections = .left
            self.present(popover, animated: true, completion: nil)
        }
    }

PS: popover presentation的設定定義要好好研究一下

3. 讓 iphone 也可以呈現 popover

    func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
        return .none
    }

上一篇
Day29 - highlight 錯誤
系列文
無中生有-從SWIFT語法學習到iOS APP的開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言