利用轉換座標的 convert function 判斷點選的 button 在哪個 cell

操作 iOS App 時，我們時常在表格的 cell 上點擊按鈕， 比方下圖 App Store App 的 GET & NT$ 30 按鈕。不過我們要如何從點擊的按鈕找到它對應的資料呢 ?

由於表格的資料一般會存在 array 裡，而每個 cell 顯示的的內容將依序對應 array 的每個成員，因此只要能找到 button 所在的 cell 是第幾個 cell，即可找到對應的資料。

判斷的方法很多，接下來我們將介紹其中一種方法，利用轉換座標的 convert function 判斷。

認識 function convert(_:to:)

讓我們先用以下的例子說明 function convert(_:to:) 的功能。

當我們點擊 button 時，將執行 function buttonPrssed。

@IBAction func buttonPrssed(_ sender: UIButton) {
   let buttonPointOnGreenView = sender.convert(CGPoint.zero, to: greenView)
   print(buttonPointOnGreenView)
}

結果

(94.0, 132.0)

說明

function convert(_:to:) 可以幫我們找出元件在某個 view 上的座標，它的格式如下:

func convert(_ point: CGPoint, to view: UIView?) -> CGPoint

convert(_:to:) - UIView | Apple Developer Documentation

我們從 button sender 呼叫 function convert(_:to:)，參數 point 說明 sender 元件裡的座標位置，在這裡我們傳入 CGPoint.zero，表示 button 的左上角。而第二個參數 view 我們傳入 greenView，表示我們想知道 button 的左上角在 greenView 裡的座標。

let buttonPointOnGreenView = sender.convert(CGPoint.zero, to: greenView)

程式執行後，我們得到座標 (94.0, 132.0)，表示 button 的左上角在綠色 view 裡的座標是 (94, 132)。

讓我們回到 storyboard 裡進一步證明吧。請點選 button，然後按住 option 鍵移動滑鼠游標，即可看到它在綠色 view 裡的位置果然是 (94. 132)。

因此，我們可透過 function convert(_:to:) 找出元件在某個 view 上的座標，比方剛剛的例子改成 sender.convert(CGPoint.zero, to: view)，將得到 button 左上角在 controller 的 view 的座標。

@IBAction func buttonPrssed(_ sender: UIButton) {
   let buttonPointOnWhiteView = sender.convert(CGPoint.zero, to: view)
   print(buttonPointOnWhiteView)
}

結果

(137.0, 232.0)

值得注意的， 呼叫 function convert 時要傳入 CGPoint.zero ，不能省略型剛 CGPoint，因為第一個參數的型別有可能是 CGPoint，也可能是 CGRect。

利用轉換座標的 convert function 判斷點選的 cell

了解了 function convert(_:to:) 的原理，接下來我們終於可以回到正題，利用它判斷以下 App 畫面點選的價錢 button 對應的 App。

假設 table 顯示的資料來自 array apps，點擊 button 的 function 連到 controller 的 IBAction function buy。

@IBAction func buy(_ sender: UIButton) {
   let point = sender.convert(CGPoint.zero, to: tableView)
   if let indexPath = tableView.indexPathForRow(at: point) {
      print(apps[indexPath.row])
   }
}

我們利用 sender.convert(CGPoint.zero, to: tableView) 找到 button 在表格裡的座標，然後再用 tableView 的 function indexPathForRow(at:) 找到此座標對應的 IndexPath。有了 IndexPath，從它的 property row 即可得知 button 是在第幾個 cell，因此我們最後即可印出它對應的資料， apps[indexPath.row]。

indexPathForRow(at:) - UITableView | Apple Developer Documentation