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

このページにはプロモーションが含まれています

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

Contents

プロジェクト作成
画面レイアウト作成
ソースコード作成
プログラムの動作

プロジェクト作成

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

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を下記のように編集します。例によって１行目は自分のプロジェクトのパッケージ名に合わせて変更してください。

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は様々な画面タッチ時の情報を持っており、関数を実行することでその情報を取得することが可能です。

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