去年在大大通平台上發佈一篇「如何開發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搜尋介面教學，若有問題歡迎聯繫我！
評論