tigergate272

(初心者向け)Swift3.0で初アプリ - 画面上の画像をドラッグ

More than 1 year has passed since last update.

Swift3.0を使って簡単なiPhoneアプリを作ってみます
画面に表示された画像をドラッグ可能にして座標を取得します

1. 部品を用意します

  • イラストレーターなどで①②③のような画像(ここでは例としてcircle1.jpg、circle2.jpg、circle3.jpgとします)と画面を仕切る縦横軸の画像(同lines.jpg)などを用意します

2. アプリを準備します

  • Xcodeを起動し、Single Viewアプリケーションを作成します
  • Assets.xcassetsに前項で作成した①②③の画像(circle1.jpg,circle2.jpg,circle3.jpg)と縦横軸の画像(lines.jpg)をドラッグ&ドロップして登録します
  • 画面下部にそれぞれのx座標、y座標を表示するラベル(ここでは、lc1x, lc1y, lc2x, lc2y, lc3x, lc3yとします)を準備します
  • 下記のViewController.swiftを作成し、前項のラベルを接続します
import UIKit

let imageView0 = UIImageView()
let imageView1 = UIImageView()
let imageView2 = UIImageView()
let imageView3 = UIImageView()

var c1x : CGFloat!
var c1y : CGFloat!
var c2x : CGFloat!
var c2y : CGFloat!
var c3x : CGFloat!
var c3y : CGFloat!

class ViewController: UIViewController {

    @IBOutlet weak var lc1x: UILabel!
    @IBOutlet weak var lc1y: UILabel!
    @IBOutlet weak var lc2x: UILabel!
    @IBOutlet weak var lc2y: UILabel!
    @IBOutlet weak var lc3x: UILabel!
    @IBOutlet weak var lc3y: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        let screenWidth:CGFloat = view.frame.size.width
        let screenHeight:CGFloat = view.frame.size.height

        imageView0.image = UIImage(named:"lines.jpg")!
        let newRect0 = CGRect(x:0, y:0, width:300, height:400)
        imageView0.frame = newRect0
        imageView0.center = CGPoint(x:screenWidth/2, y:screenHeight/2)
        self.view.addSubview(imageView0)
        imageView0.isUserInteractionEnabled = true

        imageView1.image = UIImage(named:"circle1.jpg")!
        let newRect1 = CGRect(x:0, y:0, width:50, height:50)
        imageView1.frame = newRect1
        imageView1.center = CGPoint(x:screenWidth/4, y:screenHeight/4)
        self.view.addSubview(imageView1)
        imageView1.isUserInteractionEnabled = true

        imageView2.image = UIImage(named:"circle2.jpg")!
        let newRect2 = CGRect(x:0, y:0, width:50, height:50)
        imageView2.frame = newRect2
        imageView2.center = CGPoint(x:screenWidth/2, y:screenHeight/2)
        self.view.addSubview(imageView2)
        imageView2.isUserInteractionEnabled = true

        imageView3.image = UIImage(named:"circle3.jpg")!
        let newRect3 = CGRect(x:0, y:0, width:50, height:50)
        imageView3.frame = newRect3
        imageView3.center = CGPoint(x:screenWidth*3/5, y:screenHeight*2/3)
        self.view.addSubview(imageView3)
        imageView3.isUserInteractionEnabled = true

        let panGestureRecognizer06 = UIPanGestureRecognizer(target: self, action: #selector(panGesture06(sender:)))
        let panGestureRecognizer07 = UIPanGestureRecognizer(target: self, action: #selector(panGesture07(sender:)))
        let panGestureRecognizer08 = UIPanGestureRecognizer(target: self, action: #selector(panGesture08(sender:)))
        imageView1.addGestureRecognizer(panGestureRecognizer06)
        imageView2.addGestureRecognizer(panGestureRecognizer07)
        imageView3.addGestureRecognizer(panGestureRecognizer08)
    }

    @objc func panGesture06(sender:UIPanGestureRecognizer) {

        if sender.state == UIGestureRecognizerState.began {
            c1x = imageView1.frame.origin.x
            c1y = imageView1.frame.origin.y
        }
        let point: CGPoint = sender.translation(in: self.view)
        let movedPoint: CGPoint = CGPoint(x: sender.view!.center.x + point.x, y: sender.view!.center.y + point.y)
        sender.view!.center = movedPoint
        sender.setTranslation(CGPoint.zero, in: self.view)
        print(c1x,c1y)
        lc1x.text = c1x.description
        lc1y.text = c1y.description
    }

    @objc func panGesture07(sender:UIPanGestureRecognizer) {

        if sender.state == UIGestureRecognizerState.began {
            c2x = imageView2.frame.origin.x
            c2y = imageView2.frame.origin.y
        }
        let point: CGPoint = sender.translation(in: self.view)
        let movedPoint: CGPoint = CGPoint(x: sender.view!.center.x + point.x, y: sender.view!.center.y + point.y)
        sender.view!.center = movedPoint
        sender.setTranslation(CGPoint.zero, in: self.view)
        print(c2x,c2y)
        lc2x.text = c2x.description
        lc2y.text = c2y.description
    }

    @objc func panGesture08(sender:UIPanGestureRecognizer) {

        if sender.state == UIGestureRecognizerState.began {
            c3x = imageView3.frame.origin.x
            c3y = imageView3.frame.origin.y
        }
        let point: CGPoint = sender.translation(in: self.view)
        let movedPoint: CGPoint = CGPoint(x: sender.view!.center.x + point.x, y: sender.view!.center.y + point.y)
        sender.view!.center = movedPoint
        sender.setTranslation(CGPoint.zero, in: self.view)
        print(c3x,c3y)
        lc3x.text = c3x.description
        lc3y.text = c3y.description
   }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

3. iPhoneで稼働を確認します

IMG_0663 (1).jpg