Hello World for Android

プロジェクト作成後ようやく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番目のバー）の▶アイコンをクリックします。

既に配置されているコンポーネントを選択してから右クリック -> [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つのテキストの高さを揃えることができます。