Swift
Mkmapview
annotation
地図アプリ
トラッキングモード

Swift MkMapViewで地図アプリ作成してみた(7)- トラッキングモードを切り替える(自作ボタン)


記事一覧

Swift MkMapViewで地図アプリ作成してみた(記事一覧)


ボタンに貼り付ける画像をAssets.xcassetsに取り込む



  1. Image Setを追加する

    AppIcon下の白いスペースを右クリックして、New Image Setを押す。

    ImageSet.png




  2. 追加したImage Setに画像を取り込む

    取り込みたい画像をドラックしてドロップする。

    ImageSet2.png




  3. スクロールモード、ヘディングアップ、ノースアップ用のImage Setを追加する

    各Image Setを追加し、名前を変更する。

    ImageSet3.png




View Controllerにボタンを追加する



  1. View Controllerにボタンを追加する

    「command + shift + l(エル)」でObjects Libraryを表示する。

    Buttonをstoryboard上のデバイスまでドラックしてドロップする。

    button1.png




  2. ボタンにノースアップの画像を設定する

    Imageのプルダウンで、Image Setが選択できるため、トラッキングモードの初期値であるノースアップ画像を設定する。

    Button2.png




追加したボタンのタッチダウンを検出する



  1. タッチダウンした時にCallする関数を定義する


    ViewController.swift:タッチダウンした時にCallする関数を定義する

    @IBAction func trackingBtnThouchDown(_ sender: AnyObject) {
    
    print("tracking Button Thouch Down!")
    }




  2. タッチダウンした時にCallする関数を登録する

    Button Objectを右クリックし、Touch Downの右側の○をドラックして、View Controllerにドラックする。

    ドラックすると定義した関数が出力されるため選択する。

    button3.png




  3. ▶︎を押してPCシミュレータでタッチダウンが検出されることを確認する

    タッチダウンすると(1.)で定義した関数がCallされる。

    button4.png




タッチダウンされるとトラッキングモードを切り替える



  1. タッチダウンでトラッキングモードを切り替える

    ノースアップ→ヘディングアップ→スクロールモード→ノースアップの順に切り替える。


    ViewController.swift:タッチダウンでトラッキングモードを切り替える

    @IBAction func trackingBtnThouchDown(_ sender: AnyObject) {
    
    switch mapView.userTrackingMode {
    case .follow:
    mapView.userTrackingMode = .followWithHeading
    break
    case .followWithHeading:
    mapView.userTrackingMode = .none
    break
    default:
    mapView.userTrackingMode = .follow
    break
    }
    }




  2. 現在位置更新時に選択しているトラッキングモードに合わせて地図の中心位置を変更する

    Swift MkMapViewで地図アプリ作成してみた(3)- 現在位置を地図の中心にするで実装した処理を変更する。


    ViewController.swift:変更前

    // CLLocationManagerのdelegate:現在位置取得
    
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations:[CLLocation]) {

    mapView.userTrackingMode = .follow


    変更前は現在位置が更新されると、無条件で地図の中心位置をノースアップで更新していた。


    ViewController.swift:変更後

    // CLLocationManagerのdelegate:現在位置取得
    
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations:[CLLocation]) {

    switch mapView.userTrackingMode {
    case .followWithHeading:
    mapView.userTrackingMode = .followWithHeading
    break
    case .follow:
    mapView.userTrackingMode = .follow
    break
    default:
    break
    }


    変更後は、ヘディングアップであればヘディングアップ、ノースアップであればノースアップで更新する様に対応。

    ヘディングアップまたはノースアップ中に地図をスクロールすると、mapView.userTrackingModeは.noneに勝手に変更されるため、上記の実装でもスクロール中に現在位置に戻されることはない。




  3. トラッキングモードに合わせてボタンの画像も切り替える

    storyboardのUIButtonとImage Setに登録した画像を紐付ける変数を定義する。


    ViewController.swift:変更後

    class ViewController:   UIViewController,
    
    CLLocationManagerDelegate,
    UIGestureRecognizerDelegate {

    // storyboardのUIButtonを紐付ける変数
    @IBOutlet var trackingButton: UIButton!

    // Image Setに登録した画像を紐付ける変数
    let ImageHeadingUp :UIImage? = UIImage(named:"ImageHeadingUp")
    let ImageScrollMode :UIImage? = UIImage(named:"ImageScrollMode")
    let ImageNorthUp :UIImage? = UIImage(named:"ImageNorthUp")


    続いて、storyboardのUIButtonと変数を紐づける。

    trackingButtonを選択する。

    button5.png

    最後に、(2.)で作成した関数にsetImage()でボタンの画像を変更する処理を追加する。


    ViewController.swift:処理の追加後

    @IBAction func trackingBtnThouchDown(_ sender: AnyObject) {
    
    switch mapView.userTrackingMode {
    case .follow:
    mapView.userTrackingMode = .followWithHeading
    trackingButton.setImage(ImageHeadingUp, for: .normal)
    break
    case .followWithHeading:
    mapView.userTrackingMode = .none
    trackingButton.setImage(ImageScrollMode, for: .normal)
    break
    default:
    mapView.userTrackingMode = .follow
    trackingButton.setImage(ImageNorthUp, for: .normal)
    break
    }
    }




記事一覧

Swift MkMapViewで地図アプリ作成してみた(記事一覧)