試行錯誤 10.1 （続・ジグソーパズル）

ジグソーパズルのピースを作ったので、コードを書いていきたいと思います。
今回は16個のピースを画面上にばらまいた状態を作り、ドラッグで動かす準備をするところまでをやってみます。
ピースの画像には、1から16までの通し番号が入った名前をつけておきます。

ピースを並べる台と、配列を用意します。

        //台を作る
        let baseImg = UIImageView(frame: CGRectMake(10, 50, 300, 300))
        baseImg.backgroundColor = UIColor.grayColor()
        self.view.addSubview(baseImg)
        
        //ピースの数(1〜16)を入れる配列
        var pieceAray:[Int] = []
        
        for(var i=0; i<16; i++){
            pieceAray.append(i+1)
        }

4×4=16個のピースを作ります。

//4×4=16個のピースを作る
        for j in 0...3{
            for i in 0...3{
                
                //配列の要素数からランダムに値を取り(1〜16)、indexに入れる
                let index = Int(arc4random_uniform(UInt32(pieceAray.count)))
                
                //配列の(index+1)番目の要素を取り出しnumに入れる
                let num = pieceAray[index]
                
                //配列から取り除く
                pieceAray.removeAtIndex(index)
                
                //シャッフルされた数numを使って、画像をランダムに割り振ったimageViewを作る
                let pieces = UIImageView(frame: CGRectMake(CGFloat(75*i),CGFloat(75*j+40), 95, 95))
                let str = String(format:"img%d.png",num)
                pieces.image = UIImage(named: str)
                pieces.tag = num
                self.view.addSubview(pieces)
                
            }
        }

動かすと、以下のようになります。

ピースのimageViewの大きさは95×95、凹凸を除く図柄の大きさは75×75です。
台の上に乗っている状態は、以下のようになります。

ばらまいたような状態にするために、下記を追加します。

        let yoko = Int(arc4random_uniform(225) + 50)
        let tate = Int(arc4random_uniform(225) + 80)
                
        var point:CGPoint = pieces.center
        point.x = CGFloat(yoko)
        point.y = CGFloat(tate)
        pieces.center = CGPointMake(point.x, point.y)

動かすと、以下のようになります。

ドラッグできるようにするために、UIPanGestureRecognizerを使います。

以下にまとめておきます。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //台を作る
        let baseImg = UIImageView(frame: CGRectMake(10, 50, 300, 300))
        baseImg.backgroundColor = UIColor.grayColor()
        self.view.addSubview(baseImg)
        
        //ピースの数(1〜16)を入れる配列
        var pieceAray:[Int] = []
        
        for i in 0...15{
    
            pieceAray.append(i+1)
            
        }
        
        //4×4=16個のピースを作る
        for j in 0...3{
            for i in 0...3{
                
                //配列の要素数からランダムに値を取り(1〜16)、indexに入れる
                let index = Int(arc4random_uniform(UInt32(pieceAray.count)))
                
                //配列の(index+1)番目の要素を取り出しnumに入れる
                let num = pieceAray[index]
                
                //配列から取り除く
                pieceAray.removeAtIndex(index)
                
                //シャッフルされた数numを使って、画像をランダムに割り振ったimageViewを作る
                let pieces = UIImageView(frame: CGRectMake(CGFloat(75*i),CGFloat(75*j+40), 95, 95))
                let str = String(format:"img%d.png",num)
                pieces.image = UIImage(named: str)
                pieces.tag = num
                self.view.addSubview(pieces)
                
                //ピースをばらまいた状態にする
                let yoko = Int(arc4random_uniform(225) + 50)
                let tate = Int(arc4random_uniform(225) + 80)
                
                var point:CGPoint = pieces.center
                point.x = CGFloat(yoko)
                point.y = CGFloat(tate)
                pieces.center = CGPointMake(point.x, point.y)
                
                //UIPanGestureRecognizerを使用
                let movePieces:UIPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: "dragPieces:")
                pieces.addGestureRecognizer(movePieces)
                pieces.userInteractionEnabled = true
                
            }
        }
    }
    
    //ピースをドラッグしたら呼ばれる関数
    func dragPieces(sender:UIPanGestureRecognizer){
        
        print("Pan")
        
    }

次回は、実際にピースをドラッグできるようにしていきたいと思います。

以下を参考にさせていただきましたm(__)m

040 GestureRecognizerのイベント取得 - Swift Docs

Swiftで配列の要素をシャッフルするプログラムを作ってみました - hiramatch's blog