去年在大大通平台上發佈一篇「如何開發iOS Swift BLE通訊 (QCA402X BLE應用)」的博文,目的是要教導讀者如何製作一款APP與BLE裝置做交互,此篇博文主要教用戶如何製作「彈跳式BLE搜尋介面」,而藍牙相關程式已經在上一篇博文中提供,這邊會以UI教學文為主。
2. 彈跳式BLE介面
(圖A) |
(圖A)為彈跳式BLE介面的圖示,其中包含AITg Logo(UIImageView)、藍牙圖片(UIImageView)、藍牙設備名稱(UILabel)、RSSI(UILabel)、訊號大小圖示(UIImageView)及箭頭圖示(UIImageView)。專案內會使用到的元件分別為UIViewController、UITableView、UITableViewCell、UIImageView、UILabel、UIButton。
首先在Xcode內從元件庫拖曳一個UIViewController
再拖曳一個TableView至UIViewController中,可以自行調整UITableView的大小及位置
接著放入預製作AITg Logo的UIImageView元件,並且調整大小及位置
再將TableViewCell加入TableView中,加入TableViewCell的用意是讓資料呈現在上方
接下來我們來設定TableViewCell內部的元件,即藍牙名稱搜尋列表中項目呈現的樣子
首先,點選介面上的TableViewCell,右邊可以設定TableViewCell的高度,在專案內是將Row Height設定為110
調整好TableViewCell的高度後,放入UIImageView(設定藍牙圖示)、UILabel(設定裝置名稱)、UILabel(設定RSSI)、三個UIIMageView(設定RSSI訊號強度圖示)及UIImageView(設定箭頭圖示)
注意:以上UI元件都必須設定UIContraintsLayout
針對TableViewCell新增一個UITableView Cell的Class,把UI上所有的元件按右鍵拖曳至此Class內,並設定名稱。
- 注意:基本iOS BLE通訊程式碼與「如何開發iOS Swift BLE通訊 (QCA402X BLE應用)」這篇博文內的一樣,這邊就不再做敘述
其中在「如何開發iOS Swift BLE通訊(QCA402X BLE應用)」內的藍牙檔案內必須加入代理,這樣的用意是為了方便在ViewController檔案內引用藍牙相關功能,包含讀取資料、外圍設備的名稱及RSSI訊號、連接及斷開連接,透過代理可以將資料實現於ViewController的Table View中。
現在開始介紹ViewController檔案內的程式碼:
首先要記得“import CoreBluetooth”,導入CoreBluetooth的框架,接下來記得加入“BLEControllerDelegate”代理、“UITableViewDelegate”及“UITableViewDataSource”。
由上往下依序宣告“存取基本Device的資訊”、“過濾更新使用”、“點選列表上的裝置時取得IndexPath”、“掃描時間超時使用”、“掃描時間”、“下拉刷新”及“點擊列表時出現的UILabel”。
在“viewDidAppear”及“viewWillAppear”內必須針對代理進行設定
由於我們在ViewController檔案內導入“BLEControllerDelegate”,所以我們可以引用“peripheralFound(peripheral: CBPeripheral, rssi: NSNumber)”取得外圍設備及RSSI訊號強度,先從“NSMutableDictionary”取出Peripherals及RSSI,再透過filter過濾Index內是否包含外圍設備的UUID,若包含則列表上的名稱不變,只有RSSI會改變,並呈現動畫效果;若不包含則需要將外圍設備的UUID儲存至filter的Index中。
接著設定Table View(numberOfRowsInSection),設定列表上外圍設備的數量:
設定Table View(cellForRowAt):
這是用來設定UITableViewCell Class中的元件,將“cell.deviceName.text”對應到“peripheral.name(設備名稱)”、“cell.rssiName.text”對應到“rssi.intValue(RSSI訊號強度)”、“cell.imageV.image”對應到藍牙圖片,再透過if else條件式判斷RSSI的數值大小為何,來設定列表上訊號圖示的顏色。
針對個別的indexPath設定展開後的UI變化,設置名稱顏色、箭頭圖示、UILabel的大小,再透過判斷RSSI數值顯示資料在UILabel上,(圖B)為點選後展開的UI。
(圖B)點選列表展開時的UI |
介面最下方的“Scan”按鈕對應到ViewController內的“scanBtn”功能,按下按鈕後,會先清空儲存裝置的資料及透過BLE代理內的“startScan”執行掃描功能,當開始進行掃描時,按鈕上的文字會變成“Scanning”,最下面“self.timer”的功能設定掃描時間的週期為5秒,5秒後會執行“cancelScan”停止掃描的功能,並且重新計算Timer,在0.5秒後會再執行“StartScan”的功能,透過Timer的設置方式可以讓手機自動掃描周圍設備。
最後在專案內還提供下拉刷新的功能:
在“viewDidLoad()”裡面記得加入“tableView.dataSource = self”及“tableView.delegate = self”,未加入的話資料就不能正常顯示。下拉刷新的功能利用先前宣告的refreshControl變數進行初始化, 再針對refreshControl進行“.attributedTitle”、“.tintColor”、“.backgroundColor”設定。而“.addTarget”為設定控制動作,下方自訂“loadData()”功能配合下拉刷新使用,當下拉刷新的動作被觸發時,會執行“stopScan”的功能,然後延遲0.5秒後清空外圍設備的資料及名稱、更新TableView的資料並停止刷新,接著就會重新啟動“startScan”的功能,介面上也會出現重新搜尋到的裝置資料。
小結
iOS App上很常使用UI Table View這類的元件,結合iOS BLE通訊技術能夠將搜尋到的設備顯示在列表上,再透過圖示、動畫及下拉刷新的功能,優化列表的功能。以上為iOS APP彈跳式BLE搜尋介面教學,若有問題歡迎聯繫我!
評論