取得螢幕大小與視覺雲端自動測試
在這個範例專案內，將會說明如何取得當時執行裝置上的螢幕相關資訊，並且透過 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
- 點選
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
