環境
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の両方の画面が作れます。
上記の記事に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
プロジェクトの作成
サイドメニューの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
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
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
の2つのファイルになります。
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
の方を確認してみます
<?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
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.
これらのエラーが出た際は、必要なパッケージが足りてないかもしれません。
Google APIs xxxxxxxx System Image
を確認し、インストールしてみて下さい
他のエラーとして
performing clean boot : Snapshot doesn't exist
というダイアログが出てたのですが、パッケージを入れた後にVisual Studioを再起動すると消えてました
インストールしたアプリの画面
オススメサンプルデータ
Simple List App
→URLからJSONデータを引っ張ってきてリストビューに表示させるアプリ
以上