はじめに
この記事は、Kotlinもアプリ開発も学びたての筆者が、Kotlinの基礎知識を学びながら、Androidアプリを作るまでの過程をまとめる記事の第1弾になります。
対象読者
- Androidエンジニアを目指している方（自分は目指してます！）
- 素人の奮闘記を読みたい方
Android Studioのダウンロード
Android Studioは、Googleが提供しているAndroidアプリ開発用のIDEです。
Windows版
システム要件は以下の通りとなっています。
- x86_64 CPU アーキテクチャ、第 2 世代の Intel Core 以降、または Windows Hypervisor をサポートする AMD CPU
- 8 GB 以上の RAM
- 8 GB 以上の空きディスク容量
- 1,280 × 800 以上の画面解像度
ダウンロード用ページからAndroid Studioをダウンロードするをクリックし、ダウンロードし、インストールまで済ませてしまいましょう。
Mac版
システム要件は以下の通りとなっています。
- MacOS® 10.14（Mojave）以降
- ARM ベースのチップ、または Hypervisor.Framework をサポートする第 2 世代 Intel Core 以降
- 8 GB 以上の RAM
- 8 GB 以上の空きディスク容量
- 1,280 × 800 以上の画面解像度
ダウンロード用ページからAndroid Studioをダウンロードするをクリックし、ダウンロードし、インストールまで済ませてしまいましょう。
はじめてのAndroidアプリ
いよいよ初めてのAndroidアプリを作ってみましょう。
Android Studioを起動し、New Projectをクリックします。
次の画面ではEmpty Activityをクリックします。
次の画面でNameにhellomyappと入力します。
この名前がAndroidアプリのプロジェクト名になり、同名のディレクトリ配下にソースが保存されるようになります。
また、Minimum SDKは、このアプリがサポートする最低限のAndroidバージョンを選択します。
今回はAPI 24を選択しておきます。
初回実行
新規プロジェクトを構築後は、自動的にビルドが走ります。
終わったら実行ボタンをクリックして、初期構築状態のアプリを起動してみましょう。
すると、以下のようにエミュレータにテキストが表示されます。
ここから、初めてのアプリ作成をしていきます。
Jetpack Compose
Jetpack Composeは、AndroidアプリのUIを作る機能であり、@Composableアノテーションが付いている関数を使用して、アプリのUIを構築します。
例えば以下のように書くことで、画面にテキストが書かれます。
// String型のnameを受け取って画面にレンダリングする
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
Previewアノテーション
初期構築後のMainActivity.ktを参照すると、GreetingPreviewという関数があります。
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
HellomyappTheme {
Greeting("Android")
}
この関数には@Previewというアノテーションが付いていて、Android Studioをデザインペインを使って手軽にUIをプレビューすることができます。
それであれば、Greeting自体に@Previewを付ければ良いのではと思いますが、UIを担う関数とプレビューを担う関数で役割が明確化されているほうが、コードの見通しが良くなります。
そのためにGreetingPreview関数をプレビュー用として用意しておきます。
表示されるテキストを変えてみる
初期構築のみだと少し物足りないので、表示されているテキストを変えてみます。
そのために、以下の2つの関数を加えてみます。
@Composable
fun GreetingText(message: String, using: String, modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
modifier = modifier.padding(8.dp)
) {
Text(
text = message,
fontSize = 32.sp,
textAlign = TextAlign.Center
)
Text(
text = using,
fontSize = 28.sp,
modifier = Modifier.align(alignment = Alignment.End)
)
}
}
@Preview(showBackground = true)
@Composable
fun GreetingTextPreview() {
HellomyappTheme {
GreetingText(message = "android app development", using = "using Kotlin")
}
}
プレビュー
GreetingText関数
まず、それぞれのテキストのフォントサイズをspを使って変えています。
spを使用することで、ユーザーがデバイス設定でフォントサイズを変更しても、適切なサイズで表示されるように調整されます。
1行目のテキストに対しては、textAlignパラメータにTextAlign.Centerを設定することで、中央揃えにしています。
2行目のテキストに対しては、UIの外観などを変更するためのmodifierパラメータにModifier.align(alignment = Alignment.End)を設定しています。
こうすることで、2行目のTextコンポーネントの親コンテナであるColumnに対して、右揃えするようになります。
そして、Columnで2つのTextを縦に並べています。
更にverticalArrangementというパラメータにArrangement.Centerを設定することで、縦の中央に配置しています。
エミュレータでの表示
次回予定
今回は初回ということもあり、表示されているテキストを単純に変えただけでした。
第2弾の記事では、このアプリを作りながら学んでいこうと思います。