はじめてのAndroidアプリ

はじめに

この記事は、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を構築します。
例えば以下のように書くことで、画面にテキストが書かれます。

compose.kt

// String型のnameを受け取って画面にレンダリングする
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Previewアノテーション

初期構築後のMainActivity.ktを参照すると、GreetingPreviewという関数があります。

MainActivity.kt

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HellomyappTheme {
        Greeting("Android")
    }

この関数には@Previewというアノテーションが付いていて、Android Studioをデザインペインを使って手軽にUIをプレビューすることができます。

それであれば、Greeting自体に@Previewを付ければ良いのではと思いますが、UIを担う関数とプレビューを担う関数で役割が明確化されているほうが、コードの見通しが良くなります。

そのためにGreetingPreview関数をプレビュー用として用意しておきます。

表示されるテキストを変えてみる

初期構築のみだと少し物足りないので、表示されているテキストを変えてみます。
そのために、以下の2つの関数を加えてみます。

MainActivity.kt

@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弾の記事では、このアプリを作りながら学んでいこうと思います。