いよいよAndroidアプリケーションの構築を始めます。
Android Studioを起動すると、左のようなスプラッシュ画面が出てきます。この画面はしばらくたてば消え、初期設定画面が開きます。
Android Studioを立ち上げて最初にしなければいけないのは、Androidアプリケーションを作るための開発キット(Android SDK)をインストールする作業になります。
現在、公式にサポートされているAndroidのバージョンは7.0 ~ 10.0で、対応するAndroid SDKのバージョンはAPI Level 24 (Nougat, 7.0) ~ 29 (Q, 10.0)になります。
新しくなればなるほど、機能が追加されていますので、より高度なアプリケーションを作成できるようになりますが、サポートされているバージョンには対応したアプリケーションを作成することが推奨されます。
このページでは、 API Level 24 (Nougat, 7.0)を基準に考えて、Kotlinでアプリケーションを構築していきます。
初回起動後、左上の図が最初に現れる設定画面になります。基本的にここでは、順番にNextを押していけば問題ありませんが、このチュートリアルでは仮想Android端末を使用するため、左下の画面でAndroid Virtual Deviceのチェックが付いていることを確認してください。
また、標準で最新APIがインストールされます。後から旧バージョンのAPIをインストールすることも可能ですが、最新APIで旧バージョンをサポートできるため追加でインストールする必要はありません。
APIとVirtual Machineのインストールが終了すると、次はAndroid Studioのウェルカム画面が開きます。
新しいアプリケーション(今後「プロジェクト」と呼びます)を作成するため、[Start a new Android Studio project] をクリックしてみましょう。
(以前作成した事のあるプロジェクトを開きたい時には、[Open an existing Android Studio project] をクリックします)
すると、プロジェクトのテンプレートを選択する画面が出てきます。色々とありますが、ここではシンプルな [Empty Activity] を選択します。
その後のプロジェクトの設定画面では、自分の好きなようにプロジェクト名、保存先を変更してください。
[Package name] は `.` 区切りの固有値にすべきですが、Google Play等に公開するのでなければ標準値で問題ありません。
また、このチュートリアルでは前述のとおりKotlin、API 24を選択します。
プロジェクト作成後ようやくIDEの画面が出てきます。左側にはソースコード等がツリー状に表示される[Project]ウィンドウ、右側にはソースコードを編集できる[Editor]ウィンドウが表示されています。
初めは初期化処理が行われており、画面一番下のステータスバーに処理状況が表示されています。
コンピュータのスペックによっては時間がかかりますが、処理が終わるまでは気長に待ちましょう。(この間に[File] -> [Settings] からIDEの設定を触ってみるといいかもしれません)
TIPS: IntelliJ系のIDEには覚えると便利なショートカットキーがたくさんあります。
Ctrl+Q: カーソル位置のコードのドキュメントをプレビュー
Ctrl+P: カーソル位置のメソッドの引数のヒント
など、特にドキュメントのプレビューは便利なので使ってみましょう。
最初からEditorウィンドウに開かれている`activity_main.xml`、`MainActivity.tk` はどちらもアプリケーションのメイン画面に対応するファイルで、それぞれレイアウト、機能に関係します。
`activity_main.xml`を開いてみるとAndroidの画面を模したLayout Editorが表示されます。ここではマウスを使って左側の[Pallete]からボタンやテキストを直感的に配置できます。初期設定ではAndroidのステータスバーやツールバーは非表示になっていますが、表示させたい場合はLayout Editor上部の[View Options](目のアイコン)から[Show Layout Decorations]をチェックしてください。
このテンプレートでは既に"Hello World!"というテキストが配置されています。エミュレータを実行して確認してみましょう。実行するにはナビゲーションバー(上から2番目のバー)の▶アイコンをクリックします。
Androidエミュレータが起動し、しばらくすると作成したアプリケーションが自動で開きます。先程のLayout画面のとおり、"Hello World!"と表示されました。
このような流れで、アプリケーション開発をしながらエミュレータでの確認をすることができます。
先ほどのLayout Editorに戻って、画面の内容を変えてみましょう。Layout Editor上部の[Select Design Surface](レイヤーのようなアイコン)から表示方法を変更できるので好みのものに変更しておくと良いです。ここでは、[Blueprint]を選択します。
次のように画面の内容を変更してみます。
1. 既にあるTextの削除
2. 新しいTextの追加
3. ボタンの追加
既に配置されているコンポーネントを選択してから右クリック -> [Delete]で、削除をすることができます。また、Layout Editor左下の[Component Tree]でコンポーネント一覧を確認することができるので、そこから選択することもできます。
"Hello World!"のTextViewを削除した後、新しくTextを配置してみましょう。Layout Editor左上の[Palette] -> [Text] -> [Plain Text]をマウスで画面上にドラッグアンドドロップします。
同様に[Palette] -> [Buttons] -> [Button]でボタンを配置します。
よく見ると、[Component Tree]に"!"アイコンのエラーが表示されています。エラー文を読めばわかるように、このままではテキストとボタンが配置された場所にかかわらず、画面の左上に表示されてしまいます。
コンポーネントの位置を指定するには4辺に表示される青◯(アンカー)を使用して"制約"を作る必要があります。
追加したPlainTextを選択して左側のアンカーを画面左端にドラッグ、上部のアンカーを画面上端にドラッグします。これによってコンポーネントと画面左端、上端の制約が作られ、アンカーの色が白に変わり、Layout Editor上にそれぞれの間隔が表示されるようになります。
同様にボタンにも制約を作ります。ボタン左側のアンカーをPlainTextの右側にドラッグしボタンを右側に配置するようにしましょう。
このままでも構いませんが、ボタンを右クリック -> [Show Baseline]を選択し、表示されたラインをPlainTextのラインにドラッグすることで、2つのテキストの高さを揃えることができます。
最後に表示する文字列を変更してみましょう。
コンポーネントのAttributesから直接文字列をハードコーディングすることができますが、推奨されない方法なのでここでは"string resource"という機能を使って文字列を追加します(ハードコーディングするとIDEにWarningがでます)。
まずPlainTextコンポーネントを選択し、[Attributes]ウィンドウを開きます。その中に[text]というプロパティがあるので、その列の右端にある[Pick a Resource]を選択します。
その後表示されるウィンドウから、+ボタン -> [String Value]から文字列を追加できます。
"Resource name"には識別のための名前、"Resource value"には実際の文字列を入力します。
ボタン側にも同様に文字列を設定してみましょう。
完成しました!
"制約"には様々な機能があり、自由なレイアウトを簡単に作成することができます。公式ドキュメント等を見て試してみるといいかもしれません。