Xamarin.FormsでAndroidアプリ開発②　サンプルアプリ作成

[前回](https://qiita.com/yasu006/items/1c29af89bce513245d6a)インストールしたVisual Studioでサンプルアプリを作っていきます。

# Xamarin.Formsのソリューションの立ち上げ
1. まずVisualStudioを立ち上げると以下の画面が出てきます。「新しいプロジェクトの作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/93fc27f9-bf5b-8c81-122a-d1d9b608a4d0.png)

2. 色々出てきますが、モバイルアプリ（Xamarin.Forms）を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/e3f653ea-f1e8-6dbb-7719-9b35110477b4.png)

3. 適当に場所と名前を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/768987a8-ca19-7e38-ff7d-d24128b12644.png)

4. 今回は空白を選択します。あ、Windows（UWP）にも対応するためには別途インストールしないといけなかったのですね。。こちらはまた別の記事で説明しようと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/7e9fc3a3-54dc-2b86-ea5a-0de6a6b56513.png)

5. Androidライセンスの同意画面が出てきますので、（内容確認の上）同意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/3ae9820f-30a9-ee4b-1f0f-303f2672617f.png)

6. ソリューションエクスプローラーからMainPage.xamlをダブルクリックします。こちらがアプリの画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/ef49a7b9-848e-6d61-61ea-71e65dcbf117.png)

7. ソースコードの右上にある![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/987a233d-2ca8-2e57-caa2-f06ba514f3e0.png)をクリックすると視覚的にアプリ画面を見ることができます。

8. ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/0bb164b2-2902-8552-c480-32bade95052a.png)をクリックするとソースコードに戻ります。

# ソースコードの変更
まずMainpage.xamlに少しコードを追加してみます。下図のように、以下のコマンドを追加します。
`<Button Text="おしてね" Clicked="OnButtonClicked" />`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/76f03c5f-1ff7-8c86-3ca7-4a5548ad43d7.png)
これで、「おしてね」と書かれ、クリックするとOnButtonClickedクラスを呼び出すボタンが作成されます。

デザイン画面にします。なぜかうまく反映されないので、例えばiOSの画面にした後にAndroidの画面に戻す、などをすることで追加されたボタンが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/eb29e2e3-be08-7045-5d4d-42dcabf2d959.png)

次にMainpage.xaml.csを開き、以下のコマンドを追加します。

```ruby
private void OnButtonPressed(object sender, EventArgs e)
{
    (sender as Button).Text = "こんにちは";
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/869474ed-e1fd-3190-4a54-53690f09d199.png)


# シミュレーションの実行
1. Android Emulatorをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/70c98d60-3c9a-1296-742d-e409b8f7008a.png)

2. Createします。（Pixel2のAndroid9です。ちょっと古いですね。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/43b075a8-0624-41e1-d040-65490fe2eaee.png)

3. 同意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/54e088e2-0f17-eec8-4d13-589b54cd8143.png)

4. 少し時間がかかりましたが、シミュレータの作成が完了しました。「開始」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/f13437e3-2482-6222-2808-4d25c27bb3e7.png)

5. 画面が立ち上がった後もう一度Visual Studioに戻ると、Pixel2でデバッグできるようになっているので、こちらをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/71b74205-1243-e1ce-91d8-bb1df06a0215.png)

6. 出てきました！「おしてね」をクリックしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/9eccefc3-e976-9cdf-db75-fa275f1ffa7b.png)

7. 無事「こんにちは」に変更され、アプリが動いていることが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/9d39f0a1-4d72-d460-2cd4-c5934fcb34c8.png)

# 関連記事

- [Xamarin.FormsでAndroidアプリ開発①　Visual Studioのインストール](https://qiita.com/yasu006/items/1c29af89bce513245d6a)
- Xamarin.FormsでAndroidアプリ開発②　サンプルアプリ作成(今日はここです)
- [Xamarin.FormsでAndroidアプリ開発③　開発したアプリをスマホで実行。躓きポイントは、共有ランライム！](https://qiita.com/yasu006/items/04ca7accdba3c6c02310)