MILLEN BOX

音楽好きの組み込みソフトエンジニアによるプログラミング(主にiOSアプリ開発)の勉強の記録

複数の画像を動かす。そしてその画像を最前面へ。(UIImageView, swift 1.2, bringSubviewToFront)

複数の画像を動かしたくなりました。

Githubは以下です。

GitHub - anthrgrnwrld/anyImageControl

自分ポイント1

情報の保存用に以下のPropertyを作成しました。

    var startImagePoint: CGPoint?       //タッチ開始時のImageの座標を保存するProperty
    var currentImagePoint: CGPoint?     //タッチ中のImageの座標を保存するProperty
    var startTouchPoint: CGPoint?       //タッチ開始時のタッチ座標を保存するProperty
    var isImageInsideArray: [Bool] =    //どのImage内部を触ったかを管理する配列 (いらなかったかも...)
    [
        false,
        false,
        false,
        false,
        false,
        false
    ]

自分ポイント2

各イメージのタッチ操作を有効にしました。

    override func viewDidLoad() {
        super.viewDidLoad()

        //各Imageのタッチ操作を有効にする
        self.image1st.userInteractionEnabled = true
        self.image2nd.userInteractionEnabled = true
        self.image3rd.userInteractionEnabled = true
        self.image4th.userInteractionEnabled = true
        self.image5th.userInteractionEnabled = true
        self.image6th.userInteractionEnabled = true
        }
    }

自分ポイント3

あんまり慣れていないfor文の記法を使用してみました。

    override func viewDidLoad() {
       
        ...

        for (index, val) in enumerate(initialImagePointArray) {
            initialImagePointArray[index] = getImagePointTag(index + 1) //各Imageの初期座標を保存する
        }
    }

自分ポイント4

どの画像をタッチしているかどうかの判断にUIImageViewのtagを使用してみました。tagはStoryBoardにてあらかじめ入力済み。

    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        ...
        for (index, val) in enumerate(isImageInsideArray) {
            if tag == index + 1 {
               ...
            } else {
                ...

            }
        }
        
    }

自分ポイント5

自分ポイント4の条件下にて、タッチしている画像を最前面に持ってくるためにself.view.bringSubviewToFront(UIImageViewの名前)を実行しています。しかしAuto Layoutを有効にしているとself.view.bringSubviewToFront実行後、subViewが開始時の座標に戻ってしまうので注意です。今回は(仕方なく)Auto Layoutを無効にしています。(Auto Layout有効でsubViewの座標が戻らない方法、知りたい!)

    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        ...

        for (index, val) in enumerate(isImageInsideArray) {
            if tag == index + 1 {
                isImageInsideArray[index] = true            //タッチしているImageに対応するisImageInsideArrayをtrueにする
                startImagePoint = getImagePointTag(tag)     //Imageの座標(タッチ開始時)を取得
                bringImageToFrontTag(tag)                   //タッチしている画像を最前面に持ってくるメソッドを実行
            } else {
                isImageInsideArray[index] = false           //タッチしていない画像に対応するisImageInsideArrayをfalseにする

            }
        }
        
    }

    //引数のtagに対応したImageを最前面に持ってくるメソッド
    func bringImageToFrontTag(tag: Int) {
        switch tag {
        case 1:
            self.view.bringSubviewToFront(image1st)
        case 2:
            self.view.bringSubviewToFront(image2nd)
        case 3:
            self.view.bringSubviewToFront(image3rd)
        case 4:
            self.view.bringSubviewToFront(image4th)
        case 5:
            self.view.bringSubviewToFront(image5th)
        case 6:
            self.view.bringSubviewToFront(image6th)
        default:
            println("Error")
        }
    }

自分ポイント6

画像を開始時の状態に戻すボタンを(やっつけで)作成しました。アニメーションします。

    //Imageを初期位置に戻すメソッド
    @IBAction func pressInitButton(sender: AnyObject) {
        UIView.animateWithDuration(0.5, animations: { () -> Void in
            self.image1st.center.x = self.initialImagePointArray[0].x
            self.image1st.center.y = self.initialImagePointArray[0].y
            self.image2nd.center.x = self.initialImagePointArray[1].x
            self.image2nd.center.y = self.initialImagePointArray[1].y
            self.image3rd.center.x = self.initialImagePointArray[2].x
            self.image3rd.center.y = self.initialImagePointArray[2].y
            self.image4th.center.x = self.initialImagePointArray[3].x
            self.image4th.center.y = self.initialImagePointArray[3].y
            self.image5th.center.x = self.initialImagePointArray[4].x
            self.image5th.center.y = self.initialImagePointArray[4].y
            self.image6th.center.x = self.initialImagePointArray[5].x
            self.image6th.center.y = self.initialImagePointArray[5].y
        })
    }

複数のモノを扱う場合には配列、辞書、IBOutlet Collectionなんかを上手く使った方が良さそうですね。実装しながら思いました。

もっとかっこいいコード、教えてやる、という方、連絡お願いします!