0
2

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.

[Swift] UIImageViewをスクロースして選択するViewを作る

Posted at

imageSelecter.gif

UIImageViewをスクロースして選択するViewのソースです。

import UIKit

protocol SelectViewDelegate{
    func selectChanged(image: UIImage)
}

class SelectView : UIScrollView {
    static let kNotToucheTagId = -1
    var images: [UIImage] = [UIImage(named: "01.png")!,
                             UIImage(named: "02.png")!,
                             UIImage(named: "03.png")!,
                             UIImage(named: "04.png")!,
                             UIImage(named: "05.png")!,
                             UIImage(named: "06.png")!,
                             UIImage(named: "11.png")!,
                             UIImage(named: "12.png")!,
                             UIImage(named: "13.png")!,
                             UIImage(named: "14.png")!,
                             UIImage(named: "15.png")!,
                             UIImage(named: "16.png")!,]
    var selectViewDelegate: SelectViewDelegate? = nil
    var imageViews: [UIImageView] = []
    var imageRect:CGRect? = nil
    
    override func didMoveToSuperview() {
        imageRect = CGRect(x: 0, y: 0, width: self.bounds.height, height: self.bounds.height)
        self.contentSize = CGSize(width: self.bounds.height*CGFloat(images.count), height: self.bounds.height)
        self.isUserInteractionEnabled = true
        self.tag = SelectView.kNotToucheTagId
        setImageViews()
    }
    
    func setImageViews() {
        let x = self.bounds.height/2
        let y = self.bounds.height/2
        for i in 0..<images.count {
            imageViews.insert(UIImageView(), at: i)
            imageViews[i] = UIImageView(frame: imageRect!)
            imageViews[i].image = images[i]
            imageViews[i].layer.position = CGPoint(x: x+imageRect!.width*CGFloat(i), y:y)
            imageViews[i].isUserInteractionEnabled = true
            imageViews[i].tag = i
            self.addSubview(imageViews[i])
        }
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        if selectViewDelegate == nil {
            return
        }
        for touch: UITouch in touches {
            if touch.view!.tag == SelectView.kNotToucheTagId {
                return
            }
            self.selectViewDelegate!.selectChanged(image: images[touch.view!.tag])
            break
        }
    }
}

利用する側ViewControllerのソースは以下です。

import UIKit

class ViewController: UIViewController, SelectViewDelegate {

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var selectView: SelectView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let image = UIImage(named: "01.png")
        imageView.image = image
        selectView.selectViewDelegate = self
    }
    
    func selectChanged(image: UIImage) {
        imageView.image = image
    }
}

Githubに上記ソースをUPしています。
UIImageViewをスクロースして選択するView

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?