Android Studioのレイアウトエディターを使ってAndroidアプリを作る
2022.03.07
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、CX事業本部 IoT事業部の若槻です。
Androidアプリ開発の基本が学びたくて公式サイトを見ていたところ、下記のチュートリアルを見つけました。
内容をざっと見ると、Android Studioのレイアウトエディターを使ってAndroidアプリを作る内容のトレーニングで、first appとあるのでAndroidアプリ開発のビギナーにも向いていそうです。
というわけで今回は、こちらのチュートリアルに沿って、Android Studioのレイアウトエディターを使ってAndroidアプリを作ってみました。
環境
$ sw_vers
ProductName: macOS
ProductVersion: 11.6
BuildVersion: 20G165
Android Studioは下記のバージョンを使用。
```sh
Android Studio Bumblebee | 2021.1.1 Patch 2
Build #AI-211.7628.21.2111.8193401, built on February 17, 2022
Runtime version: 11.0.11+0-b60-7590822 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 11.6
GC: G1 Young Generation, G1 Old Generation
Memory: 1280M
Cores: 8
Registry: external.system.auto.import.disabled=true
## やってみた
### Androidプロジェクトの作成
まだの場合は、Android Studioの最新版をダウンロードします
- [Download Android Studio and SDK tools | Android Developers](https://developer.android.com/studio)
[New Project]をクリック。
`Empty Activity`を選択して[Next]をクリック。
[Name]で`My First App`、[Language]で`Kotlin`を指定し、[Finish]をクリック。
するとプロジェクトの作成処理が始まります。下記は作成中の様子。
処理が終わり、プロジェクトが作成されました。（15分くらい掛かりました。）
### アプリケーションの実行
エミュレーター上でアプリケーションを実行してみます。
ツールバーのRunボタンをクリック。
するとエミュレーター上の端末でアプリケーションが起動しました。
### UIの実装
#### レイアウトエディターの設定
まずレイアウトエディターを開いて設定をします。
ファイル`app > res > layout > activity_main.xm`を開きます。
[Select Design Surface]をクリックして`Blueprint`を選択。
[View Options]をクリックして`Show All Constraints`にチェック。
[Default Margins]をクリックして、`16`を選択。
これでレイアウトエディターの設定は完了です。
#### テキストボックスの追加
すでにある`TextView`を選択して、Deleteをクリックして削除します。
[Palette]で[Text]から`Plain Text`をレイアウト内にドラッグ・アンド・ドロップします。
テキストボックスウィジェットをドロップできました。
テキストボックスウィジェットの上部のアンカーを選択して上に引っ張ると、デフォルトの16dpのマージンの位置まで移動させられます。
さらに左のアンカーを引っ張って左に16dpのマージン位置まで移動させます。
#### ボタンの追加
[Palette]で[Buttons]から`Button`をレイアウト内にドラッグ・アンド・ドロップします。
ボタンウィジェットをドロップできました。
ボタンウィジェットの左のアンカーを引っ張り、テキストボックスウィジェットの右に近づけます。
ボタンウィジェットを右クリックして[Show Baseline]をクリック。これによりボタン内にベースラインが表示されます。
ベースラインを隣のテキストボックスにドラッグ・アンド・ドロップします。
[Select Design Surface]をクリックして`Design`を選択すると現在のUIのプレビューを見ることができます。
#### UI文字列の変更
ファイル`app > res > values > strings.xml`を開きます。この**string resources**は、アプリケーションのすべてのUI文字列の指定を行うファイルです。
[Open editor]をクリックします。
するとTranslations Editorが開きます。これを使用するとシンプルなインターフェースで文字列を設定できます。
[+]をクリック。
[Add Key]ウィンドウが表示されるので、[Key]で`edit_message`、[Default Value]で`Enter a message`を指定し、[OK]をクリック。
さらに別のキーとして、[Key]で`button_send`、[Default Value]で`Send`を指定したキーを追加。
追加できました。
[activity_main.xml]タブを開き、テキストボックスを選択して、[text]プロパティに設定されている`Name`を削除します。
[hint]プロパティを追加し、右横の[Pick a Resource]をクリック。
ダイアログが表示されるので`edit_message`を選択し[OK]をクリック。
同様にボタンの方も[text]プロパティを`button_send`に変更します。
[Select Design Surface]-`Design`からプレビューを見ると、テキストボックスとボタンに表示される文字列が変更できています。
#### テキストボックスのサイズをフレキシブルにする
テキストボックスとボタンの両方を選択し、右クリックメニューで[Chanins]-[Create Horizontal Chain]をクリック。
すると両ウィジェットが水平にチェーン化された状態となります。
テキストボックスを選択し、[Attributes]-[Layout]-[Constraint Widget]で左の線をクリックしてジャグ化します。
ボタンを選択し、[Attributes]-[Layout]-[Constraint Widget]で右側のマージンを`16`にします。
### アプリケーションの実行（再）
ツールバーの[Apply Changes and Restart Activity]をクリック。
アプリケーションが実行できました！テキストボックスに文字を入力できます。またテキストボックスのサイズがフレキシブルになっています。
## おわりに
Android Studioのレイアウトエディターを使ってAndroidアプリを作ってみました。
AndroidアプリってUIエディターだけでこれだけ作れちゃうんですね。これくらいならビギナーの私でも簡単に作れちゃいました。しかし本格的に作る場合はKotlinやJavaによるコーディングや、AndroidのAPIの利用も必要になってくるかと思うので、引き続き触ってみたいと思います。
以上
