【Day 18】Swift UI - 私房釣點地圖自訂座標功能
tags: 釣魚術 swift swiftui AlertView
雜談
- 對於前端幾乎少有接觸的我，不太熟悉去弄一個介面出來給別人用；不過我還是弄得差不多了（自己講）
- 看到隊友在畫 線性回歸，要不是我報名的題目是釣魚，我還真的想要畫個回歸線，來看看 中華大學 CP 值的計算 得第一，來決定「指考應該考幾分」
本日開發內容說明
- 以我目前閱讀的資料，以及不到三週的開發經驗觀察到，SwiftUI 的 Button 可以直接透過
.alert 叫出小框框，吐一段文字描述，讓你選「Yes or No」
- 這個框框，不適合我；他比較適用在 韓先生問陳先生的問題
- 長得像這樣
- 我們需要「按下新增鈕」後，「問使用者要不要存」
- 如果要存的話，要知道「名字」和「推薦指數」
- 昨天我們做了，裡面有些小細節
- 使用
.offset() 將這個泡泡框「端進畫面中」、「移出畫面外」
- 在主畫面的按鈕按下時，修改 Alert 框框觀察中的那個是否被按下的觀測變數
- 比起昨天的 AddPinAlert 雙向綁定的變數，多加了一組
pinsData ... 這個東西是被秀在畫面中的那些圖釘。
AddPinAlert(alertIsPresented: $addLocationAlertIsPresented,
myLocationName: $newSecretLocationName,
currentRegion: $viewModel.region,
pinsData: $SecretLocations)
func saveLocation() {
self.pinsData.append(
PinLocation(name: myLocationName, image:"",
coordinate: CLLocationCoordinate2D(latitude: currentRegion.center.latitude,
longitude: currentRegion.center.longitude),
rank: myLocationRank)
)
}
- 上面的第三行，新增一個
PinLocation 餵給他地點名稱、推薦指數、經緯度，並且加入到雙向綁定的私房釣點陣列中。
操作影片、截圖
原始碼片段
//
// AddPinAlert.swift
// BaoAnGongFisher
//
// Created by nipapa on 2022/9/22.
//
import SwiftUI
import MapKit
import CoreLocationUI
struct AddPinAlert: View {
let screenSize = UIScreen.main.bounds
@Binding var alertIsPresented: Bool
@Binding var myLocationName: String
@Binding var currentRegion: MKCoordinateRegion
@Binding var pinsData: [PinLocation]
@State var myLocationRank: Int = 3
var boxTitle: String = "在十字記號下新增私房釣點？"
var body: some View {
VStack {
Text(boxTitle)
TextField("自訂名稱", text: $myLocationName)
.textFieldStyle(RoundedBorderTextFieldStyle())
Picker("", selection: $myLocationRank) {
Text("不推").tag(1)
Text("龜").tag(2)
Text("普通 / 未知").tag(3)
Text("好").tag(4)
Text("超讚").tag(5)
}
Spacer()
HStack (alignment: .center){
Spacer()
Button("好") {
print(currentRegion)
saveLocation()
self.alertIsPresented = false
}
Spacer()
Button("取消") {
self.alertIsPresented = false
}
Spacer()
}
}
.padding()
.frame(width: screenSize.width * 0.6, height: screenSize.height * 0.2)
.background(Color.cyan)
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
.shadow(color: Color.gray, radius: 15, x: -1, y: -1)
.offset(y: alertIsPresented ? screenSize.height * 0.2 : screenSize.height)
}
func saveLocation() {
self.pinsData.append(
PinLocation(name: myLocationName, image:"",
coordinate: CLLocationCoordinate2D(latitude: currentRegion.center.latitude,
longitude: currentRegion.center.longitude),
rank: myLocationRank)
)
}
}
struct AddPinAlert_Previews: PreviewProvider {
static var previews: some View {
//AddPinAlert(alertIsPresented: .constant(true), myLocationName: .constant(""))
AddPinAlert(alertIsPresented: .constant(false), myLocationName: .constant(""),
currentRegion: .constant(
MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 25.144274, longitude: 121.381837),
span: MKCoordinateSpan(latitudeDelta: 0.08, longitudeDelta: 0.08))
),
pinsData: .constant(SecretLocationsData)
)
}
}
開發進度
- [x] 長按手勢 【Day 13】 -> 非必要情況，避免使用 中斷(interrupt)；取而代之的是，時做了一個按鈕，配合 Alert 來決定是否擷取座標。 【Day 18】
- [x] 跳出對話框（是否新增釣點？新增/取消）或是功能選單（新增釣點/.../取消） 【Day 13】
- [x] 如果要新增釣點的話，就要取得手指按下地點的經緯度 【Day 16】（今天）
- [x] 製作一個介面讓使用者輸入名稱、並將經緯度和名稱一併存起來 -> 【Day 18】結合 【Day 17】的 Alert
- [x] 載入地圖時把圖釘加上去 【Day 14】
- [x] 重構 - 分離地圖畫面與圖釘資料 【Day 15】
- [ ] 從檔案或是資料庫撈取座標
心得
- 明天要來做釣點私房儲存的功能，思考一下做法和特性
- 文字檔：簡單明瞭低開發維運成本，不過讀本地資料，對於常常換手機的人就沒那麼方便。
- 資料庫：在 iPhone / iPad 上弄 SQLite 好像要比存文字檔多做很多事情；好處是之後功能要上雲比較方便。
- 屬於釣魚人的集郵冊
- 儲存照片、魚的名字、釣點名字、GPS座標、感言或是釣魚經
- 這個要思考圖片引用本地相簿的方式，或是另外保存的方式，或是搬到雲上
- 魚的名字等等的，就是存文字檔或是存資料庫
- 排在「儲存」功能實作完之後再來弄集郵冊
- 給新手選裝備的，釣組配裝筆記本
- 由本 APP 提供釣法參考
- 由使用者自訂配裝
- 有影片教學的話會更好
- 吃魚功能
iThome鐵人賽
看影片追技術