【Android】Viewをドラッグして移動させる【Kotlin】

はじめに

今回は　Viewをドラッグして動かすアニメーションを色々触ったのでその一部をメモがわりに記事にしておこうと思います。

実践

サクッと　初期設定のHello World!を動かしていきます。

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val textView: TextView = findViewById(R.id.text_view)

　　　　　　　　　　　　　　　　// タッチする前のViewの位置を常に持っておきたいので、TouchListener外でインスタンス化
        var oldPositionX = 0
        var oldPositionY = 0

        textView.setOnTouchListener { view, event ->![Something went wrong]()

            val newPositionX = event.rawX.toInt()
            val newPositionY = event.rawY.toInt()
            
            when (event.action) {
                MotionEvent.ACTION_MOVE -> {
                　　　　　　　// 移動後のViewの4辺の位置を取得
                    val viewLeftPosition: Int = view.left + (newPositionX - oldPositionX)
                    val viewRightPoint: Int = viewLeftPosition + view.width
                    val viewTopPosition: Int = view.top + (newPositionY - oldPositionY)
                    val viewUnderPoint: Int = viewTopPosition + view.height
                    
                    // 画像の位置を設定する
                    view.layout(viewLeftPosition, viewTopPosition, viewRightPoint, viewUnderPoint)
                }

                else -> {}
            }
            
            // タッチした位置を古い位置とする
            oldPositionX = newPositionX
            oldPositionY = newPositionY
            
            return@setOnTouchListener true
        }
    }

このように動かすことができます！

離した時に元の位置に戻す

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView: TextView = findViewById(R.id.text_view)

        var oldPositionX = 0
        var oldPositionY = 0
+        // 元々Viewの位置
+        var homePositionX = 0
+        var homePositionY = 0
+        // Viewが動いた否か
+        var isHomePosition = true

        textView.setOnTouchListener { view, event ->
+            if (isHomePosition) {
+                homePositionX = view.left
+                homePositionY = view.top
+                isHomePosition = false
+            }

            val newPositionX = event.rawX.toInt()
            val newPositionY = event.rawY.toInt()
            when (event.action) {
                MotionEvent.ACTION_MOVE -> {
                    val viewLeftPosition: Int = view.left + (newPositionX - oldPositionX)
                    val viewTopPosition: Int = view.top + (newPositionY - oldPositionY)
                    val viewRightPoint: Int = viewLeftPosition + view.width
                    val viewUnderPoint: Int = viewTopPosition + view.height
                    
                    // 画像の位置を設定する
                    view.layout(viewLeftPosition, viewTopPosition, viewRightPoint, viewUnderPoint)
                }
                
+                MotionEvent.ACTION_UP -> {
+                    // Viewの位置を元に戻す
+                    // それぞれ四角の位置を記録しておいた
+                    view.layout(
+                        homePositionX,
+                        homePositionY,
+                        homePositionX + view.width,
+                        homePositionY + view.height
+                    )
+                }

                else -> {}
            }
            
            // タッチした位置を古い位置とする
            oldPositionX = newPositionX
            oldPositionY = newPositionY
            
            return@setOnTouchListener true
        }
    }
}

真ん中へ戻るようになります！

おわりに

今回は　今後もどこかで使えそうだなって内容を再度調べ直して１から実装するのは、些か勿体無いなと感じたので 自分で作ったアニメーションの実装を復習ついでに記事にしてみました。
アニメーション関連は動きが直感的に分かりやすく、自分のやりたい動きにできた時の達成感がありますね。
他のアニメーションもいくつか作ったので後々記事にできたらと思います。