lelelemon’s blog

カメの歩みでのんびり学んでいます。

Androidアプリ開発の勉強ーリスナ

概要

Android アプリ開発の勉強でユーザー操作をトリガーに任意の処理を行うリスナーの使い方を勉強したのでその備忘録です。

前回作成したサンプル画面に対して、リスナーを追加していきます。

ブログ記事編集 - はてなブログ (hatena.ne.jp)

使用環境

内容

まずはリスナーについて。

ユーザーがボタンタップするなどのアクションを行う、これをイベントと呼ぶ。

そのイベントに対応した処理のことを、イベントハンドラと呼ぶ。（例：ボタンタップしたら、フォームに入力された内容を送信する）

そして、上記のようなユーザーのボタンタップイベントを検知するものを、リスナと呼ぶ。

 

下記のような流れとなるようです。

  1. ユーザーによるボタンタップ（イベント）
  2. リスナがボタンタップイベントを検知（リスナ）
  3. ボタンイベントに対応するイベントハンドラを実行（イベントハンドラ）

 

下記では上記の流れを行えるようにサンプル画面を修正していきます。

 

手順１：画面部品を用意

activity_main.xml を下記内容に変更。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/HelloTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:text="@string/hello_title"/>

    <EditText
        android:id="@+id/EditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:inputType="text"/>

    <Button
        android:id="@+id/btClick"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/hello_button"/>

    <TextView
        android:id="@+id/HelloOutput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"/>

</LinearLayout>

 

この状態での画面表示内容は下記のようになっている。

この後の手順で、テキストフィールドに任意の内容を入力し、Hello ボタンをタップしたら 、Hello ボタン下部に入力内容が表示されるようにリスナを設定する。

 

 

手順２：リスナを定義

ここからは MainActivity.kt を編集していく。

ちなみに、MainActivity.kt は初期状態では下記の内容となっており、

package com.example.samplescreen

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

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

 

setContentView(R.layout.activity_main)

↑の部分で activity_main.xml を読み込んでいることがわかった。

なお、onCreate は MainActivity が読み込まれたときに実行される処理で、ここにリスナを追加していく。

 

MainActivity 内に以下のようなリスナを定義。

View.OnclickListener が今回使用するリスナで、Viewに実行したいイベント処理に応じたリスナインターフェイスが用意されており、インターフェイスを継承する形でリスナを実装する。

 

private inner class ButtonClickListener : View.OnClickListener {
    @SuppressLint("SetTextI18n")
    override fun onClick(v: View?) {
        // 入力・出力対象の画面部品を取得
        val input = findViewById<EditText>(R.id.EditText)
        val output = findViewById<TextView>(R.id.HelloOutput)

        // 入力値を読み込む
        val inputText = input.text.toString()

        // 入力値を画面に反映
        output.text = "入力値：$inputText"

    }
}

 

そして最後に、onCreate 内にリスナを設定する処理を追加する。

 

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

    val btClickButton = findViewById<Button>(R.id.btClick)
    // リスナをインスタンス化
    val listener = ButtonClickListener()
    // リスナを設定
    btClickButton.setOnClickListener(listener)
}
 
手順３：エミュレーターを立ち上げ、アプリ起動

テキストフィールドに任意の文字列を入力し、Hello ボタンをタップすると、

以下のように入力した内容が画面に表示される。

 

 

参考