Android Kotlin基礎講座 02.3: レイアウトエディターを利用したレイアウトの位置制約付け

タスク：ボタンにクリックハンドラーを追加する

このタスクでは、それぞれのボタンビューにクリックハンドラーを追加します。クリックハンドラーはTextViewの色を変更します。

1. res/values/colors.xmlに以下のカラーリソースを追加してください。

<color name="my_green">#12C700</color>
<color name="my_red">#E54304</color>
<color name="my_yellow">#FFC107</color>

2. MainActivity.ktで、findViewByIdを使って三つのボタンビューの参照を取得します。以下のコードをsetListeners()クリックハンドラー関数のclikableViewsの宣言の上に追加してください。

val redButton = findViewById<TextView>(R.id.red_button)
val greenButton = findViewById<TextView>(R.id.green_button)
val yellowButton = findViewById<TextView>(R.id.yellow_button)

3. setListeners()の中で、clikableViewsというリストの中に今取得したボタンの参照を追加してください。

private fun setListeners() {
   ...
   val clickableViews: List<View> =
       listOf(boxOneText, boxTwoText, boxThreeText,
boxFourText, boxFiveText, rootConstraintLayout,
redButton, greenButton, yellowButton
)
   ... 
}

4. makeColored()関数の中に、ユーザーがボタンをタップした際にテキストビューの色を変更するためのコードを追加してください。以下のように、else文の上にコードを追加してください。

private fun makeColored(view: View) {
   when (view.id) {

      ...

       // Boxes using custom colors for background
       R.id.red_button -> box_three_text.setBackgroundResource(R.color.my_red)
       R.id.yellow_button -> box_four_text.setBackgroundResource(R.color.my_yellow)
       R.id.green_button -> box_five_text.setBackgroundResource(R.color.my_green)

       else -> view.setBackgroundColor(Color.LTGRAY)
   }
}

5. 最終的なアプリを起動してください。テキストビューやボタンをクリックしてください。以下のような画面が表示されます。
   
   

完成済みプロジェクト

完成済みプロジェクトは次のリンクからダウンロードできます。

ColorMyViews