複数の画像を動かす。そしてその画像を最前面へ。(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なんかを上手く使った方が良さそうですね。実装しながら思いました。
もっとかっこいいコード、教えてやる、という方、連絡お願いします!