Kotlin で setOnClickListener を使用する

David Mbochi Njonge 2023年1月30日
  1. Kotlin で新しいプロジェクトを作成し、ボタンを追加する
  2. Kotlin でコールバックなしで setOnClickListener() を使用する
  3. Kotlin でのコールバックで setOnCliclListener() を使用する
  4. Kotlin の Lambda 式で setOnClickListener() を使用する
  5. Kotlin の MainActivity クラスで View.OnClickListener インターフェイスを使用する
Kotlin で setOnClickListener を使用する

setOnClickListener() メソッドはイベントリスナーです。つまり、ボタンクリックなどのイベントが発生した場合にのみ呼び出されます。setOnClickListener()View クラスのメソッドであり、それを継承する任意のクラスで使用できます。

このチュートリアルでは、ボタンを使用して、実際のメソッドをテストします。Button クラスは、TextView クラスからメソッドを継承します。TextView クラスは、View 基本クラスからもメソッドを継承します。

Kotlin で新しいプロジェクトを作成し、ボタンを追加する

開発環境に移動し、アクティビティが空の新しい android プロジェクトを作成します。Kotlin がこのアプリケーションで選択された言語であることを確認してください。

ボタンコンポーネントを作成するには、レイアウトフォルダの下の activity_main.xml ファイルに移動し、次の XML コードを ConstraintLayout 内に貼り付けます。

<Button
            android:text="Click me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:id="@+id/click_me_btn"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

Kotlin でコールバックなしで setOnClickListener() を使用する

Kotlin の MainActivity クラスに移動し、次のコードを setContentView() メソッドの直後の onCreate() メソッドに貼り付けます。

  val clickMeBtn: Button = findViewById(R.id.click_me_btn)

        clickMeBtn.setOnClickListener {
            val toast = Toast
                .makeText(applicationContext,
                "You have clicked me",
                Toast.LENGTH_SHORT).show()
        }

findViewById() メソッドは、そのコンポーネントに固有の ID を使用して、レイアウト上に作成したボタンを取得するのに役立ちます。このメソッドは汎用メソッドであるため、View クラスから継承するすべてのコンポーネントを取得できます。

setOnClickListener() メソッドは引数としてコールバックを使用しますが、コールバックを渡さずに、このメソッド内で実行されるアクションを直接追加します。

これは、舞台裏でメソッドに追加された@Nullable アノテーションによって可能になります。注釈は、パラメーターがオプションまたは null であることを示しています。

setOnClickListener() メソッドを使用する場合、ボタンがクリック可能でない場合は、最初にボタンがクリック可能に設定されることに注意してください。

Toast クラスの makeText() 静的メソッドを使用してテキストを作成しました。このメッセージは画面に短時間表示された後、消えます。

アプリケーションを実行する

IDE ツールバーの右上にある[実行]アイコンを押して、アプリケーションを実行します。次の画像は、実行ボタンの位置を示しています。

実行中のアプリケーション

これにより、アプリケーションが実行され、仮想デバイスが起動され、仮想デバイスにインストールされます。CLICK ME というラベルの付いたボタンを押すと、以下に示すように、You have clicked me というラベルの付いたメッセージが画面の下部に表示されます。

コトリントーストメッセージ

Kotlin でのコールバックで setOnCliclListener() を使用する

前の例で説明したように、setOnClickListener() メソッドには、onClick() メソッドのコールバックであるオプションのパラメーターView.OnClickListener があります。

MainActivity クラスに移動し、次のコードを setContentView() メソッドのすぐ下の onCreate() メソッドに貼り付けます。前の例にコメントしてください。

 val clickMeBtn: Button = findViewById(R.id.click_me_btn)

 clickMeBtn.setOnClickListener(object : View.OnClickListener{
            override fun onClick(view: View?) {
                val toast = Toast
                    .makeText(applicationContext,
                    "You have clicked me",
                    Toast.LENGTH_SHORT).show()
            }
        })

上記の例では、View.OnClickLictener コールバックをメソッドに渡し、onClick() メソッドをオーバーライドしました。

onClick() メソッドには、クリックされたビューを示す View タイプのパラメーターがあります。onClick() 内のビューを使用して、背景色の変更などの任意のメソッドを実行できます。

この例では、前の例と同じようにトーストメッセージを表示しています。アプリケーションの実行とテストに使用したのと同じ手順を使用すると、同じ結果が得られます。

Kotlin の Lambda 式で setOnClickListener() を使用する

この例は、上記で説明した例と似ていますが、コールバックの onClick() メソッドをオーバーライドする代わりに、ラムダ式に変換します。

MainActivity クラスに移動し、次のコードを setContentView() メソッドの直後の onCreate() メソッドに貼り付けます。前の例にコメントしてください。

 val clickMeBtn: Button = findViewById(R.id.click_me_btn)

 clickMeBtn.setOnClickListener(View.OnClickListener { view ->
            Toast.makeText(applicationContext,
                "You have clicked me",
            Toast.LENGTH_SHORT).show()
         })

クリックされたビューにアクセスできるため、任意のメソッドを実行できますが、この例ではトーストメッセージのみを表示します。

最初の例の実行とテストに使用したのと同じ手順を使用すると、他の例で見たように、画面にトーストメッセージが表示されます。

Kotlin の MainActivity クラスで View.OnClickListener インターフェイスを使用する

View.OnClickListener コールバックはインターフェイスであり、以下に示すように、このインターフェイスを MainActivity クラスに実装できます。

class MainActivity : AppCompatActivity(), View.OnClickListener {
}

インターフェイスを実装したら、このクラス内に onClick() メソッドを実装する必要があります。次のコードをコピーして、MainActivity クラス内に貼り付けます。

    override fun onClick(view: View?){
        when(view?.id){
            R.id.click_me_btn -> {
                Toast.makeText(applicationContext,
                "You have clicked me",
                Toast.LENGTH_SHORT).show()
            }
        }
    }

onClick() メソッドを使用すると、クリックしたビューにアクセスできますが、ID でコンポーネントを取得していないため、switch ステートメントと同じように機能する when ステートメントを使用して、クリックされたコンポーネント。

idclick_me_btn の id と一致する場合、矢印関数内に続く機能が実行されます。この例では、画面にトーストメッセージのみを表示します。

前の例を実行してテストするために使用したのと同じ手順を使用します。この例では、期待どおりの結果が表示されます。

David Mbochi Njonge avatar David Mbochi Njonge avatar

David is a back end developer with a major in computer science. He loves to solve problems using technology, learning new things, and making new friends. David is currently a technical writer who enjoys making hard concepts easier for other developers to understand and his work has been published on multiple sites.

LinkedIn GitHub