取得螢幕大小與視覺雲端自動測試

在這個範例專案內，將會說明如何取得當時執行裝置上的螢幕相關資訊，並且透過 Xamarin Test Cloud 服務，實際在不同的手機上運行，進而查看到這個程式在不同手機上，跑起來的實際畫面樣貌。

在這個專案練習中，您將會發現使用 Xamarn.Forms 開發跨平台應用程式的優勢，那就是定義使用者畫面與使用者介面相當的容易，而且在不同的裝置、硬體、螢幕下，可以呈現一致的效果，不會有跑版的問題。

建立客製專屬平台的控制項視覺方案

首先，開啟您的 Visual Studio 2015
接著透過 Visual Studio 2015 功能表，選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
接著，Visual Studio 2015 會顯示 新增專案 對話窗，請在這個對話窗上，進行選擇 Visual C# >Cross-Platform > Blank Xaml App (Xamarin.Forms Portable)
接著，在最下方的 名稱 文字輸入盒處，輸入 XFScreen 這個名稱，最後使用滑鼠右擊右下方的 確定按鈕。
當專案建立到一半，若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統，此時會看到 Xamarin Mac Agent Instructions 對話窗出現，這個對話窗是要提醒您進行與 Mac 電腦連線設定，這是因為，您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作，而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過，這不影響您繼續開發 Xamarin.Forms 的應用程式，只不過此時，您無法編譯與執行 iOS 的應用程式。
接著會看到 新的通用Windows專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
最後，整個新的 Xamarin.Forms 專案就建立完成了。

安裝套件

滑鼠右擊 方案 'XFScreen'，點選 管理方案的 NuGet 套件
點選 瀏覽，在搜尋文字盒內輸入 XLabs.Forms
在右方的專案清單內，勾選 XFScreen, XFScreen.Droid, XFScreen.iOS
最後點選 安裝 按鈕

核心PCL專案

修改 MainPage.xaml

修正 MainPage 頁面

在核心PCL XFScreen 專案，開啟 MainPage.xaml 檔案
請將底下XAML宣告標記覆蓋掉這個檔案所有內容

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XFScreen"
             x:Class="XFScreen.MainPage">

  <ContentPage.Padding>20</ContentPage.Padding>

  <StackLayout
    Orientation="Vertical">
    <Label
      Text="實際像數(Pixel)"
      TextColor="Purple"/>
    <Label
      x:Name="labelPixel"/>

    <Label
      Text="寬與高獨立像數(Xdpi)"
      TextColor="Purple"/>
    <Label
      x:Name="labelDPIPixel"/>

    <Label
      Text="螢幕尺寸(英吋)"
      TextColor="Purple"/>
    <Label
      x:Name="labelInch"/>

    <Label
      Text="縮放值"
      TextColor="Purple"/>
    <Label
      x:Name="labelXDPI"/>

    <Label
      Text="實際對角線尺寸(英吋)"
      TextColor="Purple"/>
    <Label
      x:Name="labelDiagonal"/>

    <BoxView
      HorizontalOptions="Start"
      VerticalOptions="Start"
      WidthRequest="100" HeightRequest="100" Color="Red" />
    <BoxView
      HorizontalOptions="Start"
      VerticalOptions="Start"
      WidthRequest="200" HeightRequest="30" Color="Blue" />
    <BoxView
      HorizontalOptions="Start"
      VerticalOptions="Start"
      WidthRequest="300" HeightRequest="30" Color="Green" />
    <BoxView
      HorizontalOptions="Start"
      VerticalOptions="Start"
      WidthRequest="400" HeightRequest="30" Color="Gray" />

  </StackLayout>

</ContentPage>

在核心PCL XFScreen 專案，開啟 MainPage.xaml.cs 檔案
請將底下C#程式碼覆蓋掉這個檔案所有內容

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using XLabs.Ioc;
using XLabs.Platform.Device;

namespace XFScreen
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            UpdateInfo();
        }

        public void UpdateInfo()
        {
            var device = Resolver.Resolve<IDevice>();
            var display = device.Display;

            labelPixel.Text = $"寬X高 {display.Width} X {display.Height}";

            labelDPIPixel.Text = $"寬X高 {display.Xdpi} X {display.Ydpi}";

            labelInch.Text = $"寬X高 {display.ScreenWidthInches()} X {display.ScreenHeightInches()}";

            labelXDPI.Text = $"寬X高 {display.Scale}";

            labelDiagonal.Text = $"{display.ScreenSizeInches()}";
        }
    }
}

Android 原生專案

修改 MainActivity.cs

修正 MainActivity 檔案

在 XFScreen.Droid 專案，開啟 MainActivity.cs 檔案
請將底下C#程式碼覆蓋掉這個檔案所有內容

MainActivity.cs

using System;

using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using XLabs.Ioc;
using XLabs.Platform.Mvvm;
using XLabs.Forms;
using XLabs.Platform.Device;
using System.IO;
using XLabs.Platform.Services;

