擔心好用的 Charts 框架能不能在 UIKit 也就是 Storyboard 專案中使用嗎?其實我也不知道,因為怎麼看,這個框架都是為了 SwiftUI 而設計的。但是呢,don’t worry,UIKit 中有一個特殊的 View Controller 叫做 UIHostingController(有元件可以拉到 Storyboard 上喔),他是專門顯示 SwiftUI 用的。啪,彈個指,搞定。
首先在 Storyboard 上拉出一個 Container View 元件到預設的 View Controller 上,然後把 Container View 預設帶出的 UIViewController 刪掉。完成後再拉出一個 Hosting View Controller 到 Storyboard 上,接著在 Container View 上按滑鼠右鍵拉藍線到 Hosting View Controller。鬆開滑鼠後應該會跳出一個選擇 Segue 型態的小視窗,選擇「Embed」。成功完成後的圖應該如下。
接下來開啟輔助編輯視窗(不知道怎麼開啟的話按熱鍵 Ctrl-Option-Command-Return),就是將畫面切成左邊是 Storyboard 右邊是程式碼,然後從 Segue 拉藍線到右邊 viewDidLoad() 下方,準備設定 Segue 的 IBAction,名稱可以任意取。
在 Xcode 幫我們產生的 IBSegueAction 函數中會有一行預設的程式碼,在最後的 rootView 參數輸入 SwiftUI 的 struct 名稱,然後記得要 import SwiftUI 就完成了。這裡的 BarChart() 原始碼請參考這一篇。
import UIKit
// 注意這裡
import SwiftUI
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBSegueAction func showBarChart(_ coder: NSCoder) -> UIViewController? {
return UIHostingController(coder: coder, rootView: BarChart())
}
}
執行結果如下。看吧,只打了幾個字就輕輕鬆鬆的在 UIViewController 中內嵌一個 SwiftUI 畫出的漂亮圖表了,大小位置任君調整。
【延伸閱讀】
請問一下,我照著您的方式完成Hosting View Controller,
但是BarChart雖然有import SwiftUI跟Charts卻無法find ‘Chart’ 跟 ‘BarMark ‘ in the scope.是甚麼原因,謝謝!
嗨咪嚕
你是不是忘了在專案中加入一個 SwiftUI View 的檔案,若你是根據這頁的程式碼,那 SwiftUI View 的檔案要命名為 BarChart.swift,最後將圖表放到這個檔案中,這樣應該就可以了。
您好,我是照著您的步驟命名一個 BarChart.swift並放到Controller中,但出現了”Cannot find ‘Chart’ in scope”和”Cannot find ‘BarMark’ in scope”兩個錯誤訊息。
我在想是不是因為我引用了這個套件所以衝突到了!
https://github.com/danielgindi/Charts
如果我在 BarChart.swift 中沒有 import Charts 的話,就會看到這兩個錯誤訊息,你看看是不是這個原因。
很遺憾,我有加一樣有出現這個錯誤。
如果方便,請你到 FB 蘋果私訊,我傳一個專案檔讓你試試看。
https://www.facebook.com/studyios