Kotlin & Android Studioでの画面タッチ時動作の制御を理解しよう

今回はシンプルにスマホの画面がタッチされた時に、タッチされた場所の座標を表示するアプリをKotlin & Android Studioで作成しました。このアプリのプログラムから画面タッチ時の動作を制御する方法を理解していきましょう。

プロジェクト作成

プロジェクト作成は下記の記事のAndroid Studioプロジェクト作成を参考にしていただければと思います。今回はプロジェクト名を「TouchTest」としています。

Android Studio をインストールして電卓アプリをKotlinで作成してみようAndroid Studio をインストールして電卓アプリをKotlinで作成してみよう

画面レイアウト作成

activity_main.xmlのTextタブでXMLファイルを下記のように編集します。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:text="(0, 0)"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/cordText" android:textSize="36sp" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginBottom="231dp"
            app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="225dp"
            app:layout_constraintTop_toTopOf="parent" android:textAlignment="center"
            app:layout_constraintHorizontal_bias="0.0" app:layout_constraintVertical_bias="0.0"/>
</android.support.constraint.ConstraintLayout>

このXMLにより画面レイアウトは下記のようになります。

スポンサーリンク

ソースコード作成

MainActivity.ktを下記のように編集します。例によって1行目は自分のプロジェクトのパッケージ名に合わせて変更してください。

package com.daeudaeu.test1

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.MotionEvent
import android.widget.TextView

class MainActivity : AppCompatActivity() {

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

    }

    override fun onTouchEvent(event: MotionEvent) :Boolean {
        val cord : TextView = findViewById(R.id.cordText)
        var x : Int
        var y : Int

        when(event.getAction()) {
            MotionEvent.ACTION_DOWN -> {
                x = event.getX().toInt()
                y = event.getY().toInt()
                cord.text = "($x, $y)"
            }
            MotionEvent.ACTION_UP -> {
                x = event.getX().toInt()
                y = event.getY().toInt()
                cord.text = "($x, $y)"
            }
        }
        return super.onTouchEvent(event)
    }

}

ソースコードのポイントを見ていきましょう。

・画面タッチ時に実行される関数

    override fun onTouchEvent(event: MotionEvent) :Boolean {
〜中略〜
        return super.onTouchEvent(event)
    }

この関数は画面がタッチされた時に実行されるものになります。つまり、画面をタッチされた時の動作を制御したいのであれば、この関数内を変更することで制御可能です。画面タッチ時にはこの関数が実行され、引数としてMotinEventクラスのインスタンスeventが渡されます。

・画面タッチ時のアクション

続いてonTouchEventの中を見てみましょう。

when(event.getAction()) {
    MotionEvent.ACTION_DOWN -> {
        x = event.getX().toInt()
        y = event.getY().toInt()
        cord.text = "($x, $y)"
    }
    MotionEvent.ACTION_UP -> {
        x = event.getX().toInt()
        y = event.getY().toInt()
        cord.text = "($x, $y)"
    }
}

eventはタッチ時に渡されるMotionEventクラスのオブジェクトです。このeventは様々な画面タッチ時の情報を持っており、関数を実行することでその情報を取得することが可能です。

例えば下記では、タッチに関するイベントの種類を取得することができます。

event.getAction()

画面タッチすることを考えてみてください。画面タッチといっても実際には、画面を押す・画面から離す・押したままにしておく、などさまざまなアクションがあるはずです。getAction関数では画面タッチが実行された時に、具体的にどのアクションが実行されたかどうかの情報を教えてくれる関数です。

具体的には、「画面を押す」アクションだった場合はgetAction関数はMotionEvent.ACTION_DOWNを返却し、「画面から離す」アクションだった場合はgetAction関数はMotionEvent.ACTION_UPを返却してくれます。

上記のソースコードのwhen文では、アクションが画面を押すの時と画面から離すの時にそれぞれ、そのアクションが実行された時の座標を表示するようにしています。getX関数とgetY関数もMotionEventクラスが提供する関数で、それぞれ画面タッチが行われたX座標・Y座標を返却する関数です。

MotionEventクラスが提供する関数・定数はAndroid Developersの下記ページで解説されています。タッチされた時に具体的にどのように制御するかをプログラミングする際に参考にすると良いと思います。

参考 MotionEventAndroid Developers

プログラムの動作

実行時の画面は下記のような感じです。シミュレータであれば、マウスをクリックした時と離した時に座標が更新されることが確認できると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です