LoginSignup
4
3

More than 3 years have passed since last update.

[はじめてのiOSアプリ]xcodeで地図アプリを作成(その6)

Last updated at Posted at 2019-12-04

はじめに

iOSアプリを作ってみたいけど
何から始めて良いのかわからない

とりあえず、
「やってみました」記事を参考に
地図アプリを真似てみようと思う

という記事の6回目です。

今回は、拡大・縮小ボタンを追加します。

  • ピンチイン・アウトあるから、拡大・縮小ボタンは不要では?
    • Simulatorでピンチアウト(Ctrl+Option+Click)するのは直感的じゃなく忘れがちじゃない?
    • 直感的なボタンがあれば、ピンチアウトの操作を忘れても影響ないから
    • 「やってみました」記事だし、ボタンを配置してみたかったから

ボタンを追加

  1. ボタンを配置
    • [Main storyboard]を表示する
      • 【なぜ?】
        • [MKMapView]の上にボタンを配置する前準備
    • メニューから[View]-[Show Library]を選択、表示されるウインドウで [button] と入力し [Button]を絞り込む
      LibButtonItem.png
      • 【なぜ?】
        • MapViewにボタンを配置したいから
        • 絞り込まなくても、探し出すことができればOK
    • [Button]をドラッグ&ドロップでボタンをMapViewに配置する(「拡大」「縮小」の2箇所)
      • 【なぜ?】
        • 「拡大」「縮小」のふたつでセットだから
        • 邪魔にならず、操作に影響しないような任意の場所に配置する
        • 今回は、画面に左上付近にした
          SetButton.png
    • ボタンの文字[Button]を変更
      • 【なぜ?】
        • 何をするボタンなのかを見ただけでわかるようにするため
        • 今回は「+」「ー」とした
          SetButtonRenamed.png
    • メニューから[View]-[Inspectors]-[Show Attribute Inspector]を選択
      • 【なぜ?】
        • ボタンの文字サイズを変更したいから
          ShowRightSide.png
    • [MapView]に表示されているボタンを選択し、[Attribute Inspector]に表示されている文字サイズを好きなサイズに変更
    • サイズ変更に合わせ、ボタン位置も調整
      • 【なぜ?】
        • デフォルトだと小さく見にくいから、見やすいように大きくする
        • ついでに、Boldにもした(お好きないように、ご自由に)
          ModButtonSize.png
  2. ボタンの関連づけ

    • (以前の記事にも書いたように)[ViewController.swift]と[Main storyboard]を同時に表示する
      • 【なぜ?】
        • [Main storyboard]と[ViewController.swift]が同時に表示されていると[ボタン]の関連づけが容易にできるため
    • Ctrl+クリックで「+」ボタンのOutletを表示
      • 【なぜ?】
        • ボタンのタップとプログラムを関連づけるため(前準備)
          ButtonOutlet.png
    • [Touch Down]の右に表示されている○印を[ViewController.swift]にドラッグ&ドロップ

      • ドロップ場所は、以下の場所
      ViewController.swift
      var locationManager: CLLocationManager!
      
      // ここ付近にドラッグ&ドロップ    
      override func viewDidLoad() {
          super.viewDidLoad()
          // Do any additional setup after loading the view.
      
      • 【なぜ?】
        • ボタンのタップとプログラムを関連づけるため
          EventDD.png
    • 接続情報の入力を促すアイアログが表示されるので[Name]に[clickZoomin]と入力

      • 【なぜ?】
        • ボタンをタップしたときに実行する処理の名称ををプログラムで記述するため
      • ここまでの処理で、「+」ボタンのタップとプログラムの関連づけが完了
        InputConnectionInfo.png
    • 同様に「ー」ボタンにも同じような操作([Name]は[clickZoomout]とする)を実施

      • 【なぜ?】
        • 「ー」ボタンでも同じような操作を行うため
        • ViewController.swiftの関連する部分は、以下のようになっているはず
    ViewController.swift
    class ViewController: UIViewController, CLLocationManagerDelegate {
        @IBOutlet var mapView: MKMapView!
        var locationManager: CLLocationManager!
    
        @IBAction func clickZoomin(_ sender: Any) {
        }
        @IBAction func clickZoomout(_ sender: Any) {
        }
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view.
    
  3. ボタンに対応する処理を記述

    • ViewController.swiftの該当部分を以下のように修正

      • 【なぜ?】
        • 今回は、ボタンをタップしたことが判別できればOKだから
      ViewController.swift
       @IBAction func clickZoomin(_ sender: Any) {
           print("[DBG]clickZoomin")
       }
       @IBAction func clickZoomout(_ sender: Any) {
           print("[DBG]clickZoomout")
       }
      
  4. テスト実行

    • Simulatorを起動し、「+」ボタンや「ー」ボタンを押してみる
    • ボタンを押すたびに、Xcodeのログに位置情報に混ざり[clickZoomin][clickZoomout]出力された
    log
    [DBG]latitude : 37.33124551
    [DBG]clickZoomout
    [DBG]longitude : -122.03073097
    [DBG]latitude : 37.33121136
    [DBG]clickZoomin
    [DBG]clickZoomout
    [DBG]longitude : -122.03072292
    [DBG]latitude : 37.33117775
    [DBG]clickZoomin
    [DBG]longitude : -122.03071071
    [DBG]latitude : 37.33114614
    [DBG]clickZoomout
    [DBG]longitude : -122.03069859
    

今回の到達点

  • 画面に「拡大」「縮小」ボタンを配置することができた
  • ボタンをタップすると、デバッグメッセージが表示された

連載

  1. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その1:プロジェクト作成)
  2. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その2:地図表示)
  3. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その3:位置情報取得)
  4. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その4:位置情報と連携した地図表示)
  5. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その5:アプリアイコン設定)
  6. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その6:拡大・縮小ボタン追加)
  7. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その7:地図を拡大・縮小)
  8. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その8:地名表示)
  9. [はじめてのiOSアプリ]xcodeで地図アプリを作成(その9:ソースコード管理)
4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3