(Visual Studio for Mac)Xamarin.FormsでHelloWorldしてみる

環境

macOS High Sierra
Visual Studio for Mac 7.3.3

(Visual Studio for Macと書いているので当たり前かもしれませんが)Macですることを前提に書きます

内容

とりあえず、XamarinでAndroidとiOSのマルチプラットフォーム開発を試してみたい人向けに
iOSとAndroidの両方に対応した共通コードの作成手順を書いてみようと思います

自分自身始めたばかりなので詳しくありませんが、AndroidとiOSへのビルドまではできたので、纏めてみました。

既に2016/11/24の時点でマイクロソフトのテクニカルエバンジェリストの千代田まどかさんが手順を書かれてるブログがあるのですが、
少し変更がある部分と補足を付け足したものを書こうと思います
【無料】Mac用のIDE “Visual Studio for Mac” で iOS/Android アプリを作ってみた [Xamarin][新規作成から実行まで]

ビルドするためのXcode等は既にインストールしてあることを前提にしたいと思います
理由として、私自身それらはだいぶ前にインストールしているので、インストール手順が曖昧だからです
ですので申し訳ないですが、環境の準備は別途検索して頂けたらと思います

Xamarin.Formsについて

Xamarin.FormsはUIを作る機能であり、
プラットフォームに依存しないコードで画面を作成することができます。
1つのXamarin.Formsの画面コードでAndroidとiOSの両方の画面が作れます。

Xamarin.Formsで画面を作成

上記の記事にShared ProjectsとPCLに関しても分かりやすく纏められていて参考になりました

Xamarinの公式ガイドは以下になります
https://developer.xamarin.com/guides/xamarin-forms/

