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 基礎講座

3,663 views

Published on

Xamarin ハンズオン時に使用している Xamarin ネイティブ、Xamarin.Forms の基礎を学ぶスライドです。
(一部コンテンツを Xamarin University からインスパイアしています)

Published in: Mobile
  • Be the first to comment

Xamarin 基礎講座

  1. 1. Xamarin ハンズオ ン エクセルソフト株式会社 Business Development Manager 田淵 義人 ytabuchi@xlsoft.com 03-5440-7875 / 080-7015-3586 1
  2. 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. 3. 本日の流れ • Xamarin ネイティブ基礎講習 30分 • Xamarin ネイティブハンズオン 1時間半 • 休憩 15分 • Xamarin.Forms 基礎購入 30分 • Xamarin.Forms ハンズオン 1時間半 • キャッチアップ、クロージング 3
  4. 4. モバイルアプリ開発に必要 なモノ 4
  5. 5. 今までのアプ リ開発 5
  6. 6. クロスプラットフォーム 開発環境 “No Silver Bullet” 6
  7. 7. Xamarin(ザマリン) ・ C# / .NET / Visual Studio ・ フル “ネイティブ” アプリ ・ API 100% 移植 ・ コード共通化 7
  8. 8. Xamarin のしくみ 2つの開発手法 8
  9. 9. Xamarin ネ イティブ 9
  10. 10. Xamarin.For ms UI “コード”の共 通化 ビルド時にネイ ティブ UI にマッ プ XAML 10
  11. 11. 豊富な開発者 用リソース • 公式ドキュメント • ペゾルド本(PDFが無料配布中) 日本語の情報 • Japan Xamarin User Group Conference • Build Insider • Qiita • 田淵のブログ • 各種ブログへのリンク 11
  12. 12. Xamarin ネイティブ 12
  13. 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. 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. 15. Xamarin.Android 15
  16. 16. 構成 16 ソースファイル (C#) UI 定義 (axml) メタデータ (Resources)
  17. 17. Activity 17 Activity 1 UI Code Activity 2 UI Code Activity 3 UI Code Data, files, images など アプリ
  18. 18. Layout 18
  19. 19. Pi.axml PiActivity.cs Activity + Layout 19 <LinearLayout ... > <TextView ... /> <EditText ... /> <Button ... /> <TextView ... /> </LinearLayout> [Activity] public class PiActivity : Activity { ... ... }
  20. 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. 21. Intent 21
  22. 22. Intent 22 public class MainActivity : Activity { ... void OnClick(object sender, EventArgs e) { var intent = new Intent(this, typeof(Activity2)); base.StartActivity(intent); } }
  23. 23. Navigation 23
  24. 24. Extra 24
  25. 25. Xamarin.iOS 25
  26. 26. 構成 26 ソースファイル (C#) UI 定義 (Storyboard + XiB) メタデータ (property lists)
  27. 27. Frame 27
  28. 28. Bounds 28
  29. 29. View (コードで) 29
  30. 30. Designer 30
  31. 31. Constraints (制約) 31
  32. 32. Multi Screen 32
  33. 33. Segue 33
  34. 34. Action Segue 34
  35. 35. PerformSegue 35
  36. 36. Xamarin.Forms 36
  37. 37. 構成要素・対応システム 37
  38. 38. Pages Content MasterDetail Navigation Tabbed Carousel 38
  39. 39. Layouts Stack Absolute Relative Grid ContentView ScrollView Frame 39
  40. 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. レンダリング / マッピング 41
  42. 42. C# 42
  43. 43. Microsoft XAML vs Xamarin.Forms XAML 43
  44. 44. サポートされている XAML 機能 44
  45. 45. 45
  46. 46. Attributes 46
  47. 47. x:Name Event 47
  48. 48. Event 48
  49. 49. OnPlatform 49
  50. 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. 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. 52. Dependency Service 52 IDialer.cs : PCL public interface IDialer { bool Dial(string number); } Use var dialer = DependencyService.Get<IDialer>(); dialer.Dial(translatedNumber);
  53. 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. 54. Custom Renderer 54 RoundedButton.cs (PCL) public class RoundedButton : Button { public RoundedButton() { } }
  55. 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. 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. 57. Xamarin Plugins https://github.com/xamarin/plugins 57
  58. 58. Xamarin.Forms 完成品 58
  59. 59. ご清聴ありがとうございま す。ハンズオン楽しんでく ださい。 ご質問がありましたら、田淵までお気軽にどうぞ ytabuchi@xlsoft.com 080-7015-3586 / 03-5440-7875 Twitter: @ytabuchi facebook: ytabuchi.xlsoft Blog: http://ytabuchi.hatenablog.com/ 59

×