Edited at

UIScrollView内に複数の画像を表示し、タップされた画像を判別する方法。

More than 3 years have passed since last update.

以前アプリ開発をしていた際、ScrollViewに貼った複数の画像でどの画像がタップされたのかを判別し処理を行いたいという場面で手こずったのでその解決方法を書いてみました。


ScrolViewDelegate.swift

protocol ScrollViewDelegate{

func modalChanged(TouchNumber: Int)
}


TouchScrollView.swift

import UIKit

class TouchScrollView: UIScrollView {

var Delegate: ScrollViewDelegate!

//タッチしたときの処理
override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
println("touchbegan")
//どのタグのObjectがとれたか
for touch: AnyObject in touches {
var t: UITouch = touch as UITouch
self.Delegate.modalChanged(Int(t.view.tag - 1))
}
}

//タッチして動かしたときの処理
override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
println("touchmoved")
}

//タッチして離したときの処理
override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
println("touchended")

}

}


タップされたときの処理を書くため、touchesBegan内に写真についているタグを調べmodalChangedメソッドの引数としてタップされた写真が格納されている配列([UIImageView])の番号を渡します。


ViewController.swift

import UIKit

class ViewController: UIViewController,ScrollViewDelegate{

private let ScrollView = TouchScrollView()

private var ImageView: [UIImageView] = []

private var image: [UIImage] = [
UIImage(named: "sample.jpeg")!, UIImage(named: "sample.jpeg")!,
UIImage(named: "sample.jpeg")!, UIImage(named: "sample.jpeg")!,
UIImage(named: "sample.jpeg")!, UIImage(named: "sample.jpeg")!,
UIImage(named: "sample.jpeg")!, UIImage(named: "sample.jpeg")!,
UIImage(named: "sample.jpeg")!, UIImage(named: "sample.jpeg")!,
]

override func viewDidLoad() {
super.viewDidLoad()

ScrollView.Delegate = self
ScrollView.frame = CGRectMake(0,0,self.view.bounds.width,self.view.bounds.height)
ScrollView.contentSize = CGSizeMake(self.view.bounds.width / 2, self.view.bounds.height + (CGFloat)(150 * 10))
ScrollView.layer.position = CGPoint(x: self.view.bounds.width / 2,y: 300)
ScrollView.pagingEnabled = false
ScrollView.userInteractionEnabled = true
self.view.addSubview(ScrollView)

setImage()
}
func setImage(){

for(var i = 0;i<10;i++){
ImageView.insert(UIImageView(), atIndex: i)
ImageView[i] = UIImageView(frame: CGRectMake(0,0,300,200))
ImageView[i].image = image[i]
ImageView[i].layer.position = CGPoint(x: self.view.bounds.width / 2,y: 200 + (CGFloat)(200 * i))
ImageView[i].userInteractionEnabled = true
ImageView[i].tag = i + 1

ScrollView.addSubview(ImageView[i])

}

}
func modalChanged(TouchNumber: Int) {
println("\(TouchNumber)");
}

}


使用している画像の名前がsample.jpegなので、ここは各々好きな画像でやってみてください。

後は、modalChangedメソッド内に、タップされた画像ごとに処理を書いたりするだけです。

今回は、print出力で、タップされた写真が格納されている配列([UIImageView])の番号を出力するようにしていますが...

以下のように場合分けすると、タップされた画像を判別し、その画像に適した処理ができると思います。

例えば、アニメの画像で、そのアニメについて詳しい情報が載っているビューに画面遷移するなどなど


modalChanged

    func modalChanged(TouchNumber: Int) {

switch TouchNumber{

case 0:
println("0");
case 1:
println("1");
case 2:
println("2");
default:
println("hoge");
}
}


result.png