2019/6/26 改訂：次回以降の内容を更新しました。
はじめに
Xamarin.Formsという技術を用いることで、C#で Android、iOS、Windowsのスマホやタブレットで動作するアプリが開発できます。本連載は、実際に私がアプリ開発中に利用したノウハウを記します。
この連載は、以下の方が対象です。
- C#をそこそこ理解している人
- Xamarin.Formsでスマホアプリやゲームを作ってみたい人
本記事は、その導入に当たって、まず「デバイスの向き固定」や「ナビゲーションバーの非表示」などの初期設定を行います。次回以降は、以下の内容です。
Visual Studioのインストール
Visual Studio 2017で環境構築する場合は、以下を参照ください。Visual Studio 2019でもほぼ同じです。無償のCommunity Editionで問題ありません。
Xamarin やりたい人向け Visual Studio 2017 インストール手引書
デバイスの向きを固定
デバイスの向きを固定する場合は、プラットフォームごとのプロジェクトで設定します。
iOS、Android、UWP、それぞれの向きの固定方法は以下を参照ください。
デバイスの向き
ここで、Androidの横向き固定について、上記の記事は日本語が機械翻訳で分かりにくいため補足します。記事を読むと、MainActivity.csの属性に、以下のように書くのが良さそうに見えるかもしれません。
ScreenOrientation = ScreenOrientation.Landscape
しかし、この設定では、一方の横向きだけで固定されてしまい、180度回転させた場合に、上下が反転しません。180度回転させた場合に、上下が反転するように横向き固定で表示するには、以下を設定します。
ScreenOrientation = ScreenOrientation.SensorLandscape
(同様に、縦向き固定はScreenOrientation.SensorPortraitです)
ナビゲーションバーを非表示にする
アプリ起動中に、画面上部のナビゲーションバー(下図の上部の青い部分)を非表示にしたい場合の設定です。少しでも画面を大きく使いたい場合は非表示にします。
以下のように非表示にします。
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
// ナビゲーションバーを非表示にする
NavigationPage.SetHasNavigationBar(this, false);
}
}
上記のコードで非表示になると解説されているサイトが多くありましたが、私のAndorid環境では、非表示になりませんでした。以下の記事にもその旨が記載されており、その記事の解決策の通りに、AndoridプロジェクトのMainActivityクラスで以下の実装を行うことでナビゲーションバーを非表示にしました。
NavigationPage.SetHasNavigationBar not working on Android
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
...
// Androidのナビゲーションバーを非表示にする
Forms.SetTitleBarVisibility(this, AndroidTitleBarVisibility.Never);
}
}
多言語用のリソースファイルを作成
以下の方法で、日本語用と英語用の2種類のリソースファイルを作成します。対象ユーザーを日本人だけにするより、英語でもリリースした方がダウンロード数は多くなるそうです。
Xamarin.FormsアプリのUIを日本語以外でも表示する
各コントロールのStyleを定義
App.xamlの中で、あらかじめ各コントロールのStyleを設定しておくと便利です。
プラットフォームによって、コントロールの既定値が違うこともあるようです(Labelの文字色はUWPとAndroidで違っていました)。おそらくOSごとに合った見た目の設定になっているのだと思いますが、どのOSでも同じ見た目のアプリを開発したい場合は、Styleで既定値を設定しておくとよいでしょう。
また、StackLayoutやGridについて、WPF経験のある人は、要素間に数ピクセルの隙間ができることに戸惑うかもしれません。私の場合はWPFの既定値と同じように、Spaceing、RowSpacing、ColumnSpacingプロパティを0にすることで、要素間の隙間を無くしました。
以下、App.xamlの例です。
<!--LabelのStyleの例-->
<Style TargetType="Label">
<Setter Property="FontSize" Value="22"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="VerticalTextAlignment" Value="Center"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="TextColor" Value="Black"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="LineBreakMode" Value="NoWrap"/>
</Style>
<!--StackLayoutの要素間の隙間を無くすStyle-->
<Style TargetType="StackLayout">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<!--Gridの要素間の隙間を無くすStyle-->
<Style TargetType="Grid">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="0" />
</Style>
Androidの実機でのデバッグ環境構築
Androidのエミュレーターは遅いですし、実機と微妙に動作が違うことがあるので、実機で確認した方がいいです。私はAndroidの実機がなかったため、Androidのタブレットを中古で1万円台で購入しました。
実機でのデバッグ方法は、以下を参考にしました。
XamarinのADV「エミュレーター」は使物にならない！デバッグに実機を使用する方法！
iOSの実機でのデバッグ環境構築
iOSでデバッグ実行するには、macOSのPCが必要です。やり方は以下を参照ください。
【VisualStudio 2017】Xamarinを使ってWindowsからiOSアプリを実機ビルドする
普段のデバッグはUWPがオススメ
最終的に、AndoridとiOS向けのスマホアプリとしてリリースしたい場合でも、普段のデバッグはUWPプロジェクトで行うことをお勧めします。理由は、起動が早いからです。Androidのシミュレーターや実機は、ビルドしてから実行するまでに私の環境では1分以上かかります。それに比べてUWPは、数秒で起動できます。したがって、普段のデバッグ実行はUWPで行い、UWPで意図通りに動作することを確認してからAndroidやiOSの実機で行うのが効率的だと思います。
Xamarin標準のコントロールを多用している場合、プラットフォームごとに挙動の違いがそこそこありますが、この連載で紹介予定のSkiaSharpやSyncfusionなどのコンポーネントを活用していれば、プラットフォームごとの挙動の違いは少ないと思います。
UWPの起動速度向上
Visual Studioの以下のデバック機能を必要がない場合は無効にします。私の環境では、この設定変更により、UWPでのデバッグ起動が3秒くらい速くなりました。
- [デバッグ] - [全般] - [デバッグ中に診断ツールを有効にする] のチェックを外す。
- [デバッグ] - [全般] - [デバッグ中に経過時間のPerfTipを表示する] のチェックを外す。
- [デバッグ] - [全般] - [XAMLのUIデバッグツールを無効にする] のチェックを外す。
また、UWPのプロジェクトは、以下の設定を行うことで若干起動速度が上がります（デバッグ時間を少しでも効率化）。
スプラッシュスクリーンをすっとばして起動速度を上げる
お役立ちリンク集
以下に開発の序盤に私が参考にさせていただいたリンク先を記載します。
Xamarinでどんなことができるのかの概要を理解するために、以下を読んでおくことで、効率的に開発が進められました。
Xamarin.Forms のアプリケーションの基礎
やりたいことをどうやって実装するのかを探す時は、以下のサンプルが役立ちました。
Xamarin.Forms Sample
一通りのアニメーションの実装方法が書いてある以下の記事はとても参考になりました。
[Xamarin.Forms] シンプルなアニメーション（回転、拡大・縮小、移動、フェード）を実行する方法
WPFでのCanvasのように、画面上に自由な配置でコントロールを配置するAbsoluteLayoutの使い方は以下が参考になりました。
[Xamarin.Forms] AbsoluteLayoutでプロポーショナルレイアウト
次回
次回は「バインドに対応したグラデーションコントロールの作成」です。