【Android-Codelabs】3/36 〜 レイアウトXMLでのImageViewの使い方 〜

2019年にGoogleから，Web上でAndroidを学べるコースが提供されました．(Android Kotlin Fundamentals Course)
この記事では，そのコースを実際にやってみてアウトプットしてみるといった内容です．
何かツッコミなどあれば編集リクエストかコメントかTwitterでいただければ修正いたします

#目指す成果物
前の記事でスタートしたDiceRollerアプリを使ってビルドしていき，サイコロが転がる時に変化するサイコロ画像を追加します．

前回の記事のアプリをスタートしていないときは，ソースコードをダウンロードできます．
ソースコード：
https://github.com/syuheifujita/android-codeLab-fundamental-1-2

#ステップ
###1.　画像リソースを追加する

まず前回のプロジェクトを開きます．
（前回のプロジェクトを持っていない方はソースコードをダウンロードすることができます．https://github.com/syuheifujita/android-codeLab-fundamental-1-2）

次にresフォルダーを展開し，drawableを展開します．

ここには画像とアイコン，色，文字列，レイアウトXMLなどのリソースがある場所です．
ここから，サイコロ画像をダウンロードしてください．

それらすべてを，drawableフォルダーへドラックしてください．
※ファイルは、drawable24フォルダーではなく、drawableフォルダーを指定すること

dice_1.xmlをダブルクリックして，XMLコードを確認します．そしてプレビューをクリックして実際にどのように見えるか確認してみましょう．

次に，TextViewをImageViewに置き換えて，画像を表示させましょう．
activity_main.xmlを開き，テキストをクリックします．
レイアウトXMLを開けたら，<TextView>の要素を削除して，<ImageView>の要素を次のように追加しましょう．

<ImageView
   android:id="@+id/dice_image"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:src="@drawable/dice_1" />

ここでの新しい要素はandroid:srcというもので，画像リソースを参照するための要素です．
プレビューをクリックしてこのようになることを確認してみてください．

また本番では，最初の画面は何も画像を表示させないので，android:src="@drawable/empty_diceを指定しておきましょう．

###2.　Kotlinのコードを更新する

前回まででは，関数rollDiceが次のようになっていました．

private fun rollDice() {
   val randomInt = (1..6).random()

   val resultText: TextView = findViewById(R.id.result_text)
   resultText.text = randomInt.toString()
}

TextViewは使用しなくなったので，次のコードは削除しましょう．
val resultText: TextView = findViewById(R.id.result_text) resultText.text = randomInt.toString()

そして，新しくImageVIewを使用するので，findViewByIdでビューを参照しましょう．次のコードを追加します．

val diceImage: ImageView = findViewById(R.id.dice_image)

次に，whenブロックですごろく画像を，random()値によって場合わけしましょう．
IDと同様に，Rクラス内の値を指定してdrawableフォルダー内の画像を参照できます．

val drawableResource = when (randomInt) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   else -> R.drawable.dice_6
}

ImageViewの値の更新には，setImageResource()を使います．次のコードをwhenブロックの下に書きたしましょう．

diceImage.setImageResource(drawableResource)

これでおしまいです．
アプリを，Runから実行してみましょう．

ROLLボタンをクリックすると，画像がランダムに更新されれば成功です．

#まとめ

#宿題

DiceRollerアプリを変更して、2つのサイコロを作成します。
ただし，各ダイスの値が互いに独立している必要があります。

答え

#クイズ

1問目
<ImageView>で使用される画像リソースを参照する属性はどれですか？

android:srcCompat
app:src
tools:src
tools:sourceImage

2問目
Kotlinコードで，ImageViewの画像リソースを変更する方法はどれですか？

setImageResource()
setImageURI()
setImage()
setImageRes()

3問目
Kotlinコードで，変数宣言で用いられるlateinitというキーワードは何を示していますか？

変数は初期化されません
変数はアプリの実行時にのみ初期化されます
変数は自動的にに初期化されnullます
変数は後で初期化されます。約束します

#参考資料

Codelabs by Google
https://codelabs.developers.google.com/android-kotlin-fundamentals/

###ソースコード
Github:
https://github.com/syuheifujita/android-codelab-fundamental-1-2

###言葉の定義