namespace XFScreen.Droid
{
    [Activity(Label = "XFScreen", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            var foo = AndroidDevice.CurrentDevice;

            var container = new SimpleContainer();
            container.Register<IDevice>(t => AndroidDevice.CurrentDevice);
            container.Register<IDisplay>(t => t.Resolve<IDevice>().Display);
            container.Register<INetwork>(t => t.Resolve<IDevice>().Network);

            Resolver.SetResolver(container.GetResolver());

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    }
}

UI Test 專案

請在 方案 'XFScreen' 節點，使用滑鼠右擊，接著選擇 加入 > 新增專案
請在 新增專案 對話窗內，點選 Visual C# > Cross-Platform > UI Test App(Xamarin.UITest | Cross-Platform)
最後點選 確定 按鈕

修改 Tests.cs

修正 Tests 檔案

在 UITestScreen 專案，開啟 Tests.cs 檔案
請將底下C#程式碼覆蓋掉這個檔案所有內容

MainActivity.cs

using System;
using System.IO;
using System.Linq;
using NUnit.Framework;
using Xamarin.UITest;
using Xamarin.UITest.Queries;

namespace UITestScreen
{
    [TestFixture(Platform.Android)]
    public class Tests
    {
        IApp app;
        Platform platform;

        public Tests(Platform platform)
        {
            this.platform = platform;
        }

        [SetUp]
        public void BeforeEachTest()
        {
            //app = AppInitializer.StartApp(platform);
            //IApp app = ConfigureApp.Android
            //    .ApkFile("../../../XFScreen.Droid/bin/Debug/XFScreen.Droid-Signed.apk").StartApp();
            app = ConfigureApp.Android
                .ApkFile("../../../XFScreen/XFScreen.Droid/bin/Release/XFScreen.Droid-Signed.apk")
                .EnableLocalScreenshots()
                .StartApp();
        }

        [Test]
        public void AppLaunches()
        {
            //app.Repl();
            app.Screenshot("First screen.");
        }
    }
}

測試前的準備

滑鼠右擊 XFScreen.Droid 專案，選擇 設定為起始專案
確認現在的組態是 Release 模式
滑鼠右擊 XFScreen.Droid 專案，選擇 重建
重建完成後，滑鼠右擊 XFScreen.Droid 專案，選擇 Export Android Packate (.apk)
滑鼠右擊 UITestScreen 專案，選擇 重建

申請 Xamarin UI Test

開啟網頁進入到 Xamarin Test Cloud

https://www.xamarin.com/test-cloud
點選 Start your free trial 按鈕
接著，需要填寫基本資料後，點選 Continue 按鈕
- First Name & Last Name
  
  請分別輸入您的名與姓
- Email
  
  這裡需要填寫公司的 Email
- Password
  
  這裡的密碼需要具有12個以上字元，並且要包含大小英文字母、數字與符號
- +Code & Phone number
  
