Xamarin行動應用開發
- 2. About Me 資深程式設計師，以Microsoft技術為 主，從事於商業應用系統軟體設計與開 發，累積超過15年的Web Application 開發經驗，近年來開始接觸App開發以 及Azure雲端服務，喜愛新事物、把玩 新技術、從Web到App，使終相信學習 是往前進的唯一道路，非常厭倦複製貼 上一成不變的機器模式。 Web: codeian.idv.tw Email: ian.msmvp@outlook.com Blog: dotblogs.com.tw/ian • 高師大資訊教育研究所碩士 • Microsoft MVP Visual Studio and Development Technologies • Microsoft 大型研討會講師 • K.NET 社群講師兼共同創辦人 • 企業技術內訓講師 • 學校業界講師
- 3. Agenda • Xamarin 開發平台介紹 • 版面配置知多少 • 頁面巡覽機制 • DependencyService & Plug-in
- 4. Xamarin + Xamarin.Forms Traditional Xamarin Approach With Xamarin.Forms: More code-sharing, all native iOS C# UI Windows C# UI Android C# UI Shared C# Backend Shared UI Code Shared C# Backend Xamarin 針對 iOS、Android 和 Windows 平台自動呈現原生 UI 控制項
- 5. Xamarin.Forms + PCL 專案 • XamarinUI (可攜式)： 跨平台共用的程式碼寫入此 PCL，包括一般商務邏輯和 UI 程式碼 • XamarinUI.Droid： 包含原生 Android 程式碼的專案。 這會設為預設啟始專 案 • XamarinUI.iOS： 包含原生 iOS 程式碼的專案 • XamarinUI.UWP： 包含 Windows 10 UWP 程式碼的專案
- 7. Xamarin.Forms Views Rendering a platform-specific view
- 9. Xamarin.Forms + C# Code
- 10. 常用Layout 種類 • StackLayout • RelativeLayout • AbsoluteLayout • Grid
- 11. 版面配置屬性 LayoutOptions •Start 垂直模式：最上方對齊 水平模式：最左邊對齊 •Center 往中間垂直水平對齊 •End 垂直模式：最下方對齊 水平模式：最右邊對齊 •Fill 填充父階項目所佔有空間的大小 •Expand 當父階項目有多餘的空間時，有 Expand 的子項目， 將會佔據這些空間，搭配Start、Center、End、Fill （FillAndExpand、CenterAndExpand、 EndAndExpand、StartAndExpand）
- 13. RelativeLayout 相對佈局，透過目前控制項與其它控制 項或者是父階控制項之間的Constraints （約束）來編排控制項元件位置 • RelativeLayout.XConstraint • RelativeLayout.YConstraint • RelativeLayout.WidthConstraint • RelativeLayout.HeightConstraint
- 14. RelativeLayout • ConstraintExpression 運算式 • Type=Constant RelativeToParent RelativeToView • RelativeToParent - relative parent layout • RelativeToView - relative child views
- 15. RelativeLayout ElementName 指定相對物件是誰 Property 以相對物件的哪個屬性做為基礎值 Factor 指定Property的倍數值 Constant 指定Value的偏移值 X坐標的值 = (相對Label3控制項的X坐標值*1.2)+20
- 17. AbsoluteLayout • AbsoluteLayout.LayoutBounds - 設定位置及大小 • AbsoluteLayout.LayoutFlags - 設定所指定值是絕對值或比例值 • None – 預設值，表示X，Y，Width， Height四個值都是絕對值 • All – 表示所有值都是比例值 • WidthProportional – 只有Width是比例 值 • HeightProportional – 只有Height是比例 值 • XProportional – 只有X是比例值 • YProportional – 只有Y是比例值 • PositionProportional – X,Y 是比例值 • SizeProportional – Width和Height是比 例值
- 19. Grid • 以表格式行跟列的方式來編排控制 項位置 • 定義行和列 • Grid.RowDefinitions • Grid.ColumnDefinitions • 合併行/列 • Grid.ColumnSpan • Grid.RowSpan
- 21. 善用Resources • 減少重覆的XAML定義碼 • Application Level Resources • Control Level Resources
- 25. Style Class
- 26. 頁面巡覽機制(Navigation) App 中切換不同頁面的行為 Navigation stack Page 2 Page 1 Root Page first-in/last-out stack
- 27. 頁面巡覽機制(Navigation) Navigation stack 將會依序從堆壘資料移除Page navigation bar at the top of the screen for iOS and Android
- 28. 頁面巡覽機制(Navigation) Go to root page Navigation stack Page 2 Page 1 Root Page
- 29. 頁面巡覽機制(Navigation) • Navigation.PushAsync(new Page2()) • Navigation.PopAsync(); • Navigation.PopToRootAsync();
- 30. 頁面巡覽機制(Navigation) Not Login -> Login Page Login -> Main Page Navigation.InsertPageBefore Navigation stack Other Page Main Page Login Page Root Page
- 31. 頁面巡覽機制(Navigation) Not Login -> Login Page Login -> Main Page Navigation.InsertPageBefore
- 32. 頁面巡覽機制(Navigation) Not Login -> Login Page Login -> Main Page Navigation.InsertPageBefore Navigation stack Other Page Main Page Login Page Navigation stack Root Page
- 33. 頁面巡覽機制(Navigation) Not Login -> Login Page Login -> Main Page Navigation.InsertPageBefore Navigation stack Other Page Main Page Navigation stack Root Page
- 34. 頁面巡覽機制(Navigation) ModalPage Navigation• Navigation.PushModalAsync • Navigation.PopModalAsync • • ModalPage 不會生成back鍵 • ModalPage 不能混用 ModelessPage
- 35. DependencyService allows apps to call into platform-specific functionality from shared code. This functionality enables Xamarin.Forms apps to do anything that a native app can do.
- 39. Plugins Easily add native functionality to Xamarin.Forms apps https://components.xamarin.com/?category=plugins
- 40. 工商服務