學習目標
- 畫面位移 - Padding
- 針對不同平台處理位移 - OnPlatform
- 利用 LayoutOptions.Center 置中 Label
Page 類別有提供一個可位移畫面的屬性,叫做 Padding,類型為 Thickness,而 Thickness 是一種定義了 Left, Top, Right, Bottom 四種屬性的結構 (Structure) (Thickness 的順序是固定的可以記一下)。
iPhone 頂排的高度為 20,所以我們要將畫面從上方往下位移 20 "單位"。
目前還不會討論到單位,第五章會有詳細的討論
程式碼如下
目前還不會討論到單位,第五章會有詳細的討論
程式碼如下
public Greetings() { //初始化 XAML InitializeComponent(); Content = new Label { Text = "Greetings, Xamarin.Forms!" }; Padding = new Thickness(0, 20, 0, 0); }
結果如下
但此時又產生一個問題:Android 和 Windows Phone 也一起位移 20... 我們只想要不乖的 iPhone 位移啊!!!
如何只位移 iPhone
Xamarin 有提供一個 Device 的類別可以取得目前裝置的資訊,如:
當然在 .cs 內可以寫 if else 去判斷目前的作業系統,再來針對特定的平台給予不同的屬性值。
但 Device 有提供更好的方法 - OnPlatform
但此時又產生一個問題:Android 和 Windows Phone 也一起位移 20... 我們只想要不乖的 iPhone 位移啊!!!
如何只位移 iPhone
Xamarin 有提供一個 Device 的類別可以取得目前裝置的資訊,如:
- Device.OS - 可以取得作業系統名稱如 iOS, Android, WinPhone or Other
- Device.Idiom - 可以取得作業的平台如 Phone, Tablet, Desktop or Unsupported
當然在 .cs 內可以寫 if else 去判斷目前的作業系統,再來針對特定的平台給予不同的屬性值。
但 Device 有提供更好的方法 - OnPlatform
泛型方法 OnPlatform<T> 有三個 arguments 可以帶入,順序第一是 iOS, 第二是 Android,第三是 Windows Phone。
下方程式碼就代表只設定 iOS 的位移,其他兩種平台不動。
下方程式碼就代表只設定 iOS 的位移,其他兩種平台不動。
Padding = Device.OnPlatform<Thickness>(new Thickness(0, 20, 0, 0), new Thickness(0), new Thickness(0));
如 arguments 類型可以被系統辨認的話,泛型的類型可以不用寫:
Padding = Device.OnPlatform(new Thickness(0, 20, 0, 0), new Thickness(0), new Thickness(0));
甚至能改寫成 Lambda 語法,讓程式碼更簡潔明瞭。
public Greetings() { //初始化 XAML InitializeComponent(); Content = new Label { Text = "Greetings, Xamarin.Forms!" }; Device.OnPlatform(iOS: () => { Padding = new Thickness(0, 20, 0, 0); }); }
二、Label 置中
除了將整個畫面位移外這種大工程外,能不能將 Label 置中就解決問題呢?
Xamrin.Forms 提供了多種自動去計算物件在畫面上位置的方法。
View 類別定義了兩個屬性,分別為 HorizontalOptions 和 VerticalOptions,這兩個屬性可以設定物件相對於父項目 ( parent ) 的位置。
通常會使用 LayoutOptions 結構提供的預設值來做設定,總共八種。
- Start
- Center
- End
- Fill
- StartAndExpand
- CenterAndExpand
- EndAndExpand
- FillAndExpand
當然你也可以自行定義 LayoutOptions 的值。這一小段在第四章會有更詳細的解釋,現在你只需要學會如何利用 LayoutOptions 來設定 HorizontalOptions 和 VerticalOptions。
程式碼如下,水平和垂直都設定為 Center 就能將 Label 置中
public Greetings() { InitializeComponent(); Content = new Label { Text = "Greetings, Xamarin.Forms!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; }
文字在 Label 內的排版
常常會需要在 Label 內調整文字的位置,而 Label 也提供了兩個屬性可以設定,HorizontalAlignment 和 VerticalTextAlignment。
用 TextAlignment 提供的預設值來設定,有 Start, Center 和 End 這三個可使用。
程式碼如下
public Greetings() { InitializeComponent(); Content = new Label { Text = "Greetings, Xamarin.Forms!", HorizontalTextAlignment = TextAlignment.Center, VerticalTextAlignment = TextAlignment.Center }; }
最後呈現的結果會和前一小節設定 HorizontalOptions、VerticalOptinos 一樣。
但這兩個技術是完全不同的事情,我們將在下一章節有更詳細的介紹!
但這兩個技術是完全不同的事情,我們將在下一章節有更詳細的介紹!
這教學真的不錯,解說很詳細
回覆刪除希望有幫到想學這套技術的人,但Xamarin.forms更新速度有點太快,第一版有些東西已經淘汰了...
回覆刪除