[Android & Kotlin] Buttonアプリを作ってみる

KotlinでAndroidの Button アプリを簡単に作ってみました。
findViewByIdの代わりにAndroid Kotlin Extensions プラグインを使っていましたが、現在では ViewBinding が推奨されています。
 
1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる


Android Studio
2021.1.1




Button

 
JavaでのButtonアプリを下のように作成しましたが、
 

test button 00 100x100 - [Android & Kotlin] Buttonアプリを作ってみる
アプリの作り方の基本を習得するために、ボタンを押したら文字が変わるという簡単なアプリを作ってみます。

 
その作り方をそのままKotlinに変えるとどうなるか試してみます。
 

 

Kotlinプロジェクトの作成

 
プロジェクトをJavaで開発するのか、KotlinなのかはLanguageの切り替えで簡単にできます。
 
プロジェクトを作成するときに、プロジェクト名を設定するステップで
 
1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる


 
Languageで Kotlin を選択します。

これだけでプロジェクトがKotlin仕様になり、クラスファイル名が MainActivity.kt などと色々と変更されます。

 

プロジェクト構成ファイル

 
プロジェクトを作ると幾つかのファイルが既にできています。

1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる

  1. MainActivity.kt
    • アプリのエントリポイントで、Kotlin の主なコーディングをするところ
  2. activity_main.xml
    • レイアウトを定義する XML ファイル
  3. AndroidManifest.xml
    • マニフェストにはアプリの各コンポーネントが定義されていて、セキュリティ上ユーザーに許可を得るための記述などがされています。
  4. build.gradle
    • 同じ名前のファイルが2つあり、プロジェクト用(Project: xxx)とモジュール用(Module: xxx.app)で、もっぱらモジュール用を使用します。ターゲットのAPIレベルやライブラリーの情報が設定されます。
 

MainActivity.kt

 
アプリをビルドして実行するとこの Activity のインスタンスが起動し、そのレイアウトが読み込まれます。

1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる

Empty Activityを選んだので、ある程度の基本的なコードは既に入っています。

 

activity_main.xml

 
Activity のユーザー インターフェース(UI)のレイアウトを定義する XML ファイルで、ここにコードを記述あるいは「Design」タグからレイアウトエディタでも作成が可能です。

やり方としては、

  • 「Design」を使って画面上にUIパーツを配置する
  • 「Code」で全てコードで記述

「Design」ではレイアウトの配置全体をデザイン的に決めていくには便利です。

右上の3つ並んだアイコンで「Code」「Split」「Design」の切り替えができます。

1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる

 
「Code」は並んだアイコンの左端です。
微調整も含めた細かな設定はコーディングがいいでしょう、またネットにある開発情報の多くがコードです。

1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる

actvity_main.xml のコードです。

 

View Binding

 
以前は findViewById を使ってXMLレイアウトファイルからIDを読みだしていたのを
Kotlin Android Extensionsのプラグインにある kotlinx.android.synthetic を使って簡略化していました。


 
ただ、kotlinx synthetics には問題点があり、非推奨となっています。
Kotlin Android Extensions の未来

代わりに View Binding が推奨されています。
Migrate from Kotlin synthetics to Jetpack view binding

View Binding:
セットアップとして、build.gradle ファイルに viewBinding 要素を追加します。

build.gradle


プロジェクトのXML レイアウトファイルが
activity_main.xml
の場合は、そのレイアウトファイル毎にViewBinding Class を作成します。


[package name].databinding.[XMLレイアウトファイル名から]Binding

ActivityMainBindingはXMLファイルの名前(activity_main)を
キャメルケースに変換して、末尾に「Binding」という単語を追加することで生成します。

例)

activity_main.xml >> ActivityMainBinding
sub_layout.xml >> SubLayoutBinding
main.xml >> MainBinding

Viewのidでは

text_view >> textView
textview >> textview
button >> button

Activityでの使用:


Kotlin Android Extensionsに比べると、いえいえfindViewIdに比べても記述が増えてしまうのですが
findViewIdの問題点の改善もあるのでいたしかたないということでしょうか

 

サンプルコード

 
まとめてみます。
 
MainActivity.kt


 
XMレイアウトファイル
activity_main.xml


 
文字列をコードにリテラル(直書き)するのではなく、strings.xml に記述して引用するのがお行儀のよい記述とされています。

直に書いていると後でハマることになります。(と理解してけっこうやっていましたが)最近はうるさくワーニングが出るのでちゃんとしてみました。

 
strings.xml


app_name はプロジェクトの名前なのでそのままでも、書き換えてもいいでしょう。
strings.xml のファイルは以下の場所にあります。

1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる

次にbuild.gradleですが2つあるので注意してください。
 
build.gradle


android { } の中にbuildFeatures{ } を追加します。

記述後には Sync が必要です(エディタ上部に表示が出ます)
反映に多少時間がかかる場合もあります(MainActivityのエラーの赤線が消えるまで時間がかかる数十秒?)

実行アイコンをクリックします。
「No Device」となっていた場合はエミュレータを作成します

1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる


以下を参考にエミュレータを作成してください。
 
avd a00 100x100 - [Android & Kotlin] Buttonアプリを作ってみる
アプリが動作するか確認するためには、Android Studio のエミュレータが便利です。エミュレータの設定には Device Manag...

 
できあがったら実行させてみましょう。 

1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる

デフォルトでエミュレータがAndroid Studio内に表示されるようになりました
設定を変えれば独立させることも可能ではあります。
 
1x1.trans - [Android & Kotlin] Buttonアプリを作ってみる


 
デフォルトではちょっと見栄えがわるいので、フォントを大きくしたりレイアウトを変更してみます。
activity_main.xml


 

 
Kotlinでは生産性が上がるという意見もありますが、どうでしょう。今後のGoogleにおけるJavaの扱いがどうなるか、どうなっても対応できるようにしておいた方がいいのかもしれませんね。
 

Kotlinでは以前は「Kotlin Android Extensions」を使ってコードを簡略化できていましたが非推奨となりました。View Binding が「大概のケース」でfindViewByIdの後継として使えます。例外もあります

 
 

References:
ボタン | Android デベロッパー
Kotlin and Android | Android Developers
Kotlin Programming Language
Kotlin Android Extensions の未来
Use view binding to replace findViewById




シェアする

  • このエントリーをはてなブックマークに追加

フォローする