Android Kotlin

さいころアプリを作成する~ボタンに役割を持たせる~

  前回はさいころアプリの画面などを作成しました。前作成したボタンは押しても何も起きなかったので、ボタンを押したら何か動作するようにします。

(googleの無料講座の順に進んでいます。)

前回の記事とgoogleの講座はこちらです。

次回の記事はこちらです。

ボタンがクリックされたときにメッセージを表示する

ボタンがクリックされたら画面上に何か表示されるようにします。
MainActivity内のonCreate()メソッド内にあるsetContentView()の下に下記コードを追加します。
val rollButton: Button = findViewById(R.id.button)
追加した後の画面はこの通りです。

今回追加したfindViewByIDメソッドはレイアウト内にあるボタンを見つけます。
R.id.buttonというのはButtonのリソースIDのことらしいです。
Androidはアプリ内のリソースにID番号を自動で割り当てます。

リソースIDはR.<type>.<name>の形式となります。
例えばテキストの場合はR.string.rollでビューIDの場合はR.id.buttonのようになります。

このコードはButtonオブジェクトへの参照をrollButton変数に保存しますが、Buttonオブジェクト自体には保存しないみたいです。

Kotlinの仕様でオブジェクトを変数に代入するときはオブジェクト本体を保存するのではなく、オブジェクトの参照を保存するみたいです。

参照のイメージとしてはマイナンバーのようなもので、マイナンバーと個人は紐づいていますが、マイナンバーの番号を控えてコピーしてもその人自身をコピーしているわけではないです。

そしてここで前回設定したAuto importが仕事をしています。
自動的にandroid.widget.Buttonがimportされています。

もしAuto importがうまく働かない場合はButtonが赤くハイライトされます。
そういった場合はButtonという単語にカーソルを置き、Alt+Enter(MACはOption＋Enter)を押すことで手動でimportすることができます。

次にclick listenerというものを使いボタンとコードを関連付けます。
これはユーザがタップかクリックした際に何かをするコードです。

rollButtonオブジェクトとsetOnClickLsitenerメソッドを使用します。
Android Studioは優秀で、途中まで入力すると候補を表示して補完してくれます。(Tabキーで決定です。)

2つありますが、{}のものを選んでください。
この{}の中にはボタンが押された時の指示を記述します。
今回はトーストを表示させユーザーに短いメッセージを表示します。
(いきなりトーストという概念が出てきて分からなかったので、下記記事を読みました)

トーストはToast.makeTextをコールして作成します。表示するテキストは例に倣ってDice Rolled!とします。
val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

これだけだと表示されないので、show()メソッドを使います。
toast.show()
現時点でのソースコードは下記のようになっています。
(Toast.makeText内にcontextやtextと表示されてますが、Android Studioに表示されている説明文で、ソースコードには影響していません。)

この状態でコンパイルし、ROLLボタンを押すとDice Rolled!というメッセージが表示されます。

ちなみにshow()を1行で記述する方法もあります。
Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()
こちらのほうが一般的な記述みたいです。

ボタンをクリックした際のテキストビューの動作を変える

トースト機能は一時的にしか表示ができません。
今回はRollボタンがクリックした際に画面上に表示されるテキストビューの内容を更新するコードを書きます。

まず初めにactivity_main.xmlに移動し、テキストビューをクリックしてidを確認します。
idを確認したところtextViewでした。(下記赤枠)

そしてまた、MainActivityに戻ります。
先ほど作成したトーストのコードを削除します。

新しい変数"resultTextView"を用意してfindViewByIDを使った結果を格納します。

そして、"resultTextView"に6を格納します。
val resultTextView: TextView = findViewById(R.id.textView)
resultTextView.text = "6" 

ここまでのコードは下記のとおりです。
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 {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}
今まではAttributesでテキストを設定しましたが、今回はコード上でテキストを設定できるようになりました。

このコードを実行してROLLボタンを押した結果です。


今のままでは常に6が表示されてしまうので、次回からはさいころを振ってその値を表示できるようにします。

さいころのロジックを追加する

このロジックは前作ったものを使いまわすことができます。
MainActivityクラスの次に下記クラスを追加します。
class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}
この時引数のnumSidesをマウスオーバーするとnumSides変数はプライベートにできますと表示されます。これはローカル変数にするかどうかの確認だと思います。
この変数はこのクラス内でしか使わないので、提案どおりプライベートにします。

マウスオーバーしたときにAlt+Shift+Enterでプライベートに変更することができます。

さいころを振るメソッドを追加する

さいころクラスを追加下ので、MainActivityを更新してさいころクラスを使用します。

先ほどclick listenerの中に6を固定で表示するコードを書きましたが、これを次のように置き換えます。
rollButton.setOnClickListener {
   rollDice()
}

当たり前ですが、rollDice関数は作成していないので、赤くエラーメッセージが表示されます。

修正案に従って、rollDice関数を作成します。

これでrollDice関数が作成されました。

TODOを削除して次のように変更します。
private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()//Diceクラスのroll関数をコール
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()//diceRollが数字なので、文字列に変換する
}

これでさいころアプリの完成です。
ROLLボタンを押すたびにランダムな数字が表示されるようになります。

(補足)コードを調整する

とりあえず動作するように作ったコードは乱雑になって、後ほどメンテナンスするときにメンテしにくくなってしまします。

なので、作業が終わったら簡単なクリーンアップ作業を習慣的に行ったほうがいいです。この習慣はプロのAndroid開発者がコードを書くときに実践していることです。

どの言語でもあると思いますが、Androidコードにもコーディングガイドが存在します。

今回はこのスタイルガイドに則ってコードを変えていきます。

コードを短くする。

これはスタイルガイドには載ってないことですが、
コード短くすることでより簡潔にすることができます。

例えば今はrollButtonのclick listenerは次のようになっています。
rollButton.setOnClickListener {
    rollDice()
}
今回click listener内は1行しかないので1行にまとめます。
rollButton.setOnClickListener { rollDice() }

コードのフォーマットを変える

ここではAndroid用に推奨しているフォーマットに則っているか確認します。
MainActivityクラス内のコードをctrl+Aで全選択をした状態で、Code>Reformat Codeを選択します。
これで空白やインデントなどコードが更新されます。
変更がない場合はすでに正しいフォーマットで記述できているということになります。

コメントを追加していく

後で見直したときに自分のコードが何をやっていたかをすぐに思い出せるようにコメントを書いていきます。

コメントは書くクラスとメソッドに追加していくのが一般的です。
コメントには/**コメント内容**//で記述できます。

クラスに対するコメント例です
/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {
メソッドに対するコメント例です。
/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

コメントには//も使えます。
private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}
(コメントはコードの上部に書くみたいですね。今までコードの横に書いてました)

コメントを追加することは重要なことなので、十分な時間をかけてください。
今回のようにコメントやフォーマットを変更した場合は再度アプリを実行して、動作に影響を与えた変更が無いかを確認してください。

詳しく知りたい方へ


0 件のコメント :

コメントを投稿