Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Xamarin.Formsの概要と 
カスタムコントロール 
Microsoft MVP C# 
増田智明 
Moonmile Solutions
自己紹介 
 増田智明masdua@moonmile.net 
 執筆業&プログラマ 
 C#によるiOS, Android, Windowsアプリケーション開発入門 
 逆引き大全Visual C# 2013, Visual Basi...
アジェンダ 
Xamarin.Forms とは何か? 
何故Xamarin.Forms を使うのか? 
MS-XAML とは何か? 
Xamarin.Froms の弱点 
Xamarin.Forms を拡張する手法
Xamarin.Forms とは?
Xamarin.Forms とは何か? 
 iPhone, Android, Windows Phone 
の3機種のUI を同時に作れるライ 
ブラリ 
 ひとつのXAML で同時に3機種に 
対応できる
Xamarin.Forms とは何か? 
 Visual Studio あるいはXamarin 
Studio でコードで書く。 
 Visual Studio あるいはXamarin 
Studio でXAML を書く。 
 XAML ...
Xamarin.iOS/Android の共通部品 
 Pages 
 Layouts 
 Views 
 Cells
何故Xamarin.Forms を使うのか?
何故Xamarin.Forms を使うのか? 
 ひとつのUI で複数プラットフォームに対応 
 対応UI がひとつであれば、Xamarin.iOS/Android を選択 
 共通ライブラリであれば、PCL やShared Projec...
Xamarin.iOS/Android/Windows Phone 
Xamarin 
PCL or Shared 
Xamarin.Android 
axml 
Xamarin.iOS 
Storyboard(xml) 
Windows Ph...
Xamarin.Formsのレンダリング 
2014年5月末de:code の前日に発表 
Xamarin-XAML 
XAML or Code 
ContentPage 
PCL or Shared 
Android 
AndroidActi...
Xamarin.Forms のXAML とは? 
 MS-XAML 規格 
 XAML 構文の詳細 
 MS-XAML 
 Microsoft Domain-Specific Languages 
WPF やSliverlight など...
XAMLの条件 
 マークアップ拡張 
 x:Name で名前付け 
 x:Class でコードとの対応付け 
 データバインディング 
 <TagName Text=“{Binding Name}” が有効 
 ドット付きのタグ名...
Xamarin.Forms の弱点
Xamarin.Forms の弱点 
 3 機種の共通部分しか提供されない 
 レンダラー時に、各プラットフォー 
ムの共通コントロールに置き換えら 
れるため 
 デバイス依存の部品は提供されない 
 カメラ機能、GPS、マップなど ...
デザイナがない 
 現状、Xamarin.Forms はコードで書くか、 
XAML を直書きするか。 
 スマートフォンの場合は、StackLayout で十 
分だが、タブレットになるとデザイナ無し 
では難しくなる。 
 Xamar...
Xamarin.Forms で拡張する手法
拡張する手法 
 既存のコントロールを組み合わせる 
 DependencyService を使う 
 カスタムレンダラを使う
既存コントロールの組み合わせ 
 Windows ストアアプリのようにユーザコントロールを作る 
1. *.xaml ファイルを作る 
2. コントロールを並べる 
3. コードビハイドで独自コードを書く 
4. clr-namespace ...
既存コントロールの組み合わせ 
カスタムコントロール 
既存コントロール 
既存コントロール 
既存コントロール 
XAML 
iOS 
Android 
Windows Phone
DependencyService を使う 
 インターフェースを利用した委譲/Listenerパターン 
1. PCL にインターフェースを作る 
public interface IDependencyCalc … 
2. 内部動作をiO...
DependencyService 
Portalbe Class Library 
Interface 
IDependencyCalc 
iOS 
Android 
Windows 
Phone 
Implement 
Dependency...
カスタムレンダラを使う 
 表示/動作のみ機種依存させる 
