tags: 釣魚術 swift swiftui

雜談

• 寫程式和重構，是同時發生的。
  • 昨天寫到一個段落後，覺得程式碼的閱讀性降低很多。
  • 一個簡單的釣點地圖裡擺了一堆東西。
  • 我有時候突然想要跳進來改 code 的話，還真的要花點時間進入狀況。
• 今天我們將資料先抽出到另外一份 SecretLocation.swift
  • 之後會從這份程式碼去讀取資料庫或是檔案。
• 增加了新的釣點
  • 不同釣點的等級，對我來說等級不一樣。
    • 不推薦、容易打龜、普通或未知、不錯、很讚 之類的
    • 不同釣點使用不同的標記

開發筆記

SecretLocation.swift

//
//  SecretLocation.swift
//  BaoAnGongFisher
//
//  Created by nipapa on 2022/9/20.
//

import Foundation
import CoreLocation

struct PinLocation: Identifiable {
    let id = UUID()
    var name: String
    var image: String
    var coordinate: CLLocationCoordinate2D
    var rank: Int

    init(name: String, image: String, coordinate: CLLocationCoordinate2D, rank: Int) {
        self.name = name
        self.image = image
        self.coordinate = coordinate
        self.rank = rank
    }

    init() {
        self.name = "秘密釣點 - 五股聖母宮"
        self.image = "default"
        self.coordinate = CLLocationCoordinate2D(latitude:25.1125, longitude:121.4582)
        self.rank = 5   // 1: Bad ~ 5: Good
    }
}

var SecretLocationsData = [
    PinLocation(name: "五股聖母宮", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.1125, longitude: 121.4582), rank: 5),
    PinLocation(name: "台北港 (北堤)", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.169456, longitude: 121.389712), rank:3),
    PinLocation(name: "八里左岸", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.160970, longitude: 121.432821), rank:4),
    PinLocation(name: "下罟子漁港", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.144274, longitude: 121.381837), rank:2),
    PinLocation(name: "林口發電廠 (南側)", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.121356, longitude: 121.295589), rank:5),
    PinLocation(name: "林口發電廠出海口 (北側)", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.125, longitude: 121.3), rank:3),
    PinLocation(name: "竹圍漁港 (南堤階梯)", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.116585, longitude: 121.240676), rank:1),
    PinLocation(name: "竹圍漁港 (南堤港內)", image:"", coordinate: CLLocationCoordinate2D(latitude: 25.116848, longitude: 121.241588), rank:2),
]

• 先把資料都關在這邊

FishLocationView.swift (局部)

struct MapView: View {
    // 用來記錄長按手勢是否被觸發
    @State private var isLongPressed = false
    @StateObject private var viewModel = FishingLocationModel()
    @State private var SecretLocations = SecretLocationsData

    var body: some View {
        ZStack(alignment: .topTrailing) {
            Map(coordinateRegion: $viewModel.region,
                showsUserLocation: true,
                annotationItems: SecretLocations) { item in
                    // MapMarker(coordinate: item.coordinate, tint: .red)
                    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())
                        }
                        
                    }
                }
                .edgesIgnoringSafeArea(.all)
                .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)
        }
    }
}

• 關於 Switch case 的用法，就單純是 switch 某變數 {}
• case 值 表示 變數 == 值 的處置方式
• 要加 default 來處理不在 case 內的情況

看結果

• 截圖1 - 著名的打龜港、竹圍漁港
  
• 截圖2 - 常去、聽過沒去的幾個釣點
  
• 完整程式碼，請見 github: exsky/BaoAnGongFisher

拆解欲開發的功能

• 接續先前釣點地圖功能的實作，有一個功能是長按地圖畫面 > 是否新增私房釣點？

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

心得

• 感覺以我的開發速度，三十篇應該寫不了太多東西
• 今天先這樣囉