  請在這裡填寫電話國碼 886 與您的手機號碼
請填寫下圖基本資料，接著按下 Get Started 按鈕
當出現 Email is already signed up. Please login. 請點選 login 連結，準備登入。
在登入前，您應該會收到一封電子郵件確認信，請點選信件內的 Verify my account 連結，當瀏覽器出現了 Your email address has been successfully confirmed 表示您的電子郵件與帳號已經通過驗證了。
在登入頁面 https://testcloud.xamarin.com/login，輸入剛剛註冊的電子郵件信箱與密碼，最後點選Login
當出現 Welcome aboard! 頁面，請點選 Accept Terms Of Use
登入完成後，會出現下圖畫面

使用 Visual Studio 提交測試到 Test Cloud

請在 UITestScreen 專案的 參考 節點上，使用滑鼠右擊，接著點選 加入參考
請在 參考管理員 UITestScreen 對話窗，勾選 XFScreen.Droid 專案，接著點選 確定 按鈕
接著滑鼠右擊 UITestScreen 專案，接著點選 Run in Test Cloud

請記得要切換組態成為 Release
等到出現 XamarinTestCloud對話窗，請點選 確認 按鈕
當瀏覽器出現後，請登入到 Xamarin Test Cloud
接著，點選右上方 Top 20 選項，測試這20個最流行的裝置；接著，點選，Select 20 devices >
在 Before we test your app 頁面下，點選 Done 按鈕
最後出現下圖網頁畫面，請等候在這20手機執行後的結果。
當測試完成後，您會收到測試結果郵件通知，此時，可以進入到 Xamarin Test Cloud 首頁

點選您測試的項目圖示

您將會看到測試結果以及在那些手機測試上有問題
查看這20手機的螢幕截圖，可以看到透過 Xamarin.Forms 設計出的頁面，可以不用考慮不同手機的解析度、尺寸、大小，甚至在手機或平板上，都可以正常地顯示出當初設計結果。

底下摘要不同手機的結果。
- Samsung Galaxy S4
- Samsung Galaxy Centura
- Samsung Galaxy Note 3
- HTC One
- Samsung Galaxy Note
- Samsung Galaxy Tab
- Samsung Galaxy Tab Pro
- Samsung Galaxy Grand Duos
- HTC Desire 610

iOS

iOS 專案屬性設定

當要進行 Xamarin Test Cloud 運作的時候，您的 iOS 專案需要在 Debug > iPhone 組態模式下編譯與連結，因此，您需要進行底下的一些設定。

請使用滑鼠雙擊 XFScreen.iOS 專案內的 Properties 節點
請點選 建置 標籤頁次，在 條件式編譯的符號 欄位之後輸入 ;ENABLE_TEST_CLOUD
點選 iOS IPA Options 標籤頁次，並且勾選 Build ad-hoc/enterprise package (IPA) 檢查盒
點選 iOS Application 標籤頁次，並且在 Application name 與 Identifier 這兩個欄位的值
點選 iOS Bundle Signing 標籤頁次，並且在 iOS Bundle Signing 下方的 Identity 與Provisioning profile 這兩個下拉選單欄位設定適當地值
請確認工具列上的組態與類型，需要設定為 Debug & iPhone，如下圖所示。
使用滑鼠右擊 XFScreen.iOS 專案下的 參考 節點，選擇 管理 NuGet 套件

請在 瀏覽 標籤頁次下，在搜尋文字輸入盒內輸入 Xamarin.TestCloud.Agent 將這個套件安裝起來
打開 XFScreen.iOS 專案下的 AppDelegate.cs，以底下程式碼置換

底下的程式碼加入了這行 Xamarin.Calabash.Start(); 敘述，這是要用來讓這個 iOS 專案檔案，可以順利在 Xamarin Test Cloud 下運行，否則，您會出現這樣的錯誤訊息 xamarin test cloud The .ipa file does not seem to be linked with Calabash framework

using System;
using System.Collections.Generic;
using System.Linq;

using Foundation;
using UIKit;
using XLabs.Platform.Device;
using XLabs.Ioc;
using XLabs.Platform.Services;

namespace XFScreen.iOS
{
    // The UIApplicationDelegate for the application. This class is responsible for launching the 
    // User Interface of the application, as well as listening (and optionally responding) to 
    // application events from iOS.
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        //
        // This method is invoked when the application has loaded and is ready to run. In this 
        // method you should instantiate the window, load the UI into it and then make the window
        // visible.
        //
        // You have 17 seconds to return from this method, or iOS will terminate your application.
        //
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            var foo = AppleDevice.CurrentDevice;

            var container = new SimpleContainer();
            container.Register<IDevice>(t => AppleDevice.CurrentDevice);
            container.Register<IDisplay>(t => t.Resolve<IDevice>().Display);
            container.Register<INetwork>(t => t.Resolve<IDevice>().Network);

            Resolver.SetResolver(container.GetResolver());

#if ENABLE_TEST_CLOUD
Xamarin.Calabash.Start();
#endif

            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

使用滑鼠右擊 XFScreen.iOS 專案節點，選擇 重建
當重建完成之後，使用滑鼠右擊 XFScreen.iOS 專案節點，選擇 在檔案總管開啟資料夾
請切換到 bin\iPhone\Debug 目錄下，這時應該會看見如下圖的紅色框線的目錄
- 請將該目錄下的 XFScreeniOS.ipa 檔案複製到 bin\iPhone\Debug 目錄下
- 接著請將 bin\iPhone\Debug 目錄下的檔案 XFScreeniOS.ipa 改名為 XFScreeniOS-1.0.ipa

新的測試專案

要了要說明方便，另外產生一個提供給 iOS用的 UI 測試專案

請在 UITestScreen 專案的 參考 節點上，使用滑鼠右擊，接著點選 加入參考
請在 參考管理員 UITestScreen 對話窗，勾選 XFScreen.iOS 專案，接著點選 確定 按鈕
接著滑鼠右擊 UITestScreen 專案，接著點選 Run in Test Cloud

請記得要切換組態成為 Debug > iPhone
等到出現 XamarinTestCloud對話窗，請點選 確認 按鈕

您可以觀察 輸出 視窗，看到 Visual Studio 正在將相關檔案上傳到 Xamarin Test Cloud 上
當瀏覽器出現後，請登入到 Xamarin Test Cloud
接著，點選右上方 Top 20 選項，測試這20個最流行的裝置；接著，點選，Select 20 devices >
在 Before we test your app 頁面下，點選 Done 按鈕
最後出現下圖網頁畫面，請等候在這20手機執行後的結果。
當測試完成後，您會收到測試結果郵件通知，此時，可以進入到 Xamarin Test Cloud 首頁

點選您測試的項目圖示

您將會看到測試結果以及在那些手機測試上有問題
查看這20手機的螢幕截圖，可以看到透過 Xamarin.Forms 設計出的頁面，可以不用考慮不同手機的解析度、尺寸、大小，甚至在手機或平板上，都可以正常地顯示出當初設計結果。

底下摘要不同手機的結果。
- Apple iPhone 6
- Apple iPhone 6 Plus
- Apple iPhone 5C
- Apple iPhone 5S
- Apple iPhone 5
- Apple iPhone 4S
- Apple iPad Air