「20分でわかる!Xamarin.Forms入門」というタイトルでお話させて頂きました

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

2015/05/07(土)、JXUGC #13 東京 緊急開催 Xamarin のすべて!〜 無償化が発表されて大きな盛り上がりを見せる Xamarin を学ぼう〜に参加させて頂きました。

IMG_2340

公開当初から、驚異的な参加者登録で、140人枠のとこり、一時300人をゆうに超えていたと思います。

遂にXamarinが無料で利用可能になったことと、新しくエバンジェリストとしてMicrosoftに入社されたちょまどさんが、登壇されるからだと確信できます。 (これを「ちょまど砲」と呼ぶのだとか・・・)

立ち見の方も多数です。

IMG_2342 IMG_2343

今回は、「20分でわかる!Xamarin.Forms入門」というタイトルで少しお時間を頂きました。

以下、使用したスライドとその概要です。

2 概要

(1) 3種類のアプローチ

Xamarinでアプリを作成する場合、大きく次の3種類のアプローチがあります。

  • Xamarin.iOS
  • Xamarin.Android
  • Xamarin.Forms

今回は、このうちのXamarin.Formsについて、主に画面設計のアプリーチから入門的な内容をお話しさせて頂きました。

(2) ページ

Xamarin.Formsで画面を構成するには、最初にページを理解する必要があります。

ApplicationのメインのWindows(Pageクラス)にセットされ、アプリの起点となる画面になります。

004

001

Xamarin.FormsのPageクラスは、次の6つがあります。

  • ContentPage
  • MasterDetailPage
  • NavigationPage
  • TabbedPage
  • TemplatedPage
  • CarouselPage

【参考資料】

Xamarin.Forms ページ(Formsを使用したアプリ作成の第1歩)
Xamarin.Forms Pages

(3) レイアウト

レイアウトは、ページやビューの上にコントールを配置する時、それをサポートします。

005

002

Xamarin.Formsには、9種類のレイアウトクラスがあります。

  • StackLayout
  • AbsoluteLayout
  • Grid
  • RelativeLayout
  • Frame
  • ScrollView
  • ContentView
  • ContentPresenter
  • TemplatedView

【参考資料】

Xamarin.Forms レイアウト(Formsを使用したアプリ作成の次の1歩)
Xamarin.Forms Layouts

(4) コントロール

ユーザとの直接やりとりするUI部品として、コントロールがあります。

006

Xamarin.Formsには、19種類のコントーロールがあります。

  • ActivityIndicator
  • BoxView
  • Button
  • DatePicker
  • TimePicker
  • Editor
  • Entry
  • Image
  • Label
  • Picker
  • ProgressBar
  • SearchBar
  • Slider
  • Stepper
  • Switch
  • WebView
  • ListView
  • TableView
  • OpenGLView

【参考資料】

Xamarin.Forms コントロール① (Formsを使用した最後の1歩)
Xamarin.Forms コントロール② (Formsを使用した最後の1歩)
Xamarin.Forms Views

(5) セル

ListView及びTableViewを使用する場合、その1つ1つのカラムに表示するためのセルを用意しなければなりません。

007

Xamarin.Formsには、5種類のセルがあります。

  • TextCell
  • ImageCell
  • EntryCell
  • SwitchCel
  • ViewCell

【参考資料】

Xamarin.Forms セル(Formsを使用した追加の1歩)
Xamarin.Forms Cells

(6) ページ間の遷移

最初に設定したページだけでアプリが収まらない場合、さらに別のページに遷移する必要があります。 この場合、ContentPageクラスのNavigationを使用して遷移することが可能です

Navigation.PushModalAsync(new NewPage()); // 別のページに遷移する
Navigation.PopModalAsync(); // 遷移元に戻る

008

003

下記は、NavigationPage内での遷移なので間違わないように注意が必要です。

Navigation.PushAsync(new NewPage());

(7) 無理やりまとめると

009

3 最後に

お話しさせて頂いた内容は、時間の関係でかなり不十分になってしまっています。本記事で紹介した関連リンクを御利用頂ければ幸いです。

今回は、スピーカーの方も結構多数の参加で、Xamarinの中の方や、長くXamarinを触って来てこられた濃ゆい方々にお会いできたのも嬉しかったです。

Xamarinをやっていると、いつもお目にかかるアイコンと本人がリンクできたのは、個人的に大きな成果でした。

4 参考資料

Japan Xamarin User Group
Xamarin.iOS 基本プロジェクトからみるXcode(Objective-C/Swift)との比較
Xamarin.iOS テンプレート(Single View App)
Xamarin.Android 基本プロジェクトからみるAndroid Studio(Java)との比較
Xamarin.Android テンプレート(Blank App)
Xamarin記事一覧(SAPPOROWORKSの覚書)
[Developers.IO] Xamarinシリーズ