0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-20

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
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?