Xamarin 基礎講座
5 likes4,611 views
Xamarin ハンズオン時に使用している Xamarin ネイティブ、Xamarin.Forms の基礎を学ぶスライドです。 （一部コンテンツを Xamarin University から???????しています）
![Pi.axml PiActivity.cs
Activity + Layout
19
<LinearLayout ... >
<TextView ... />
<EditText ... />
<Button ... />
<TextView ... />
</LinearLayout>
[Activity]
public class PiActivity : Activity
{
...
...
}](https://image.slidesharecdn.com/xamarinhandson-160424091627/85/Xamarin-19-320.jpg)
![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);
...
}
...
}](https://image.slidesharecdn.com/xamarinhandson-160424091627/85/Xamarin-20-320.jpg)
![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));
}
}](https://image.slidesharecdn.com/xamarinhandson-160424091627/85/Xamarin-53-320.jpg)
![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;
}
}
}](https://image.slidesharecdn.com/xamarinhandson-160424091627/85/Xamarin-55-320.jpg)
Xamarin 基礎講座
- 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
- 5. 今までのアプ リ開発 5
- 7. Xamarin（ザマリン） ? C# / .NET / Visual Studio ? フル “ネイティブ” アプリ ? API 100% 移植 ? コード共通化 7
- 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) => { ... };
- 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
- 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 狠狠撸r Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell 40
- 42. C# 42
- 43. Microsoft XAML vs Xamarin.Forms XAML 43
- 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>
- 59. ご清聴ありがとうございま す。ハンズオン楽しんでく ださい。 ご質問がありましたら、田淵までお気軽にどうぞ ytabuchi@xlsoft.com 080-7015-3586 / 03-5440-7875 Twitter: @ytabuchi facebook: ytabuchi.xlsoft Blog: http://ytabuchi.hatenablog.com/ 59