tags: 釣魚術 swift swiftui

拆解欲開發的功能

• 我們接續先前釣點地圖功能的實作，有一個功能是長按地圖畫面 > 是否新增私房釣點？
  • 長按手勢
  • 跳出對話框（是否新增釣點？新增/取消）或是功能選單（新增釣點/.../取消）
  • 如果要新增釣點的話，就要取得手指按下地點的經緯度
  • 製作一個介面讓使用者輸入名稱、並將經緯度和名稱一併存起來
  • 重新載入地圖時，把圖釘加上去

本日目標

手勢 (gesture)

• 在官方提供的手勢文件中是這麼描述 UIGestureRecognizer -「The base class for concrete gesture recognizers.」
• 有些常見的、具體明確的手勢辨認器的基礎類別，並且列出了八種。
  • UITapGestureRecognizer / 輕按
  • UIPinchGestureRecognizer / 捏(縮放)
  • UIRotationGestureRecognizer / 旋轉
  • UISwipeGestureRecognizer / 重壓
  • UIPanGestureRecognizer / 拖拉
  • UIScreenEdgePanGestureRecognizer / 螢幕邊拖拉
  • UILongPressGestureRecognizer / 長按
  • UIHoverGestureRecognizer / 滑過
• 先來實驗一下手勢的用法
  1. 在指定的 View 加上 .onLongPressGesture { //do sth. }
  2. 新增一個狀態變數，來記錄事件發生與否
  3. 在發生長按事件時，改變狀態
  4. 在 View 新增一個 .actionSheet(isPresented: $事件發生狀態布林變數) { ... }
• 詳情請見原始碼，或下列源碼片段

struct MapView: View {
    @State private var isLongPressed = false
    @StateObject private var viewModel = FishingLocationModel()
    var body: some View {
        ZStack(alignment: .topTrailing) {
            Map(coordinateRegion: $viewModel.region, showsUserLocation: true)
                .edgesIgnoringSafeArea(.all)
                .tint(.green)
                .gesture(DragGesture())
                .onLongPressGesture {
                    isLongPressed.toggle()
                }.actionSheet(isPresented: $isLongPressed) {
                    ActionSheet(title: Text("新增私房釣點嗎？"),
                                message: nil,
                                buttons: [
                                    .default(Text("新增釣點")) {
                                        // Yes
                                    },
                                    .cancel()
                                ])
                }
            LocationButton(.currentLocation) {
                viewModel.requestAllowOnceLocationPermission()
            }
            .foregroundColor(.white)
            .cornerRadius(15)
            .labelStyle(.iconOnly)
            .symbolVariant(.fill)
            .padding(10)
        }
    }
}

看結果

• 在地圖上長按
  

心得

• 原本想要一口氣做完「長按」「抓取地圖」功能，但是踩到了雷
• 長按本身沒什麼問題，不過要抓手指按下點的位置，換算座標，是另一道工。
• 直接抓取地圖中心點座標是最簡單的，只不過我認為那樣有點違反使用者的人性。
  • 或者改善新增圖釘的流程，新增一個紀錄按鈕，產生十字在地圖中間、讓使用者拖曳地圖，按下確認按鈕，回傳地圖座標。

參考資料

• UIGestureRecognizer