カテゴリー
Kotlin言語

ゼロから始めるAndroidアプリ(Kotlin編)Unit1 – 4 第4回 前半:Kotlinで画像を表示する

Android Developers > スタートガイド > Kotlin と Android をゼロから学ぶ > Unit1 – Kotlin を用いた Android の基本Unit1-4 第4回 前半 の内容をまとめたものです(翻訳ではありません)


Unit1 – 4 の 第4回 前半

第4回 前半 の内容は以下の通りです

  • 作成済みのAndroidアプリを改良する
  • TextView で表示していた結果を、サイコロの目の画像で表示するように変更する
  • 使用する画像はこちらからダウンロードできる

画像表示できるようにアプリのUI画面を修正する

TextView を削除して、ImageView を追加します

  1. Android Studio を起動する
  2. Unit1 – 4 第2回 で作成したプロジェクトを開く
  3. Project activity_main.xml をダブルクリックする(app > res > layout > activity_main.xml)Layout Editor が開く
  4. TextView を削除する・・・Component Tree から TextView を選択して Del キーを押す
    • View 部品が増えてきて Design view 上での部品の選択が難しくなったら Component Tree 上で選択します
    • Component TreeButton に警告が出る(クリック時の表示先がなくなったため)が、処理は変えるため無視してよい
  5. レイアウトに ImageView を追加する
    • Pallet から ImageView をつかんで Button の上あたりにドロップする
    • Pick a Resource ダイアログが開くので、とりあえず Sample data の中にある avatars を選んで OK する
    • Component Tree に、Button ImageView に constraint(制約)が設定されていない旨の警告が出る
  6. Button ImageView の constraint(制約)を設定する
    • Design view 上でハンドルをドラッグして、水平方向、垂直方向にそれぞれ constraint(制約)を設定する
  7. ダウンロードしておいたサイコロ画像(dice_1.pngdice_6.png, 8bit, 800×892)をリソースに読み込む
    • Resource ManagerView > Tool Windows > Resource Manager)を開く。左上のをクリックして Import Drawables を選択
    • ファイル選択のダイアログが開くので、ダウンロードしてある6つのpngファイルを選択。Open > Next > Import とクリックしてインポート
    • Resource ManagerDrawables、あるいは Project のリソースフォルダ(app>res>drawable)でファイルが読み込まれていることを確認する
  8. ImageView に表示されている avatar を、実際に使うサイコロの画像に置き換える
    • Design viewImageView を選択
    • 右の Attributes にある Declared Attributes セクションの中に srcCompat という項目がある。現在設定されている avatar がアイコンでちっちゃく表示されているので、それをクリック
    • 画像ファイルを選択するダイアログが開くので、サイコロの画像を選んで OK をクリック
  9. ImageView に表示される画像の大きさを調整する
    • デフォルトでは画像の大きさに合わせて大きく表示されている。これを修正する
    • Design viewImageView を選択
    • Attributes の Constraints Widget の下に layout_width と layout_height という項目(どちらも wrap_content に設定されている)がある。これらを 160dp と 200dp に変更する
  10. Button の表示位置を調整する
    • 画像に対して Button が近いので調整する
    • Design viewButton を選択
    • Attributes の Constraints Widget で、上側のマージンを 16dp に変更する

ボタンがクリックされたらサイコロ画像が表示されるようにKotlinコードを修正する

Project から MainActivity.kt を開きます

場所は app > java > com.example.diceroller > MainActivity.kt ですね

class MainActivity : AppCompatActivity() {

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

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           rollDice()
       }
   }

    private fun rollDice() {
        val dice = Dice(6)
        val diceRoll = dice.roll()
        val resultTextView: TextView = findViewById(R.id.textView)
        resultTextView.text = diceRoll.toString()
    }

}

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }

}

TextView が使われているところに警告が出てるみたい

うん、UI画面から TextView を削除しちゃったからなの

どうしたらいいのかな?

いらなくなった TextView のところを削除、かわりに ImageView を使うコードに書き換えるの

気を付けないと間違えそう…

とりあえず、ボタンを押すと「2の目」の画像を表示するように書き換えてみますね

class MainActivity : AppCompatActivity() {

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

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           rollDice()
       }
   }

    private fun rollDice() {
        val dice = Dice(6)
        val diceRoll = dice.roll()
        val diceImage: ImageView = findViewById(R.id.imageView)
        diceImage.setImageResource(R.drawable.dice_2)
    }

}

class Dice(val numSides: Int) {

    fun roll(): Int {
        return (1..numSides).random()
    }

}
  • rollDice() メソッドの中の TextView を使っている部分を削除する(2行分のコード)
  • 代わりにまず ImageView型の diceImage という変数を宣言
    • UI画面にある ImageView のリソースIDを確認したいときは、Design view を表示して Attributes id 項目を見ます(デフォルトで imageView
    • リソースIDは camelCase にします(書き方が正しくないと Android Studio がエラーを出す)
    • リソースID imageView は、Kotlinコードからは R.id.imageView で参照できる
  • ボタンを押したときの画像を setImageResource() メソッドで指定します
    • 画像のリソースID dice_2 は、Kotlinコードからは R.drawable.dice_2 で参照できる

今回はここまでで完成ですよね

うん、アプリをビルドして実行してみてね

あれ、ボタンしか表示されない…

今のコードだとアプリを起動しただけだと画像は表示されないの。ボタンを押して画像表示するのね

アプリの画面って Design view で作った感じと違うこともあるんですね

うん、Design view の表示は配置を考えるためのもの。アプリが動くと見た目が変わることもあるの