Xamarin行動應用開發

Xamarin 行動應用開發
Ian Chen

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 社群講師兼共同創辦人
• 企業技術內訓講師
• 學校業界講師

Agenda
• Xamarin 開發平台介紹
• 版面配置知多少
• 頁面巡覽機制
• DependencyService &
Plug-in

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 控制項

Xamarin.Forms + PCL 專案
• XamarinUI (可攜式)：
跨平台共用的程式碼寫入此 PCL，包括一般商務邏輯和
UI 程式碼
• XamarinUI.Droid：
包含原生 Android 程式碼的專案。這會設為預設啟始專
案
• XamarinUI.iOS：
包含原生 iOS 程式碼的專案
• XamarinUI.UWP：
包含 Windows 10 UWP 程式碼的專案

Xamarin.Forms Views
Rendering a platform-specific view

常用Layout 種類
• StackLayout
• RelativeLayout
• AbsoluteLayout
• Grid

版面配置屬性 LayoutOptions
•Start
垂直模式：最上方對齊水平模式：最左邊對齊
•Center
往中間垂直水平對齊
•End
垂直模式：最下方對齊水平模式：最右邊對齊
•Fill
填充父階項目所佔有空間的大小
•Expand
當父階項目有多餘的空間時，有 Expand 的子項目，
將會佔據這些空間，搭配Start、Center、End、Fill
（FillAndExpand、CenterAndExpand、
EndAndExpand、StartAndExpand）

StackLayout
垂直或水平編排控制項元件位置，預
設是垂直

RelativeLayout
相對佈局，透過目前控制項與其它控制
項或者是父階控制項之間的Constraints
（約束）來編排控制項元件位置
• RelativeLayout.XConstraint
• RelativeLayout.YConstraint
• RelativeLayout.WidthConstraint
• RelativeLayout.HeightConstraint

RelativeLayout
• ConstraintExpression 運算式
• Type=Constant
RelativeToParent
RelativeToView
• RelativeToParent - relative
parent layout
• RelativeToView - relative child
views

RelativeLayout
ElementName 指定相對物件是誰
Property 以相對物件的哪個屬性做為基礎值
Factor 指定Property的倍數值
Constant 指定Value的偏移值
X坐標的值 = (相對Label3控制項的X坐標值*1.2)+20

AbsoluteLayout
絕對佈局，透過絕對值或是比例來編
排控制項，因為設備尺寸不一致，通
常很少用絕對值
比例 0~1
eg:設定位置(x,y)，由原點0到最遠點1

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是比
例值

AbsoluteLayout
只有X點是比例，其餘是絕對值

Grid
• 以表格式行跟列的方式來編排控制
項位置
• 定義行和列
• Grid.RowDefinitions
• Grid.ColumnDefinitions
• 合併行/列
• Grid.ColumnSpan
• Grid.RowSpan

Grid
定義了2*2的表格，第一行的高度是90，第二行的高度是
120，第一列的寬是自動調整，第二行的寬是分配剩下的空
間

善用Resources
• 減少重覆的XAML定義碼
• Application Level Resources
• Control Level Resources

頁面巡覽機制(Navigation)
App 中切換不同頁面的行為
Navigation stack
Page 2
Page 1
Root Page
first-in/last-out stack

Navigation stack 將會依序從堆壘資料移除Page
navigation bar at the top of the screen for iOS and Android

Go to root page
Navigation stack
Page 2
Page 1
Root Page

• Navigation.PushAsync(new Page2())
• Navigation.PopAsync();
• Navigation.PopToRootAsync();

Not Login -> Login Page
Login -> Main Page
Navigation.InsertPageBefore
Navigation stack
Other Page
Main Page
Login Page
Root Page

Login -> Main Page

Login -> Main Page
Navigation stack
Other Page
Main Page
Login Page
Navigation stack
Root Page

Login -> Main Page
Navigation stack
Other Page
Main Page
Navigation stack
Root Page

ModalPage Navigation• Navigation.PushModalAsync
• Navigation.PopModalAsync
•
• ModalPage 不會生成back鍵
• ModalPage 不能混用 ModelessPage

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.

DependencyService
Android Project

Plugins
Easily add native functionality
to Xamarin.Forms apps
https://components.xamarin.com/?category=plugins

Xamarin行動應用開發

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Xamarin行動應用開發

Semelhante a Xamarin行動應用開發 (20)

Mais de Ian Chen

Mais de Ian Chen (18)

Xamarin行動應用開發