2017/1/14

Xamarin.Forms 教學系列文(二.壹)介面架構 & Hello World!


學習目標
  • 了解 Xamairn visual elements 
  • 執行自己新增的 XAML 檔
  • 了解 C# 如何初始化屬性

介面(interface),在各個平台 (ios, android, wp) 有不同的的物件與稱呼,例如 controls, elements, views, widgets,都是為了拿來與使用者互動或是顯示資料。

這些介面 (interface) 的物件在 Xamarin,統稱為 visual elements,最主要有三種類別:
  • page
  • layout
  • view

page

page 是佔滿手機畫面的 visual elements,一個 App 內可以包含一個多個 page,page 的種類也很多種。

而在系列教學文前期,你只會看到一種,ContentPage。

其他種類 page 有興趣可以到官方網站看看。
https://developer.xamarin.com/guides/xamarin-forms/controls/Pages/

Layout


在 Xamarin,都是使用巢狀(parent-child)架構來編寫 visual elements。

所以能在 ContentPage 增加許多子項目,通常會放置 Layout 來編排畫面上的元件和位置。

Layout 內也可以巢狀放置其他 Layout 或是 View 元件。

同樣的,Layout 有許多種類,可以在官網看看。
https://developer.xamarin.com/guides/xamarin-forms/controls/layouts/

View

View 在 Xamarin.Forms 代表的是互動或是展示資料的物件,例如 text, bitmaps, buttons, text-entry, sliders, switches, progress bars, date 和 time pickers 等,在這篇教學會先帶著你使用 Label !
https://developer.xamarin.com/guides/xamarin-forms/controls/views/

Hello World !

首先開啟 Visual Studio 並建立一個新的 Xamarin.Forms 專案,專案名稱叫做 Hello。

安裝 Visual Studio 與建立新專案可以參考此篇教學
http://www.loganedge.tw/2017/01/xamarinforms-visual-studio-2015-android.html
若開啟新專案後成功執行可以看到以下畫面。



接著來更深入探討程式,
在 Hello 專案底下會看到這支程式,App.xaml。

將 App.xaml 階層打開可以看到 App.xaml.cs,改寫成以下程式碼後執行。

        public static App()
        {
            InitializeComponent(); 
            
            // The root page of your application
            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,

                    Children = {
                        new Label {
                            HorizontalTextAlignment = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!"
                        }
                    }
                }
            };
        }


這一段程式就能觀察到 Xamarin viewsual element 都是巢狀式的,ContentPage 包著 StackLayout,StackLayout 擁有一個 Label 子項目。

前期的教學都會先以編寫.cs 為主,直到第七章才會正式教 XAML。
跟原版電子書不同的是,本部落格系列教學文一律統一使用 XAML 專案。


Label for text

在同一專案內,右鍵 → 加入 → 新增項目,新增一個 Forms Xaml Page,名為 Greetings。



改寫 Greetings.xaml.cs,如下程式碼,
在 Greetings 內宣告一個 Label 並設定 Text 的值,再指派給 Contnet。

       public Greetings()
        {
            //初始化 XAML
            InitializeComponent();

            Label label = new Label();
            label.Text = "Greetings, Xamarin.Forms!";
            this.Content = label;
        }


當然不要忘記把 App.xaml.cs 內的 MainPage 指派為 Greentings 類別。

        public App()
        {
            InitializeComponent();

            MainPage = new Greetings();
        }


按下執行後就能看到成果了。


物件初始化

最後要特別講一下在 C# 3.0 之後支援於物件宣告時,同時初始化屬性的值。

所以上面的程式碼可以在 Label 宣告時用大括號改寫如下:

        public Greetings()
        {
            //初始化 XAML
            InitializeComponent();

            Label label = new Label
            {
                Text = "Greetings, Xamarin.Forms!"
            };

            this.Content = label;
        } 


當然,ContentPage 也能初始化其屬性,再改寫成把 new Label 指派給 Content 屬性。
        public Greetings()
        {
            //初始化 XAML
            InitializeComponent();

            Content = new Label
            {
                Text = "Greetings, Xamarin.Forms!"
            };
        }

結果如下圖:


這張圖會發現一件事情,Lable 若沒有設定其初始位置,iPhone 的畫面會從最頂端開始,和電源同一排...

這樣頗尷尬的...


Label 的字會和頂端資訊重疊...

當然 Xamarin.Forms 有提供解決方法,將於下一小節介紹給大家。




沒有留言:

張貼留言