LoginSignup
23
24

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-05-29

以前アプリ開発をしていた際、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

23
24
1

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
23
24