2017/04/17

[Kotlin de Android] おみくじアプリを作ってみよう

スポンサーリンク

Kotlin de Android
第2回はHello worldのときのアプリより、もう少しだけアプリっぽいものにしてみたいと思います。

ドットインストールさんのAndroidアプリ開発のレッスンにも同様のものがあるのですが、
それをKotlinで書き換えてみました。

完成するとこのようなアプリになります。

kotlin_omikuji_01_1.png

占うボタンを押すとランダムでおみくじの結果が表示されて、

kotlin_omikuji_01_2.png

大吉のときは文字が赤くなります

というわけで、早速作っていきましょう♪

もくじ

1. プロジェクトを作ろう
2. 画面を作ろう
3. おみくじを表示させてみよう
4. 文字の色を変えてみよう
5. アプリのスタイルを変えてみよう
6. 動作確認してみよう

1. プロジェクトを作ろう

第1回の4. JavaをKotlinにしようまでを参考にしてプロジェクトの作成とKotlinの設定を行なってください。

プロジェクトの Application Name は「FortuneApp」にしました。

2. 画面を作ろう

では、activity_main.xmlを開いて、画面を作っていきましょう。

部品を追加しよう

今回はTextViewが2つ、Buttonが1つ必要になります。
TextViewは最初から配置されているものがあるので、ひとつはそれを使っていきましょう。
もうひとつのTextView、最初から配置されているTextViewの上に、
ButtonはTextViewの下に配置します。

ざっと配置するとこんな感じになります。

kotlin_omikuji_05.png

部品の設定しよう

まずはそれぞれの部品にIDをつけていきましょう。
プログラムからアクセスするのは真ん中のViewだけなのですが、このあとの説明もしやすいので全部の部品にIDをつけておきましょう

view ID
上のTextView titleText
真ん中のTextView resultText
Button fortuneButton

次にそれぞれの部品の text を変えていきましょう。
直接変えてもいいのですが、strings.xmlを使うことが推奨されているので、そうしておきましょう。
strings.xmlを直接編集してもいいですが、前回同様に設定画面が用意されているのでそちらを使っていきましょう。
部品を選んで、Properties の中になる text の「…」 ボタンをクリックします。

kotlin_omikuji_02.png

Resourceの設定画面になるので、右上の「Add new resource」をクリックして、新しいStringを追加します。

それぞれの部品は以下のように設定しましょう。

view Resource name Resource value
titleText title_text あなたの運勢は
resultText default_text
fortuneButton button_text 占う

それから、resultTextはフォントサイズを変更しましょう。
Propertiesの一番下にある、「View all properties」をクリックして、全てのプロパティを表示します。
textSizeを探してあげて、▼をクリックして、「36sp」を選択してください。

部品の位置を設定しよう

部品の位置はLayoutEditorで設定してきましょう。

resultTextは最初から中央揃えになっているので、それはそのままにしておきます。
titleTextの下端とresultTextの上端を接続します。
fortuneButtonの上端とresultTextの下端を接続します。
titleTextとfortuneButtonはそれぞれ左右の両端を親ビューの両端に接続して、中央揃えになるようにします。
それから、resultTextまでの距離をpropertiesの上の方にあるマージンの設定画面から24dpに変更します。

と、、、文字で書くとわかりにくいので、操作しているところを動画にしました。

わかりますかね…。これもわかりにくい気もしますが(汗)

ひとまずこれで画面は完成です。

スポンサーリンク

3. おみくじを表示させてみよう

さて、いよいよプログラムを書いていきましょう!

メソッドを作ろう

まずはfortuneButtonがクリックされたときの処理を書くメソッドを書いていきましょう。
先にfortuneButtonの設定からやっておきます。

activity_main.xml を開いて、fortuneButtonを選択します。
properties の onClick に「getFortune」と入力しておきます。

MainActivity.kt を開きましょう。
onCreate()の下の方にメソッドを作っていきます。引数でViewを取るようにする必要があるので忘れずに。

乱数を生成してみよう

まずは乱数を生成して、乱数を表示してみます。