XAMLとXMAL.CS(C#)について

手順の中に、初めてXamarinを触る人なら見慣れないXMALというファイルが目につくと思います、
そしてXMALファイルに紐づけられてXMAL.CS(C#)ファイルがあるようです

まだ私自身よく分かってないのですが、.xmalは画面構成、.xmal.csは処理という感じなようです
ただ、XAMLを使わず、C#のみで書くこともできるそうです

参考URL:
画面作成はXAMLとC#コードをどのように使い分けるか

因みに読み方はザムルでeXtensible Application Markup Languageの略だそうです

各インストール

参考になりそうな記事のURLだけ貼らせて頂こうと思います
Xamarin やりたい人向け Visual Studio 2017 インストール手引書
【Visual Studio for Mac】C#を使ってMac上で動くアプリをつくる。【環境構築／開発】

HelloWorld

プロジェクトの作成

[New Project...]をクリックします

サイドメニューのMulutiplatformからApp->Blank Forms Appを選択肢Nextをクリック

App Nameに[HelloWorld]と入力します(アプリ名になります)
今回、他の項目はデフォルトのままNextをクリックします

今回この画面ではプロジェクトの保存場所だけ設定し、あとはデフォルトのままでいきます
Locationが保存場所になるのですが、デフォルトは確か/Users/[ユーザ名]/Projectになってると思います
そのままか、Browse..から任意の場所を選択し、Createをクリックでプロジェクトの作成を完了させます(少し時間がかかる)

とりあえずこんな画面になります

左側のHelloWorld(Master)配下のHelloWorldプロジェクトがiOSとAndroid共通プロジェクトとなり
HelloWorld.DroidがAndroidプロジェクト、HelloWorld.iOSがiOSプロジェクトとなります。

基本的にHelloWorldプロジェクトを触ることになりますが、 iOS、Android各固有の部分は各プロジェクトで行う感じです(多分。始めたばかりなのでまだ色々と分かってない)

ビルド

早速ビルドをしてみます
iOSとAndroidを一緒にビルドをすることはできないので、片方ずつビルドします
iOSをビルドしたい場合はHelloWorld.iOSを右クリックし、 Set AS StartUp Projectをクリック

すると、左上の▶︎マークの横の欄がHelloWorld.iOSに切り替わるので、確認できたら▶︎マーク(実行ボタン)をクリックでシミュレータが起動します

うまくアプリが実行されたら、一度、実行を停止し、もう片方も同じような手順で起動して下さい(Androidは時間がかかります)
停止するには■マークをクリックします(元々▶︎マークだった場所)

また、Set AS StartUp Projectからではなく、左上の▶︎マークの横の欄の部分をクリックでも、ビルドターゲットは変更できます

起動できたら、同じような画面のアプリになってることが確認できます

最初に起動したほうはホーム画面に戻ってると思うので、アプリをクリックして確かめることができます

表示している文字を変えてみる

デフォルトのままだと画面にWelcom to Xamarin Forms!と書かれている部分を別の文字に置き換えつつ、どの部分でコードが書かれているかを確認します

初期化処理

その前にiOS、Androidの初期化処理が書かれている部分を確認します
初期化のように共通化できないものは各プロジェクト内で行うことになります

Androidの初期化

左のメニューのHelloWorld.Droid->MainActivity.cs

MainActivity.cs

sing System;

using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace HelloWorld.Droid
{
    [Activity(Label = "HelloWorld.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);

            LoadApplication(new App());
        }
    }
}

global::Xamarin.Forms.Forms.Init(this, bundle);の部分と
LoadApplication(new App());の部分が初期化処理になっているようです

iOSの初期化

左のメニューのHelloWorld.iOS->AppDelegate.cs

AppDelegate.cs

using System;
using System.Collections.Generic;
using System.Linq;

using Foundation;
using UIKit;

namespace HelloWorld.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();

            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

iOSも、
global::Xamarin.Forms.Forms.Init();と
LoadApplication(new App());の部分が初期化処理になっているようです

文字を変更する

固有の部分を確認できたところで共通の部分を確認し、変更してみたいと思います

まず、先程の各コードをもう一度見て頂けると、どちらも
LoadApplication(new App());とかかれており、Appクラスが呼ばれていることが分かると思います。

このAppクラスの場所はHelloWorldプロジェクトのApp.xmalと、App.xmalの左側にある▶︎マークをクリックすると展開されるのですが、展開すると出てくるApp.xmal.csの２つのファイルになります。

App.xmal.csの中身をみてみると

App.xmal.cs

using Xamarin.Forms;

namespace HelloWorld
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new HelloWorldPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

App()の中で、イニシャライズ的なことがやってそうな後にMainPageプロパティとしてHelloWorldPageクラスが呼ばれていることが確認できます

次にHelloWorldPageを確認します。
HelloWorldPageもHelloWorldPage.xmalとHelloWorldPage.xmal.csで構成されています

今度はHelloWorldPage.xmalの方を確認してみます

HelloWorldPage.xmal

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:HelloWorld" 
    x:Class="HelloWorld.HelloWorldPage"
    >

    <Label Text="Welcome to Xamarin Forms!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />

</ContentPage>

実際のコードは横長だったのですが、見辛かったので改行しました

上のコードを見て頂けると、各エミュレータで表示されてた部分と思われる
Text="Welcome to Xamarin Forms!"
という箇所が見つかると思います。

試しにこの部分をText="Hello WORLD!"と修正し、command + sで保存、ビルドしてみましょう

一つのファイルの修正でAndroid、iOSのアプリが修正できたことが確認できたと思います！

XAMLに関して以下の記事がとても参考になりました
XAMLをコードで表現する

実機にインストール

(自分の環境では)iPhoneは簡単にインストールできたのですが、Androidの方は(最近買い換えた)こともあって少し手間取ったので
Androidの方を少し詳しく書こうと思います

iPhone

USBで接続し、実行するだけで特に問題なくインストール完了

Android

Android側は端末側で少しだけ設定が必要です(最近端末を変えたので忘れてた)

Andridの場合端末側でUSBデバッグモードをONにしてあげる必要があり、そのモードを切り替えるために開発者オプション項目を表示させる必要があります。

開発者オプション項目は設定画面にあるのですが、デフォルトでは表示されていないので、表示させる必要があります。

開発者オプション項目を表示

端末によって場所が違うかもしれませんが
設定->端末情報->ソフトウェア情報(または　設定->端末情報)にあるビルド番号項目を連続タップするとこれでデベロッパーになりました!と表示され、
設定画面に開発者向けオプションが表示されます

開発者オプションとUSBデバッグモードをON

開発者向けオプションが表示されたら、タップし、項目を表示させます
開発者オプションはデフォルトでONになっているかもしれませんが、USBデバッグモードはOFFになってるかもしれないのでONにします

これらは実機テストをしない際はOFFにしておいた方がいいかもしれません

端末データへのアクセス許可

接続した際に端末データへのアクセス許可やUSBデバッグの許可が聞かれた場合OKして下さい

インストール

参考URL:
Xamarin.FormsでAndroidの実機デバッグする方法
Visual Studio for Mac で作成した Xamarin.Forms アプリを実機（iOS/Android）にインストールする

インストール時のエラー

The emulator exited unexpectedly.Please check the emulator settings.

Running an x86 based Android Virtual Device (AVD) is 10x faster.
We strongly recommend creating a new AVD. 

これらのエラーが出た際は、必要なパッケージが足りてないかもしれません。

Tools->Android->SDK Managerから

Google APIs xxxxxxxx System Image を確認し、インストールしてみて下さい

他のエラーとして
performing clean boot : Snapshot doesn't existというダイアログが出てたのですが、パッケージを入れた後にVisual Studioを再起動すると消えてました

インストールしたアプリの画面

iPhone画面

Android画面

オススメサンプルデータ

Simple List App
→URLからJSONデータを引っ張ってきてリストビューに表示させるアプリ

以上