Android
iOS
Xamarin
Xamarin.Forms

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

More than 1 year has passed since last update.


環境

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 ProjectsPCLに関しても分かりやすく纏められていて参考になりました

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...]をクリックします

スクリーンショット 2018-01-15 18.20.15.png

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

スクリーンショット 2018-01-15 18.21.48.png

App Nameに[HelloWorld]と入力します(アプリ名になります)

今回、他の項目はデフォルトのままNextをクリックします

スクリーンショット 2018-01-15 18.24.54.png

今回この画面ではプロジェクトの保存場所だけ設定し、あとはデフォルトのままでいきます

Locationが保存場所になるのですが、デフォルトは確か/Users/[ユーザ名]/Projectになってると思います

そのままか、Browse..から任意の場所を選択し、Createをクリックでプロジェクトの作成を完了させます(少し時間がかかる)

スクリーンショット 2018-01-15 18.30.47.png

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

スクリーンショット 2018-01-15 18.37.14.png

左側のHelloWorld(Master)配下のHelloWorldプロジェクトがiOSとAndroid共通プロジェクトとなり

HelloWorld.DroidAndroidプロジェクトHelloWorld.iOSiOSプロジェクトとなります。

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


ビルド

早速ビルドをしてみます

iOSとAndroidを一緒にビルドをすることはできないので、片方ずつビルドします

iOSをビルドしたい場合はHelloWorld.iOSを右クリックし、 Set AS StartUp Projectをクリック

スクリーンショット 2018-01-15 18.54.41.png

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

スクリーンショット 2018-01-15 18.54.46.png

スクリーンショット 2018-01-15 18.57.37.png

うまくアプリが実行されたら、一度、実行を停止し、もう片方も同じような手順で起動して下さい(Androidは時間がかかります)

停止するには■マークをクリックします(元々▶︎マークだった場所)

スクリーンショット 2018-01-15 19.00.12.png

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

スクリーンショット 2018-01-15 19.03.01.png

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

スクリーンショット 2018-01-15 19.06.47.png

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


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

デフォルトのままだと画面に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());の部分が初期化処理になっているようです

スクリーンショット 2018-01-15 19.22.51.png


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());の部分が初期化処理になっているようです

スクリーンショット 2018-01-15 19.23.03.png


文字を変更する

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

まず、先程の各コードをもう一度見て頂けると、どちらも

LoadApplication(new App());とかかれており、Appクラスが呼ばれていることが分かると思います。

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

スクリーンショット 2018-01-15 19.37.08.png

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.xmalHelloWorldPage.xmal.csで構成されています

スクリーンショット 2018-01-15 19.44.46.png

今度は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で保存、ビルドしてみましょう

スクリーンショット 2018-01-15 19.54.57.png

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

XAMLに関して以下の記事がとても参考になりました

XAMLをコードで表現する


実機にインストール

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

Androidの方を少し詳しく書こうと思います


iPhone

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

スクリーンショット 2018-01-16 12.03.57.png


Android

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

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

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


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

端末によって場所が違うかもしれませんが

設定->端末情報->ソフトウェア情報(または 設定->端末情報)にあるビルド番号項目を連続タップするとこれでデベロッパーになりました!と表示され、

設定画面に開発者向けオプションが表示されます


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

開発者向けオプションが表示されたら、タップし、項目を表示させます

開発者オプションはデフォルトでONになっているかもしれませんが、USBデバッグモードはOFFになってるかもしれないのでONにします

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


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

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


インストール

スクリーンショット 2018-01-16 12.36.09.png

参考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から

スクリーンショット 2018-01-16 10.31.05.png

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

スクリーンショット 2018-01-16 14.46.12.png

他のエラーとして

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


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

iPhone画面

xamarin_ios.png

Android画面

xamarin_android.jpg


オススメサンプルデータ

Simple List App

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

以上