Kotlinに乱数の生成する機能はないので、java.utilを使っていきます。
と言っても簡単でJavaと同じように使ってあげればOKです。

このようなソースになります。
まず、Random().nextInt(10) とすると、10個(0〜9)の整数の乱数を取得することができます。

それから、result_textに表示してあげればOKですね。
kotlin-extensionsを使うように設定されているはずなので、
findViewById()をすることなく、result_textというIDは変数として扱うことができます。
resultTextのtextプロパティに値を代入してあげればいいのですが、randomは整数値なので、toString()として文字列に変換する必要があります。

これで、fortuneButtonを押すごとに乱数が表示されるようになったはずなので、エミュレータで確認してみましょう。

kotlin_omikuji_07.png

fortuneButtonを押すたびに0〜9までの数値がランダムに表示されればOKです。

おみくじを表示しよう

乱数が生成できたので、大吉とか吉とかおみくじの結果が表示されるようにしましょう。

listOf()で文字列のリストを生成します。

Random().nextInt()の引数はresultsの要素数にしてあげます。

resultsのrandom番目を表示さればいいので、results[random]resultText.textに入れてあげればOKですね。

では、ここまでできたら、エミュレータで確認してみましょう。

kotlin_omikuji_08.png

大吉や小吉などがランダムに表示されればOKです。

4. 文字の色を変えてみよう

ここままででおみくじの機能としてはできているのですが、少しだけ見た目を変えてみましょう。

今回は大吉のときだけ文字色を赤にしてみましょう。

getFortune()の最後に以下の処理を追加します。

大吉のときというのは、random が 0 のときなので、そのときは文字色を赤にして、
それ以外のときは黒にする、という処理になります。

文字色を変えるのは、setTextColor()を使ってあげればOKです。
引数には色を指定するのですが、今回はあらかじめ用意されているColor.REDとColor.BLACKを使いましたが、
任意の色を指定することももちろんできます。
Color.argb(0xff, 0xff, 0xa5, 0x00)とすると、透過率とRGBで色を作ることが可能です。
16進数で書いてますが、もちろん10進数で書いてもOKです。ちなみにこれだとオレンジに色になるはずです。

5. アプリのスタイルを変えてみよう

基本的にはKotlinでの書き方に特化したいので、スタイルの変更方法などはあまり扱わない予定ですが、ほんのちょっとだけ修正してみたいと思います。

画面上部のナビゲーションバーの部分に表示されている「FortuneApp」というタイトルですが
初期値だとプロジェクト名になっています。

サンプルアプリなのでこのままでも問題ないのですが、もう少しわかりやすいタイトルに変えてみましょう。

このタイトルの設定がどこにされているかというと「AndroidManifest.xml」に設定されているので、ますはマニフェストファイルを開きましょう。
(app > manifests > AndroidManifest.xml)

<application>タグの中にあるandroid:labelに指定されている文字列が、タイトルとして表示されているものになります。

@string/app_nameというのが設定されていますが、これはstrings.xmlで設定してあるapp_nameの文字列を使う、という意味になります。

なので、このapp_nameの内容を変えてあげればOKです。

では、strings.xmlを開きましょう。
(app > res > values > strings.xml)

以下の部分を、

下記のように変更してあげます。

こうすると、activity_main.xmlでも変更が確認できるので見てみるといいでしょう。

それからこのstrings.xmlにはactivity_main.xmlから指定したTextViewやButtonのテキストも追加されているのがわかりますね。
あとから文言を変更したい場合はここから修正してあげればOKです。

6. 動作確認をしてみよう

さて、これで一通り実装できたので、エミュレータで動作確認をしていきましょう。

kotlin_omikuji_01_2.png

冒頭の画像と一緒ですが、ボタンを押すたびにおみくじの結果がランダムに表示されて、大吉のときだけ文字が赤色になればOKです。

至って簡単なアプリではありますが、Kotlinでの書き方の参考にでもなればいいなと思います。

今回作成したアプリのソースコード一式はGithubに公開していますので、合わせてご参照ください。

さて、次回は画面遷移あたりをやれたらいいかな、と思ってます!

スポンサーリンク