LoginSignup
1
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-12

前回インストールしたVisual Studioでサンプルアプリを作っていきます。

Xamarin.Formsのソリューションの立ち上げ

  1. まずVisualStudioを立ち上げると以下の画面が出てきます。「新しいプロジェクトの作成」をクリックします。
    image.png

  2. 色々出てきますが、モバイルアプリ(Xamarin.Forms)を選択します。
    image.png

  3. 適当に場所と名前を設定します。
    image.png

  4. 今回は空白を選択します。あ、Windows(UWP)にも対応するためには別途インストールしないといけなかったのですね。。こちらはまた別の記事で説明しようと思います。
    image.png

  5. Androidライセンスの同意画面が出てきますので、(内容確認の上)同意します。
    image.png

  6. ソリューションエクスプローラーからMainPage.xamlをダブルクリックします。こちらがアプリの画面になります。
    image.png

  7. ソースコードの右上にあるimage.pngをクリックすると視覚的にアプリ画面を見ることができます。

  8. image.pngをクリックするとソースコードに戻ります。

ソースコードの変更

まずMainpage.xamlに少しコードを追加してみます。下図のように、以下のコマンドを追加します。
<Button Text="おしてね" Clicked="OnButtonClicked" />
image.png
これで、「おしてね」と書かれ、クリックするとOnButtonClickedクラスを呼び出すボタンが作成されます。

デザイン画面にします。なぜかうまく反映されないので、例えばiOSの画面にした後にAndroidの画面に戻す、などをすることで追加されたボタンが表示されます。
image.png

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

private void OnButtonPressed(object sender, EventArgs e)
{
    (sender as Button).Text = "こんにちは";
}

image.png

シミュレーションの実行

  1. Android Emulatorをクリックします。
    image.png

  2. Createします。(Pixel2のAndroid9です。ちょっと古いですね。。)
    image.png

  3. 同意します。
    image.png

  4. 少し時間がかかりましたが、シミュレータの作成が完了しました。「開始」をクリックします。
    image.png

  5. 画面が立ち上がった後もう一度Visual Studioに戻ると、Pixel2でデバッグできるようになっているので、こちらをクリックします。
    image.png

  6. 出てきました!「おしてね」をクリックしてみます。
    image.png

  7. 無事「こんにちは」に変更され、アプリが動いていることが確認できました。
    image.png

関連記事

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2