Xamarin ハンズオン時に使用している Xamarin ネイティブ、Xamarin.Forms の基礎を学ぶスライドです。 （一部コンテンツを Xamarin University からｲﾝｽﾊﾟｲｱしています）

1. Xamarin ハンズオ
ン
エクセルソフト株式会社
Business Development Manager
田淵 義人
ytabuchi@xlsoft.com
03-5440-7875 / 080-7015-3586
1

2. 自己紹介 • 田淵義人
• Xamarin コミュニティエバンジェリスト
• Microsoft MVP Visual Studio and Development
Tools 受賞♪
• 目指せ！開発もﾁｮｯﾄﾃﾞｷﾙ営業
• マイナビニュースで連載中
• Build Insider Xamarin TIPS で連載中
• 本書きました（Xamarin の章）
• Twitter: @ytabuchi
• facebook: ytabuchi.xlsoft
• Blog: http://ytabuchi.hatenablog.com/

3. 本日の流れ • Xamarin ネイティブ基礎講習 30分
• Xamarin ネイティブハンズオン 1時間半
• 休憩 15分
• Xamarin.Forms 基礎購入 30分
• Xamarin.Forms ハンズオン 1時間半
• キャッチアップ、クロージング
3

4. モバイルアプリ開発に必要
なモノ
4

5. 今までのアプ
リ開発
5

6. クロスプラットフォーム
開発環境
“No Silver Bullet”
6

7. Xamarin（ザマリン）
・ C# / .NET / Visual Studio
・ フル “ネイティブ” アプリ
・ API 100% 移植
・ コード共通化
7

8. Xamarin のしくみ
２つの開発手法
8

9. Xamarin ネ
イティブ
9

10. Xamarin.For
ms
UI “コード”の共
通化
ビルド時にネイ
ティブ UI にマッ
プ
XAML
10

11. 豊富な開発者
用リソース
• 公式ドキュメント
• ペゾルド本（PDFが無料配布中）
日本語の情報
• Japan Xamarin User Group Conference
• Build Insider
• Qiita
• 田淵のブログ
• 各種ブログへのリンク
11

12. Xamarin ネイティブ
12

13. C#
13
var employees = new List<Employee>();
var seniors = from e in employees where e.Salary > 50000 select e;
var client = new HttpClient();
var result = await client.GetStringAsync("");

14. C# 構文
14
EditText input = new EditText(this);
String text = input.getText().toString();
input.addTextChangedListener(new TextWatcher() { ... });
var input = new EditText(this);
string text = input.Text;
input.TextChanged += (sender, e) => { ... };

15. Xamarin.Android
15

16. 構成
16
ソースファイル
(C#)
UI 定義
(axml)
メタデータ
(Resources)

17. Activity
17
Activity 1
UI
Code
Activity 2
UI
Code
Activity 3
UI
Code
Data, files,
images など
アプリ

18. Layout
18

19. Pi.axml PiActivity.cs
Activity + Layout
19
<LinearLayout ... >
<TextView ... />
<EditText ... />
<Button ... />
<TextView ... />
</LinearLayout>
[Activity]
public class PiActivity : Activity
{
...
...
}

20. Resource Id
20
[Activity(MainLauncher = true)]
public class MainActivity : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
var et = FindViewById<EditText>(Resource.Id.digitsInput);
...
}
...
}

21. Intent
21

22. Intent
22
public class MainActivity : Activity
{
...
void OnClick(object sender, EventArgs e)
{
var intent = new Intent(this, typeof(Activity2));
base.StartActivity(intent);
}
}

23. Navigation
23

24. Extra
24

25. Xamarin.iOS
25

26. 構成
26
ソースファイル
(C#)
UI 定義
(Storyboard + XiB)
メタデータ
(property lists)

27. Frame
27

28. Bounds
28

29. View (コードで)
29

30. Designer
30

31. Constraints (制約)
31

32. Multi Screen
32

33. Segue
33

34. Action Segue
34

35. PerformSegue
35

36. Xamarin.Forms
36

37. 構成要素・対応システム
37

38. Pages
Content MasterDetail Navigation Tabbed Carousel
38

39. Layouts
Stack Absolute Relative Grid ContentView ScrollView Frame
39

40. Controls
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell
40

41. レンダリング / マッピング
41

42. C#
42

43. Microsoft XAML vs Xamarin.Forms XAML
43

44. サポートされている XAML 機能
44

45. 45

46. Attributes
46

47. x:Name Event
47

48. Event
48

49. OnPlatform
49

50. Data Binding (Mvvm)
50
ListPage.xaml
<ListView ItemsSource="{Binding .}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Image Source="{Binding Photo}" />
<Label Text="{Binding Person}"/>
<Label Text="{Binding Department}" />
<Label Text="{Binding Age, StringFormat='{0}才'}" />
<Label Text="{Binding Followers, StringFormat='Followers: {0}'}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

51. Data Binding (Mvvm)
51
ListPageViewModel.cs
class ListPageViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _person;
public string Person
{
get { return _person; }
set
{
if (_person != value)
{
_person = value;
OnPropertyChanged(nameof(Person));
}
}
}
}

52. Dependency Service
52
IDialer.cs : PCL
public interface IDialer
{
bool Dial(string number);
}
Use
var dialer = DependencyService.Get<IDialer>();
dialer.Dial(translatedNumber);

53. Dependency Service
53
PhoneDialer.cs / iOS
[assembly: Dependency(typeof(PhoneDialer))]
public class PhoneDialer : IDialer
{
public bool Dial(string number)
{
return UIApplication.SharedApplication.OpenUrl(
new NSUrl("tel:" + number));
}
}

54. Custom Renderer
54
RoundedButton.cs (PCL)
public class RoundedButton : Button
{
public RoundedButton() { }
}

55. Custom Renderer
55
RoundedButton.cs (iOS)
[assembly: ExportRenderer(typeof(RoundedButton), typeof(RoundedButtonRenderer))]
class RoundedButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var c = UIColor.FromRGB(0.867f, 1.0f, 0.867f); // #ddffdd
Control.Layer.CornerRadius = 25f;
Control.Layer.BackgroundColor = c.CGColor;
}
}
}

56. Custom Renderer
56
RoundedButton.cs (Android)
if (Control != null)
{
Control.SetBackgroundResource(Resource.Drawable.RoundedButton);
}
RoundedButton.xml (Android)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#99cc99"/>
<corners android:radius="25dp"/>
</shape>

57. Xamarin Plugins
https://github.com/xamarin/plugins
57

58. Xamarin.Forms 完成品
58

59. ご清聴ありがとうございま
す。ハンズオン楽しんでく
ださい。
ご質問がありましたら、田淵までお気軽にどうぞ
ytabuchi@xlsoft.com
080-7015-3586 / 03-5440-7875
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
Blog: http://ytabuchi.hatenablog.com/
59