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

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

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

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


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

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

次に`res`フォルダーを展開し，`drawable`を展開します．
![1-3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/9a371724-d15c-4cb5-7118-6fa4bfdfb71f.png)


ここには画像とアイコン，色，文字列，レイアウトXMLなどのリソースがある場所です．
[ここ](https://github.com/google-developer-training/android-kotlin-fundamentals-starter-apps/blob/master/DiceImages.zip)から，サイコロ画像をダウンロードしてください．

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

dice_1.xmlをダブルクリックして，XMLコードを確認します．そして`プレビュー`をクリックして実際にどのように見えるか確認してみましょう．
![1-3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/278576ec-dd62-14db-dd0c-0c8001c54db5.png)


次に，`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`というもので，画像リソースを参照するための要素です．
`プレビュー`をクリックしてこのようになることを確認してみてください．
![1-3-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/8ed622a6-9647-49d4-5c8b-4ecaae58e5d6.png)


また本番では，最初の画面は何も画像を表示させないので，`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つのサイコロを作成します。
ただし，各ダイスの値が互いに独立している必要があります。

[答え](https://github.com/google-developer-training/android-kotlin-fundamentals-apps/blob/master/DiceRollerFinal-challenge/app/src/main/java/com/example/android/diceroller/MainActivity.kt)

#クイズ
>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/
<img width="1206" alt="スクリーンショット 2020-01-31 3.41.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/e3064461-649d-8535-4fc3-79a68f40709a.png">

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

###言葉の定義