Xamarin.Forms 教學系列文（二.貳）畫面位移 & 物件置中

學習目標

• 畫面位移 - Padding 
• 針對不同平台處理位移 - OnPlatform
• 利用 LayoutOptions.Center 置中 Label

iPhone 畫面的生成是從最上方電池資訊那排開始，若 App 頂端有文字，會和手機本身的資訊重疊。

有鑑於上一篇教學最後的範例程式出現的問題，本篇教學提供了兩種解決方法。

一、畫面位移

OnPlatform 寫法已更新，請查看此篇 教學

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 的類別可以取得目前裝置的資訊，如：

• 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 的位移，其他兩種平台不動。

            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 一樣。

但這兩個技術是完全不同的事情，我們將在下一章節有更詳細的介紹!