1. PCL に空のコントロールを作る(実は空でなくてもよい) 
public class MyEntry : Entry 
2. 内部動作をiOS/Android/Windows ...
カスタムレンダラを使う 
XAML 
Portalbe Class Library 
class 
MyEntry 
iOS 
Android 
Windows 
Phone 
EntryRenderer 
OnElementChanged 
...
使い分け 
ユーザコントロール方式カスタムレンダラ方式 
Xamarin.Forms 
機種依存 
カメラ、画像描画、マップ 
など 
UI 以外 
DependencyService方式 
他に、Xamarin.Forms.Labs やリフレ...
参考文献 
 英語 
 3. XAML Markup Extensions 
 Accessing Native Features via the DependencyService 
 Customizing Controls for...
Upcoming SlideShare
Loading in …5
×

Xamarin.formsとカスタムコントロールの話

2,066 views

Published on

第2回 Japan Xamarin User Group Conference 東日本編
2014/11/22 の発表スライドです。
Xamarin.Forms の概要と拡張(カスタムコントロール、DependencyService、カスタムレンダラ)

Published in: Technology
  • Be the first to comment

Xamarin.formsとカスタムコントロールの話

  1. 1. Xamarin.Formsの概要と カスタムコントロール Microsoft MVP C# 増田智明 Moonmile Solutions
  2. 2. 自己紹介  増田智明masdua@moonmile.net  執筆業&プログラマ  C#によるiOS, Android, Windowsアプリケーション開発入門  逆引き大全Visual C# 2013, Visual Basic 2013  逆引き大全iPhone/iPad アプリ開発  作って覚えるiPhone/iPad アプリ入門
  3. 3. アジェンダ Xamarin.Forms とは何か? 何故Xamarin.Forms を使うのか? MS-XAML とは何か? Xamarin.Froms の弱点 Xamarin.Forms を拡張する手法
  4. 4. Xamarin.Forms とは?
  5. 5. Xamarin.Forms とは何か?  iPhone, Android, Windows Phone の3機種のUI を同時に作れるライ ブラリ  ひとつのXAML で同時に3機種に 対応できる
  6. 6. Xamarin.Forms とは何か?  Visual Studio あるいはXamarin Studio でコードで書く。  Visual Studio あるいはXamarin Studio でXAML を書く。  XAML デザイナのようなものはな い
  7. 7. Xamarin.iOS/Android の共通部品  Pages  Layouts  Views  Cells
  8. 8. 何故Xamarin.Forms を使うのか?
  9. 9. 何故Xamarin.Forms を使うのか?  ひとつのUI で複数プラットフォームに対応  対応UI がひとつであれば、Xamarin.iOS/Android を選択  共通ライブラリであれば、PCL やShared Project を使う  UI にXAML フォーマットを使う  MS-XAML 互換のフォーマット
  10. 10. Xamarin.iOS/Android/Windows Phone Xamarin PCL or Shared Xamarin.Android axml Xamarin.iOS Storyboard(xml) Windows Phone XAML Android iOS Windows Phone ロジックをPCL or Shared で書くそれぞれのUI を書く
  11. 11. Xamarin.Formsのレンダリング 2014年5月末de:code の前日に発表 Xamarin-XAML XAML or Code ContentPage PCL or Shared Android AndroidActivity.SetPage iOS Page. CreateViewController Windows Phone Page.ConvertPageToUIElement XAML 解釈とUI のレンダリングが 異なる場所にある
  12. 12. Xamarin.Forms のXAML とは?  MS-XAML 規格  XAML 構文の詳細  MS-XAML  Microsoft Domain-Specific Languages WPF やSliverlight など各種規格がある  XAML for Xamarin.Forms  MS-XAML 規格に則る  XAML Markup Extensions  Data Binding to MVVM
  13. 13. XAMLの条件  マークアップ拡張  x:Name で名前付け  x:Class でコードとの対応付け  データバインディング  <TagName Text=“{Binding Name}” が有効  ドット付きのタグ名  Grid.Row などのドット付きのタグ名を有効にする WinStore-XAML XAML  よって、各種部品の名前は異なるがXamarin.Forms はXAML である。 TextBlock など Xamarin-XAML Label など
  14. 14. Xamarin.Forms の弱点
  15. 15. Xamarin.Forms の弱点  3 機種の共通部分しか提供されない  レンダラー時に、各プラットフォー ムの共通コントロールに置き換えら れるため  デバイス依存の部品は提供されない  カメラ機能、GPS、マップなど iOS Android Windows Phone Xamarin.Forms
  16. 16. デザイナがない  現状、Xamarin.Forms はコードで書くか、 XAML を直書きするか。  スマートフォンの場合は、StackLayout で十 分だが、タブレットになるとデザイナ無し では難しくなる。  Xamarin Sketches を利用する  Xamarin Sketches  Mac のみ、現在ベータ版  Xamarin.Forms Preview を自作中 (ちょっと頓挫)by moonmile
  17. 17. Xamarin.Forms で拡張する手法
  18. 18. 拡張する手法  既存のコントロールを組み合わせる  DependencyService を使う  カスタムレンダラを使う
  19. 19. 既存コントロールの組み合わせ  Windows ストアアプリのようにユーザコントロールを作る 1. *.xaml ファイルを作る 2. コントロールを並べる 3. コードビハイドで独自コードを書く 4. clr-namespace でインクルード xmlns:cc="clr-namespace:XamarinMyCustom.Views;assembly=XamarinMyCustom“ 5. 作成したコントロールを配置 <cc:CustomButton />
  20. 20. 既存コントロールの組み合わせ カスタムコントロール 既存コントロール 既存コントロール 既存コントロール XAML iOS Android Windows Phone
  21. 21. DependencyService を使う  インターフェースを利用した委譲/Listenerパターン 1. PCL にインターフェースを作る public interface IDependencyCalc … 2. 内部動作をiOS/Android/Windows Phone 側で実装する [assembly: Dependency(typeof(DependencyCalcImpl))] class DependencyCalcImpl : IDependencyCalc 3. PCL 側でDependencyService.Get<...> で呼び出し _dep = DependencyService.Get<IDependencyCalc>();
  22. 22. DependencyService Portalbe Class Library Interface IDependencyCalc iOS Android Windows Phone Implement DependencyCalc DependencyService .Get<> Implement DependencyCalc Implement DependencyCalc
  23. 23. カスタムレンダラを使う  表示/動作のみ機種依存させる 1. PCL に空のコントロールを作る(実は空でなくてもよい) public class MyEntry : Entry 2. 内部動作をiOS/Android/Windows Phone 側で実装する [assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))] public class MyEntryRenderer : EntryRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) { 3. PLC でXAML に配置する xmlns:cc=“clr-namespace:XamarinMyCustom.Views;assembly=XamarinMyCustom” <cc:MyEntry x:Name="myentry" Text="Sample" />
  24. 24. カスタムレンダラを使う XAML Portalbe Class Library class MyEntry iOS Android Windows Phone EntryRenderer OnElementChanged MyEntry 描画 EntryRenderer OnElementChanged EntryRenderer OnElementChanged
  25. 25. 使い分け ユーザコントロール方式カスタムレンダラ方式 Xamarin.Forms 機種依存 カメラ、画像描画、マップ など UI 以外 DependencyService方式 他に、Xamarin.Forms.Labs やリフレクション方式がある
  26. 26. 参考文献  英語  3. XAML Markup Extensions  Accessing Native Features via the DependencyService  Customizing Controls for Each Platform  Creating Mobile Apps with Xamarin.Forms, Preview Edition (Developer Reference) Kindel 版  日本語  Xamarin.Formsの基本構想と仕組み  Xamarin.Forms でユーザーコントロール的なView を作る  Xamarin.Formsからプラットフォーム固有の機能を利用するには?(DependencyService利用)  Xamarin.Formsでカメラを使う– Android編  Xamarin.Forms 「付箋紙を張るやつ」を作ってみた(画面構成)  MS-XAML  XAML 構文の詳細  Microsoft Domain-Specific Languages

×