More than 3 years have passed since last update.

初心者による初心者のための　kotlinクリックイベント

Last updated at 2021-05-30Posted at 2021-05-28

kotlinで生まれて初めてのアプリ制作。基本の基本であるクリックイベントになんとなく混乱している今日この頃です。しかし、そんな日々も今日で終わりにしたい！！！ということで、Qiita初投稿の今回は、kotlinクリックイベントの基本的な実装方法についてまとめました。

今回は以下４つの方法を扱います。

レイアウトに設置する方法
アクティビティ自体に実装する方法
ボタンに直接実装する方法
変数として実装する方法

実装するにあたって、私が躓いた点も合わせて紹介するので、参考になればと思います。

（独断と偏見によるおすすめ実装方法フローチャート）

#0.準備

myapplicationという名前のアプリを作るべく、ActivityMain.ktとmain_activity.xmlを以下のように用意しました。

ActivityMain.kt

package com.example.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast

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

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <Button
        android:id="@+id/button"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:text="PUSH"
        android:textSize="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

以上のように実装すると以下のような「Push」というボタンが表示されます。
ボタンをクリックすると「ボタンが押されました」という小さなポップアップ（=トースト）を表示するようにします。（画像参照）
今回はこれを基に、様々な方法でクリックイベントの実装を行います。

#1.レイアウトに設置する方法
（レイアウトファイル = .xmlファイル）
静的に実装すると言われたらこの方法、ボタンの変更予定がない場合におすすめです。

手順は以下の通りです。
①MainActivity.ktにクリック時の処理を実装
②activity_main.xml内のButtonにandroid:onClick="処理名”を追加

【私の躓きポイント】
onClick属性に指定したメソッドには以下の決まりがあります。
・引数にはViewのみを持つ
・voidを返す（=戻り値がない）
・使える可視性修飾子はpublicのみ（kotlinの場合、特に指定しないとデフォルトでpublicとなります）

ActivityMain.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
 fun buttonOnClick(view: View){ // ①クリック時の処理を追加
        Toast.makeText(this, "ボタンが押されました", Toast.LENGTH_LONG).show()
    }
}

activity_main.xml

    <Button
        android:id="@+id/button"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:text="PUSH"
        android:textSize="50dp"
        android:onClick="buttonOnClick" // ② ButtonにonClick属性を追加
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

#2.アクティビティ自体に実装する方法
ボタンが複数あり、どのボタンにも同じ処理（または同じような処理）を実装したい場合におすすめです。

手順は以下の通りです。
①MainActivityクラスにOnClickListenerを設置
②onCreate内でクリックイベントを設置したい部品（今回はボタン）のviewを取得
③取得したviewにsetOnClickListenerを設置
④onClickメソッドを用意し、クリック時の処理を追加

【私の躓きポイント】
以下は開発元から提供されている既存の要素であり、名称の変更はできません。
・View.OnClickListener（インターフェース）
・setOnClickListener( )（メソッド）
・onClick(view: View)（メソッド）

MainActivity.kt

class MainActivity : AppCompatActivity() , View.OnClickListener{ // ① OnClickListenerを設置

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

        val button = findViewById<Button>(R.id.button) // ②クリックしたいviewを取得
        button.setOnClickListener(this) // ③ viewにsetOnClickListenerを設置
    }

    override fun onClick(view: View){ // ④ onClickメソッドとクリック時の処理を追加
        Toast.makeText(this, "ボタンが押されました", Toast.LENGTH_LONG).show()
    }
}

以上でトースト機能は実装されますが、ボタンが複数ある場合は以下のように記述することもできます。参考までに。

MainActivity.kt

class MainActivity : AppCompatActivity() , View.OnClickListener{
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.button).setOnClickListener(this)
        findViewById<Button>(R.id.button1).setOnClickListener(this)
        findViewById<Button>(R.id.button2).setOnClickListener(this)
    }

    override fun onClick(view: View){
        when (view.id) { // when式を用いて条件分岐
            R.id.button -> Toast.makeText(this, "ボタンが押されました", Toast.LENGTH_LONG).show()
            R.id.button1 -> Toast.makeText(this, "豚に真珠", Toast.LENGTH_LONG).show()
            R.id.button2 -> Toast.makeText(this, "猫に小判", Toast.LENGTH_LONG).show()
        }
    }
}

#3.ボタンに直接実装する方法
ボタンが複数あり、それぞれ異なる処理を実装したいときにおすすめです。
ただし、「ボタンの個数」や「クリック処理の複雑さ」によってonCreate内が冗長になりやすいという特徴もあります。

手順は以下の通りです。
①onCreate内でクリックイベントを設置したい部品（今回はボタン）のviewを取得
②取得したviewにsetOnClickListenerを設置し、処理を実装

MainActivity.kt

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

        val button = findViewById<Button>(R.id.button) // ① viewを取得
        button.setOnClickListener{ // ② setOnClickListenerを設置し、処理を追加
            Toast.makeText(this, "ボタンが押されました", Toast.LENGTH_LONG).show()
        }
    }
}

#4.変数として実装する方法
こちらも 3 の方法と同様、ボタンが複数あり、それぞれ異なる処理を実装したいときにおすすめです。
ボタンそれぞれにセットするという意味では 3 の方法と同じですが、クリック時の処理をonCreateの外に書けるため、3 よりも冗長になりにくいという特徴があります。
object:という宣言を入れることで、インターフェースであるView.OnClickListenerをインスタンスとして実装します。

手順は以下の通りです。
①onCreate内でクリックイベントを設置したい部品（今回はボタン）のviewを取得する
②取得したviewにsetOnClickListener(変数名)を設置する
③View.OnClickListenerを実装し、変数に代入する

MainActivity.kt

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

        val button = findViewById<Button>(R.id.button) // ① viewを取得
        button.setOnClickListener(listener) // ② viewにsetOnClickListener(変数名)を設置
    }
    val listener = object: View.OnClickListener{ // ③処理を実装し、変数に代入
        override fun onClick(view: View) {
            Toast.makeText(this@MainActivity, "ボタンが押されました", Toast.LENGTH_LONG).show()
        }
    }
}

以上で実装は完了ですが、OnClickListenerの中にonClickが入っているため、読みにくさが残ります。「許せない...」という場合、以下のようにラムダ式を用いて書き換えることも可能です。

MainActivity.kt

    val listener =
        View.OnClickListener { Toast.makeText(this@MainActivity, "ボタンが押されました", Toast.LENGTH_LONG).show() }

以上、kotlin クリックイベントの4つの方法についてまとめました。
私がクリックイベントの基本になんとなく混乱する日々もいよいよ終わりです。

お疲れさまでした！

##参考

[DevelopersIO：KotlinでAndroidアプリケーションその2 [ボタンクリック]]
(https://dev.classmethod.jp/articles/android-kotlin-introduction-02/)
[developers：ボタン]
(https://developer.android.com/guide/topics/ui/controls/button?hl=ja)
Qiita：【Android】クリックイベントの基本的な実装
developers：onClickListener
[developers：setOnClickListener]
(https://developer.android.com/reference/android/view/View#setOnClickListener(android.view.View.OnClickListener))

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

初心者による初心者のための kotlinクリックイベント

初心者による初心者のための　kotlinクリックイベント