すだアプリ開発者のみなさま〜！いかがお過ごしでしょうか！
メモリアインクのすだです！
本日は Kotlinで
画面のUIをタップ時に呼び出される便利なメソッド（setOnClickListener、OnClickListener）を用いて、
動的に画面の背景色を変更する方法をご紹介します。
※ ボタンの表示とカスタマイズについては、以下の記事で解説しております。↓こちらもぜひご覧ください！
この記事を読んでわかること…
・setOnClickListenerの使い方
・OnClickListenerの使い方
・タップ時に背景色を変更する方法（setBackgroundResource）
環境
- Kotlin (ver 1.9.0)
- Android Studio (Giraffe | 2022.3.1 Patch 3)
setOnClickListenerの使い方
setOnClickListener は 特定のUIをタップした際に呼び出されるイベントを設定できるものです。
buttonPink.setOnClickListener {
// ここにUIタップ時に走る処理を書く
}上記のように、対象のView（オブジェクト）に ドットつなぎで「setOnClickListener」をセットします。
基本的にはこのように、{} で囲った中に想定の処理を書くことで実現できます。（←ラムダ式）
OnClickListenerの使い方
実は、setOnClickListener{}の書き方は 複雑なコードを短くわかりやすく書いたものです。
そもそも画面のUIタップをしたときに設定する挙動について もう少し深掘りしていきます。
OnClickListenerとは、インタフェース（クラスが持つ共通な仕組みのこと）です。
このインタフェースを用意すると、クリックイベントが発生したときに呼び出されるメソッド onClick を定義できます。
class MyClickListener : View.OnClickListener {
override fun onClick(view: View) {
// タップ時に行いたい処理
}
}本来はこのような書き方で、インターフェースを利用してタップした時の処理を書きます。
class ButtonClickListener(private val screenLayout: ConstraintLayout) : View.OnClickListener {
override fun onClick(view: View) {
// タップ時に行いたい処理
}
}
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
~~~ 省略 ~~~
// 新しくインスタンスを生成
val buttonClickListener = ButtonClickListener(screenLayout)
// ボタンタップ時のイベント
buttonPink.setOnClickListener(buttonClickListener)
}
}しかし、
これだと長い！もっと短くわかりやすく書きたい！ということで…↓
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
~~~ 省略 ~~~
// ボタンタップ時のイベント
buttonPink.setOnClickListener(object : OnClickListener {
override fun onClick(view: View?) {
// タップ時に行いたい処理
}
})
}
}こんな感じで短縮して インターフェースを実装しながらタップ時の処理を実装することができます。
さらに ラムダ式という特別な書き方（簡単な処理や機能を表現するための方法）で
最終的に以下のように 短く短く短く！書くことができます。↓
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
~~~ 省略 ~~~
buttonPink.setOnClickListener {
// タップ時に行いたい処理
}
}
}たとえば ボタンが複数ある場合、OnClickListener を使用してタップ時の処理を共通化できますね！全てのボタンに同じ処理を適用でき、コードがシンプルになる予感です。
逆に、ボタンごとに異なる処理が必要な場合には、setOnClickListener を使って各ボタンに独自の処理を設定できますね〜
タップ時に背景色を変更する方法（setBackgroundResource）
それでは、タップ時のイベントリスナーを学んだところで
実際に「背景色を変更する」というイベントを実装してみましょう。
まずは、レイアウトファイルに ボタンを用意します↓
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".MainActivity" >
<Button
android:id="@+id/button_pink"
android:text="背景をピンク色にするボタン"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>このとき、大枠のレイアウトとボタンに android:idを持たせてあげてください。
次に、res/values 配下に存在するcolors.xml ファイルに、上記のように使いたい色を記述します↓
<resources>
<color name="pink">#ffc0cb</color>
</resources>最後に、Activityファイルに クリックリスナーを用意します。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val screenLayout: LinearLayout = findViewById(R.id.screen)
val buttonPink: Button = findViewById(R.id.button_pink)
// ボタン押下時に背景色を変更する
buttonPink.setOnClickListener {
screenLayout.setBackgroundResource(R.color.pink)
}
}
}上記では、指定したidをもとに取得した該当のボタン（オブジェクト）に、setOnClickListenerメソッドを付与しています。
そして、背景色をセットする処理は 指定したidをもとに取得した該当のレイアウト（オブジェクト）に、setBackgroundResourceメソッドを付与しています。
setBackgroundResource はviewの背景を変更するためのメソッドです。
screenLayout.setBackgroundResource(R.color.pink)引数に、変更したい色をセットすることによって プログラム上で動的に色が変更されます。
画面表示、操作してみると…↓
画面中央のボタンをタップすることで、背景色が動的に変更されるようになりました！
すだタップ時に画面遷移したり、APIを組み込んでデータを操作したりなど イベントリスナーを活用して色々な処理を結びつけることができそうですね〜！
まとめ
おつかれさまでした！
タップイベントの基本について じっくり学べたかと思います！
文章を読んでみてもいまいちピンとこない場合、まずはコードを書いて動かしてみることをおすすめします。
動くことによってよりイメージが湧きやすくなり、理解が深まるはずです！
すだ技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？
それではまた次の記事でお会いしましょう！
コメント
コメント一覧 （1件）
[…] 【Android】KotlinにおけるButton（ボタン）押下時のタップイベントリスナー（… […]