テキスト コンポーザブルを使用してシンプルなアプリを作成する①

プログラミング言語「Kotlin」の学習記録です。

プログラミング経験としては、過去にHTMLやCSSの基礎の勉強はしましたが結局活用することなく挫折。そして今回は新たにKotlinに挑戦してみます。

 

学習サイトはこちら。

developer.android.com

 

目標は、とにかく何かしらアプリを制作してリリースすること。

では早速学習を始めます。

 

Happy Birthday アプリを設定する

developer.android.com

 

アプリ完成図はこんな感じ。

画面に大きく「Happy Birthday Sam!From Emma」と表示されています。

文字を表示するだけなので、とても簡単そうですね。

 

Kotlinでのアプリ開発Android Studioを使用します。

インストールやら設定の手順は省略🦔

ここからは学習サイトの手順に沿って進めていきます。

 

2. Happy Birthday アプリを設定する

Android Studioで新規プロジェクトを作成。

テンプレートから、[Empty Activity]を選択。

 

新規プロジェクトの設定を行います。

今回はHappy Birthdayアプリの制作ということで、Nameを[Happy Birthday]と設定します。それに伴ってPackage nameやSave locationも自動的に変更されると思います。

Minimum SDKを[API 24]に設定して[完了]をクリック。

 

コードが表示されました。HTMLやCSSの基礎しか学んでない自分からすると、何が書いてあるのかさっぱりという感じ。文字の色がオレンジやら緑で表記されているのは特に意味のあるキーワードなんでしょうね。

 

AndroidStudio画面右上のバーに、["app"の実行]というボタンがあるので、クリック。

 

画面右側にスマホが出現。

拡大

Hello Android!というメッセージが表示されました。どうやら["App"の実行]で、記述されたコードがどのように動作するか確認できるらしい。

 

Compose の使用を始める

Androidアプリは「Compose可能な関数」によってUIが構成されている、的なことが学習サイトに書かれています。

Compose...『構成する,組織する,組み上げる』などの意味があります。

 

Compose は、簡潔なコード、パワフルなツール、直感的な Kotlin 機能を使用して Android での UI の開発を簡素化し、加速します。

 

Androidアプリを制作するには、(UIを)構成する関数『Compose可能な関数』が必要不可欠ということ。関数という単語はプログラミング言語に馴染みのある方なら誰もが聞いたことあると思います。どういったものなのかは、私にはさっぱりわかりません。

 

Compose可能な関数には、[@Composable]というキーワードが手前にくっついてきます。

テンプレートのコード内にもcompose可能な関数が存在し、その手前には[@composable]が確かに記述されています。そして[@composable]のように、@マークがついている名前のものを、アノテーションといい、コードに追加情報を付与することができます。

背景をプレビューしたり、プレビュータイトルを追加したりできるらしい。

 

 

次の手順に進みます。

「関数には、その機能を説明する名前をつけるか、そのような名前に変更することをおすすめします。」

おすすめなので別に変更しなくてもいいけど、機能に関係する名前を付けたほうが分かりやすくていいよ、っていう事ですね。誕生日メッセージを表示するアプリなので、『BirthdayCardPreview()』に変更ということなんだと思います。

変更しました。
Compose可能な関数は、他のCompose可能な関数を呼び出すことができます。

[BirthdayCardPreview()]関数では、Greeting関数を呼び出しています。


少し長くなってきたので、一旦ここで区切ります。

 

おさらい

・["App"の実行]で、アプリがどのように動作するかをモニタすることが可能

AndroidアプリのUIを構成するには『Compose可能な関数』が必要不可欠

・『Compose可能な関数』の名前は変更可能。機能を説明する名前などを付けるのが好ましい