tags: 釣魚術 swift swiftui

雜談

今天重點有兩個：
(1) 移動地圖畫面擷取中心座標的方式，會較使用 GeometryReader 抓取螢幕位置並換算地圖實際座標來得容易。所以我打算在螢幕中間放上一個十字，並且透過觸發事件的方式，拿座標。
(2) 關於跳出選單的行為，官方文件有給建議，除非必要，不然不要這麼做，原因下面討論。

開發進度

• 討論一下先前提出的功能實作方式
• 先前釣點地圖功能的實作，功能是長按地圖畫面 > 是否新增私房釣點？

• [x] 長按手勢 【Day 13】
• [x] 跳出對話框（是否新增釣點？新增/取消）或是功能選單（新增釣點/.../取消） 【Day 13】
• [x] 如果要新增釣點的話，就要取得手指按下地點的經緯度 【Day 16】（今天）
• [ ] 製作一個介面讓使用者輸入名稱、並將經緯度和名稱一併存起來
• [x] 載入地圖時把圖釘加上去 【Day 14】
• [x] 重構 - 分離地圖畫面與圖釘資料 【Day 15】
• [ ] 從檔案或是資料庫撈取座標

取得座標的簡單實作方式

• 因為換算是件麻煩事，所以就只要在畫面的正中間，擺上一個十字，用事件觸發擷取座標就可以。
• 如果你想知道換算的做法，找到我的文章，或許你可以先參考 SwiftUI: Add MapMarkers With LongPressGesture — Part 1 - Alessandro Manilii

MapView 的局部程式碼

• 本日重點的幾行程式碼

            VStack(alignment: .trailing) {
                HStack {
                    Spacer()
                    LocationButton(.currentLocation) {
                        viewModel.requestAllowOnceLocationPermission()
                    }
                    .foregroundColor(.white)
                    .cornerRadius(15)
                    .labelStyle(.iconOnly)
                    .symbolVariant(.fill)
                    .padding(10)
                }
                Spacer()
            }
            VStack(alignment: .center) {
                Image(systemName: "plus")
                    .foregroundColor(.black)
            }

• 下圖為本日程式碼重點
  
  • 在 ZStack 的 ZStack(alignment: .center) { } 這邊設定了 Z-象限 畫面堆疊 的對齊方式，預設是擺中間的。
  • 然而我希望把定位按鈕放在右邊，所以在這裡面多放一層 VStack
  • 最後加上的十字，他必須剛好出現在畫面中心，如此一來，使用者在拖拉地圖時，這個十字的底下，剛好是地圖中心，幫助使用者對齊拿座標。

用 .onLongPressGesture { } 偵測長按

Map(coordinateRegion: $viewModel.region,
                    showsUserLocation: true,
                    annotationItems: SecretLocations) { item in
                    MapAnnotation(coordinate: item.coordinate) {
                        Text(item.name)
                            .fontWeight(.light)
                            .font(.caption2)
                        switch item.rank {
                        case 1:
                            Image(systemName: "hand.thumbsdown.circle.fill")
                                .foregroundColor(.red)
                                .background(Color.white)
                                .clipShape(Circle())
                        case 2:
                            Image(systemName: "tortoise.fill")
                                .foregroundColor(.orange)
                        case 3:
                            Image(systemName: "questionmark.circle.fill")
                                .foregroundColor(.gray)
                                .background(Color.white)
                                .clipShape(Circle())
                        case 4:
                            Image(systemName: "face.smiling.fill")
                                .foregroundColor(.cyan)
                                .background(Color.white)
                                .clipShape(Circle())
                        case 5:
                            Image(systemName: "hand.thumbsup.circle.fill")
                                .foregroundColor(.green)
                                .background(Color.white)
                                .clipShape(Circle())
                        default:
                            Image(systemName: "questionmark.circle.fill")
                                .foregroundColor(.gray)
                                .background(Color.white)
                                .clipShape(Circle())
                        }   // switch end
                    }   // ManAnnotation end
                }   // annotationItems
                .onLongPressGesture {
                    isLongPressed.toggle()
                    customLocation = ScreenLocation(
                        latitude: viewModel.region.center.latitude,
                        longitude: viewModel.region.center.longitude)
                    print(customLocation)   // Debug 使用
                }

• 下圖為本日程式碼重點之二
  

研究到出神的東西...

• 在研究這個 actionSheet 與 ActionSheet 時，看了 Getting the user’s attention with alerts and action sheets

• 意思是，發出系統中斷，插入事件，屬於 Duck 不必的粗暴言論

Human Interface Guidelines

• 這邊內容好多，今天先到這裡。
• 下篇繼續探討如何製作流暢的操作畫面。