0条留言

标题图像以绿色控制台样式显示1和0。

运行测试 Xamarin 测试云 (XTC)就像右键单击测试并选择在XTC中运行一样容易。这种方法既简单又容易,但在出现更复杂的需求时就变得有限。这些可能正在运行一组测试,在预配置的设备组上运行,或者集成到自动化的持续集成(CI)和持续部署(CD)流程中。但是,还有一些其他有用的功能和信息,我们将在此博客文章的后续文章中看到。

因此,重点将放在以下方面:

  • 创建并运行基本命令
  • 设置类别并在命令中使用它们
  • 记录您的Android XTC测试运行
  • 使用XTC API检索更多信息

所以开始吧 Smile 

基本命令

获取测试脚本的最简单方法是登录Xamarin Test Cloud仪表板 网站 。单击“新建测试运行”,现在您可以选择一个现有应用程序,也可以选择创建一个新的应用程序,选择一个团队,应包含在测试运行中的设备以及一些其他信息,例如系列,设备区域设置和并行化。在最后一步中,将生成一个示例脚本,该脚本是从命令行运行测试的基本方法。

现在必须在各个地方采用此脚本来反映被测应用程序的设置,但是从那里开始只需导航到根目录即可。解决方案文件夹,然后从命令行,Power Shell或您选择的Shell中执行脚本。测试将被上传并在所选设备上运行。测试完成后,可以在XTC仪表板中查看结果。

运行您的测试套件的特定类别

XTC允许在声明测试时设置类别,如下所示:

类别允许选择在XTC上执行测试时要运行的测试的子集。这是创建快速运行的烟雾测试的好方法,该烟雾测试可在构建后立即提供反馈,或在应用程序的某个区域上运行重点测试。可以通过添加以下参数来扩展命令:

如果适用,可以为一次运行选择多个类别,这样可以轻松进行混合和匹配。所以使用例如类别 烟雾测试 采购 将是以下命令:

现在,让我们对测试有更多的了解,当测试失败时尤其有趣……

记录您的测试运行

更好地了解测试运行过程中发生的情况的基本选项是截屏。可以通过将以下行添加到测试中来完成此操作,如下所示:

请注意,截取屏幕截图可能会增加测试运行的持续时间,如果使用大型套件,则可能希望通过在UI测试项目中使用一个常数来减少总时间,该常数启用/禁用测试运行的详细报告。

现在,屏幕截图已经非常有用。但是在Android的情况下,您可以记录测试运行。那太棒了!!启用录制就像在命令行中添加一个附加参数一样简单:

可以在测试仪表板上查看录制内容,它具有非常有用的功能,可以加快播放速度,因此您不会因观看测试如何进行而感到无聊,因为它会变得多汁。截至撰写本文之日,录音仅适用于Android,并且可以通过将参数添加到命令行界面(CLI)来单独启用。如果您尝试在iOS运行时使用该命令,则不会有任何例外,但只会丢失记录。

另外,不要忘记在断言中添加良好的失败消息。否则,您会因为测试失败而留下原因,因为期望值是假的而不是真的(对我没有帮助……)。

访问XTC API

通过命令行调用测试是一种将XTC上运行的UI测试集成到自动DevOps构建管道的好方法。默认情况下,在命令中添加以下参数将允许接收NUnit测试报告,它会给出运行的非常高级的报告,即显示哪些测试失败,而不是在哪个设备等上。如果您希望拥有更丰富的报告与数据进行交互,您就可以开始与 Xamarin 测试云API。使用API​​时,您可以获取大量有关测试运行的信息。不幸的是,当前无法检索图像,记录和其他信息。如果您有兴趣让团队主动检索此信息,则可以在此处对该功能进行投票。

总而言之,如果您使用内部或其他第三方仪表板来显示测试结果,请确保签出API,因为它可能只是提供您正在寻找的更详细的信息,而在NUnit测试中找不到-报告。

结论

从命令行启动Xamarin Test Cloud的测试运行,不仅使您可以将其集成到DevOps工具链中,而且还允许您运行测试的子集或记录Android的测试运行。最后但并非最不重要的一点是,如果您有兴趣将测试结果输入仪表板,那么Xamarin测试云API可能只是为您提供所需的信息。

命令行选项不仅对于集成到自动化工具链中很有价值,而且对于在本地执行测试时进行更精细的控制也很有价值。无论是Windows还是OSX,Xamarin Test Cloud工具链都可以满足您的要求。

0条留言

 Xamarin 测试云徽标

自动测试应用程序不仅可以节省大量时间,而且还可以确保快速发现引入系统的错误。这将导致更短的时间来修复这些错误,因为更改内容的记忆仍在开发人员的脑海中,因此总体上更短的时间意味着更少的资金用于查找错误,并有更多的时间来实现下一个多汁功能。开发Xamarin应用程序时,可以选择在设备/模拟器上运行单元测试和集成测试,以了解逻辑在现实世界中的行为方式和性能。但是使用Xamarin Test Cloud,我们可以更进一步并测试UI,即自动测试应用程序的整个堆栈。如果您对本主题的一般介绍感兴趣,建议您阅读此内容 发布 在深入探讨有关线路的技术细节之前。

要编写Xamarin测试云(XTC),请测试 Xamarin 工具链 必须安装。这篇文章是使用Visual Studio 2015 Update 2编写的。

看看应用程序

由于本文着重于编写UI测试,因此该应用程序相当简单,但将显示编写可维护的UI测试所需的基本步骤。被测试的应用程序是一个基本应用程序,具有一个输入字段,一个按钮和一个显示输入字段输入的按钮。该应用程序基于MVVM模式(使用 MVVM灯 ),并且基于Xamarin.Forms。

将要测试的应用的屏幕截图。

当用户输入一条消息并提交时,该消息将显示在下面的标签中。现在已经定义了基本轮廓,让我们看一下如何为应用程序实现UI测试。

编写UI测试

如果您从一开始就使用UI测试创建了Xamarin.Android和iOS项目,则可以跳过后续步骤,而只是开始编写测试。否则,请通过一些简单的步骤就可以立即开始编写这些UI测试。

建立

要开始编写UI测试,我们首先必须将UI测试项目添加到现有项目中。只需选择UI测试项目,即可在解决方案中创建该项目。剩下要做的就是将我们要测试的项目与测试项目相关联。右键单击“引用”,选择要测试的Android和/或iOS项目,然后简单地添加它们:

将iOS和Android应用程序项目添加到UITestProject

如果您从Visual Studio中获取默认的UI测试项目,则可能需要检查是否具有Xamarin Test Cloud的最新版本。将XTC更新为1.1.0或更高版本,否则在执行要求API密钥的测试时会出现错误。

从Xamarin Test Cloud 1.1.0或更高版本开始,您不再需要Xamarin Test Cloud的订阅就可以在本地执行测试。

的iOS 和XTC

要在iOS上运行UI测试,应用程序中需要包含一个额外的库-仅调试版本,不会将其部署到商店中。添加 Xamarin 测试云代理 打包到您的iOS项目中,然后编辑“应用程序委托”以显示以下内容:

接下来,打开您的iOS项目的属性,并确保在 建立 选项卡定义符号:ENABLE_TEST_CLOUD

iOSProjectConfiguration

现在,只能为调试版本设置此符号。尝试提交包含葫芦包的应用程序时,尝试将其提交到商店时会被拒绝。

编写测试

足够的闲聊,让我们已经开始编写那些测试。在UI测试项目中 Tests.cs 类文件包含测试的基本设置。让我们将AppLaunches方法更改为此:

现在,当我们开始针对Android进行测试时,将启动该应用,然后将打开“读取评估打印循环(Repl)”控制台。使用Repl时最常用的命令之一是 现在,如果我们执行命令,将输出以下输出:

当UI未设置ID时,显示XTC Repl树命令。

现在我们可以识别一些控件,但是如果我们只可以识别Ids上的元素,那就更好了。因此,让我们这样做。首先,向所有控件添加AutomationId:

接下来,我们将不得不在iOS项目的AppDelegate.cs中添加几行代码:

以及Android项目的MainActivity.cs:

如果我们再次运行测试并执行命令 现在,我们将看到以下输出:

XTC Repl执行树命令后显示ID

与Ids一起工作被认为是最佳做法。例如,如果要求该应用程序以多种语言提供,则将设备设置为其他区域设置时,UI测试将可用,并且可用于获取屏幕截图

在Repl中,我们现在可以键入以下命令,这些命令将在Entry控件中写入文本,然后提交消息并读出显示最后提交的消息的标签的文本值:

重复输入的命令。

可以使用copy Repl命令将所有已执行的命令复制到剪贴板(tree命令将从复制中删除)。我们可以创建一个新的测试方法,并简单地粘贴从Repl复制的命令。为文本输入添加声明,然后,我们创建了第一个基本的UI测试。 Smile

现在,该测试已添加了一些其他行,以捕获该应用程序的屏幕截图。如果在运行过​​程中未观察到测试,则这些屏幕截图可能具有很大的价值。而且由于自动化就是要让人们腾出更多精力来执行其他任务,因此您应该使测试在完成所有有意义的步骤之后进行截屏。

请注意,截取屏幕快照确实会稍微增加测试的运行时间,因此您可能需要启用一个全局常量,该常量可以轻松启用(即禁用屏幕快照)。

此外,在Xamarin测试云上运行测试时,该屏幕快照将使您获得有关每个步骤的更多信息,例如CPU&截屏时的RAM使用情况。因此,在截取屏幕截图时,它还使您可以对应用程序进行更多遥测。传递给该方法的字符串也将在测试中显示。

执行测试

创建测试后,我们可以在Android或iOS上运行它。默认情况下,IDE设置用于执行测试,因此可以选择其他仿真器,例如在Visual Studio中,您可以选择不同的Android模拟器来执行测试。如果将某个设备挂接到计算机,甚至可以在该设备上执行测试。同样,所有这些都不需要许可证。这些测试基于NUnit,因此只要安装了NUnit Testrunner,这些测试就应该简单地执行。

在后台显示该应用的测试运行结果。重新共享工具NUnit Testrunner用于执行测试运行。

在撰写本文时,iOS只能在Mac上执行。

关于测试执行时间的小注释。由于必须先部署应用程序然后在设备上执行该事实,因此测试需要花费几秒钟的时间才能完成。如果我们考虑一个集成测试执行相同的任务,我们的运行时间会短得多,但是将无法查看该信息是否正确地显示在用户的屏幕上。请记住,一般而言,UI测试要花费更长的时间才能执行集成测试所需的相同测试,因此值得事先选择要执行的测试。

在云端运行

如前所述,可以在本地执行测试。这甚至可以集成到自动化构建过程中。但是在本地执行测试时有一些限制。例如,如果我们决定连接设备,则必须维护该设备。听说过肿的电池,断线等吗?好吧,那些事情可能会/将会发生,而且不可能在本地开箱即用地并行进行测试。另一个方面是轻松地将设备添加到测试集中,这就是在上面运行测试的强大优势。 Xamarin 测试云。在Xamarin测试云上运行测试可以轻松地集成到构建服务器中,并且可以轻松地在多个设备上(并行)运行该应用程序,甚至可以并行执行同一类型的多个设备上的测试。因此,简而言之,Xamarin Test Cloud提供了具有不同OS版本的大量设备,这些设备无需维护,并且可以轻松配置和更改测试期间要使用的设备。结果显示在仪表板上:

屏幕截图显示了测试运行的XTC结果的仪表板。

甚至还有一个API,可以控制执行并收集测试运行的结果。

当前,尚有一些细节缺少可用于提取的信息。例如在测试运行期间拍摄的快照。如果您希望团队添加此功能或其他功能,请随时对其进行评分或告诉他们 这里 .

结论

在此博客文章中,我们看到了如何创建基于Xamarin测试云的UI测试。如何调整Xamarin.Forms的UI,以使UI测试的编写更可靠。此外,我们看到了如何配置测试以捕获测试运行期间执行的步骤的屏幕截图。捕获测试运行的屏幕截图不仅可以更轻松地查看发生功能错误的位置,还可以查看屏幕如何查找给定的设备以及布局是否符合预期。

您可以在以下位置找到示例项目和测试代码 的GitHub .

高温超导

进一步阅读

的iOS 入门。

0条留言

博客标题图像,显示ios徽标和带有橡皮图章效果的Beta测试。

在开发最新最好的(Xamarin)iOS应用程序时,将有一段时间准备将应用程序交付给用户进行一些Beta测试。这使您可以在将其运送到官方商店之前获得一些反馈。首先需要使用的应用程序包也以文件结尾 IPA 。如果您使用的是Xamarin.iOS,则可以找到有关构建IPA和设置证书的更多详细信息。 这里 。假设您已经准备好分发IPA,则在互联网上找到的最常见的说明是使用iTunes来侧面加载应用程序。现在这有点间接了,因为用户必须坐在笔记本电脑前才能允许他安装应用程序。如果公司采用具有IT策略的笔记本电脑,则最终可能会变得相当复杂。但是有一种更简单的方法,您可以发送链接,用户可以在iOS设备上选择该链接,该链接会将应用程序直接安装到设备上。

为了使用户能够使用该应用,必须正确配置证书。如果不是,则用户将能够安装该应用程序但无法启动它,这可以通过在启动屏幕后立即关闭或灰色应用程序图标来显示。

通过链接共享您的应用

现在,由于可以轻松地简单地将链接发送到文件共享,从而允许您安装应用程序,因此我们跳过了另一个步骤来遵守Apple的“流程”。我们需要向用户发送指向plist文件的链接,该文件包括指向实际应用程序的链接,即IPA文件:

现在,让我们逐步进行以下操作:

  1. 将IPA上载到您选择的文件共享中,并获取IPA的公共URL
  2. 编辑上面的plist模板以匹配您的应用程序的要求(注意注释)
  3. 将plist文件上传到Fileshare并获得公共URL到plist-File
  4. 将plist-File的链接发送给您想要安装该应用程序的任何人

由于我第一次遇到困惑的表情时,我向同事解释了此问题,看到了波纹管,然后将指向plist文件的链接视为指针的指针 眨眼的微笑:

在Beta用户点击指向plist文件的链接(位于文件共享上)时显示图像。 plist本身包含指向ipa文件的链接,该文件将安装在用户设备上。

这是与测试人员共享应用程序的超级简单方法。然后,必须针对软件的每次更新再次执行这些步骤,并且此方法不包含用户监视。因此,您看不到应用程序是否崩溃,也无法知道用户是否已经安装了最新版本的应用程序。或者只是在用户使用应用程序时通知用户有更新。现在,所有这些都可以包含在应用程序中,但是这样做需要付出很大的努力,然后我们再次谈论仅在beta测试期间使用的代码。因此,如果您要开发使用寿命更长或包含多个Beta版本的大型应用,则可能需要考虑第三方服务,例如 曲棍球应用 .

结论

设置您自己或您的公司为运行iOS的Beta测试就像共享文件的链接一样容易(对于发布者来说有些负担)。无需其他帐户或第三方服务。您甚至可以从NAS共享此东西。话虽如此,我建议您检查Hockey App,因为它们确实提供了免费的 免费提供两个应用 (在撰写本文时)以及将其添加到您的应用程序的过程是几行代码和一个NuGet包。

高温超导

0条留言

testcloud_devices

开发应用程式时最初引起人们关注的iOS,Android和Windows 10移动应用程序或网络应用程序是一个核心理念,可为用户带来核心价值。一旦范围广为人知,理想情况下,一个人就可以开始开发最小可行产品,该产品展示了核心思想,让创作者从潜在用户那里得到第一笔反馈。通过最初的想法和反馈,团队开始为应用程序添加越来越多的功能,一切都很好。直到用户开始报告某些奇怪的行为,并且精心设计的更改开始对其他功能产生副作用。因此,每个版本都必须经过全面测试,然后才能发送出去。检查所有功能所花费的时间开始增加,但是如果不进行所有测试,可能会导致新错误潜入应用程序。那么该怎么办?

带上仙尘-自动化UI测试

这通常是一个人例如一个非技术经理会听到有关UI测试框架的信息,该框架恰好解决了手动测试自动化的问题。另外,关于UI测试框架的一件大事通常是应用程序不需要任何更改。由于一个测试针对整个堆栈,因此测试的覆盖率非常高。

自动化的UI测试可以在应用程序的UI层上模拟用户交互。根据哪种应用程序,可以选择不同的框架。对于iOS和Android上的移动应用程序,我们将研究的解决方案是Xamarin Test Cloud(XTC),它基于Calabash测试框架。 XTC允许创建可在各种平台上使用的UI测试。它们可以在本地运行,即阅读“连接到测试仪计算机的电话”。不过,更有趣的是,有机会在Xamarins Test Cloud中运行相同的测试,它提供了数百种可以在其上运行应用程序和测试的设备(具有不同的OS版本)。

但是生活中有这么多东西-UI测试是有代价的。与单元测试或集成测试相比,它们相当慢,并且像集成测试一样,它们在易碎性方面往往更多。即,由于应用程序的更改而导致测试失败。如果UI仍需进行大量更改,则尤其如此。话虽这么说,它们可以成为减少手动测试时间的好工具。但是仅依靠UI测试进行移动测试很可能不会获得您期望的结果。那么,自动化的UI测试将为您带来最大收益的优点是什么?

好吧,让我们开始考虑在考虑移动应用程序时可以实际实施的测试:

TestDistribution

如图所示,金字塔越宽,您可能希望在项目中进行的测试越多。因此,让我们深入探讨不同领域的主要好处,并研究如何实现这些好处。

单元测试

测试单元的基本逻辑是单元测试的作用。单元测试不应依赖于类可能具有的任何依赖关系,因此需要存根和模拟来评估业务逻辑的正确工作。单元测试应始终通过且不会出错,因为它们会检查应用程序的基本逻辑实现。

UI测试应始终通过,即为绿色,因为它们仅测试逻辑而没有任何依赖性。

进一步的单元测试很快。实际上,如果单元测试的运行时间超过100毫秒,则认为它很慢。对于大型项目,进行大量此类测试以检查所有小型构件是否均按照规范/用户情况工作并不罕见。解决依赖关系所需的额外工作可能会导致应用程序某些部分(主要是协调工作流)的工作繁琐。此外,由于它们仅隔离测试逻辑,因此单元测试不会给出组件如何协同工作的任何反馈。但是,当所有单元测试都是绿色的时,对a逻辑的信心就很高,可以将重点放在寻找问题上,而将注意力转移到构建测试相互作用的构建块之间。

单元测试的特征

测试什么逻辑块,单个类,部分类
执行时间/测试< 100 ms
可靠性 很高
对建筑的影响

整合测试

当多个零件时想要测试的应用程序类通常是集成测试。集成测试的范围从测试紧密协作的几个类到需要系统的多个部分正常运行的系统测试。对于不属于已开发应用程序的外部服务,可以使用存根和模拟来确保测试不会因团队范围之外的服务失败而失败。集成测试通常需要花费更多时间才能运行,因为它们可以运行现实生活中的场景。由于部件和子系统的数量不同,集成测试可能要比单元测试更脆弱。此外,将错误定位到项目的特定区域会变得更加困难,因此单元测试是集成测试的完美完成,因为它们允许单独测试复杂的逻辑部分。如果我们查看根据MVVM模式构建的标准应用程序,则集成测试通常从视图模型或堆栈中的较低模型运​​行。集成测试不仅可以测试应用程序的功能正确性,还可以让您了解应用程序的性能。如果您有兴趣在实际设备上运行测试,则可以阅读有关此主题的更多信息。 这里 .

集成测试的一个问题是未对View进行测试。即使可能会争辩到正确应用MVVM模式时,视图中只剩下最小的逻辑,但用户仍将通过视图使用该应用程序。这样就可以避免在通过视图操作应用程序时仍然存在问题。此处(自动)UI测试起作用。

一般来说,如果一个项目根本没有自动化测试,那么集成测试往往会带来更大的收益。由于体系结构要求不完全相同。

集成测试的特征

测试什么组件之间的交互,与其他系统部件的集成,网络通信,长时间运行的测试,内存消耗
执行时间/测试秒到几小时
可靠性 中等偏上
对建筑的影响

UI测试– Xamarin 测试云

现在,当拥有复杂的单元测试和集成测试套件时,最好避免完全测试您的应用程序,但是最终用户将通过UI与应用程序进行交互。通常来说,当应用程序由于与应用程序中使用的UI元素不兼容而在其设备上崩溃时,他们并不关心下面的逻辑是否合理。因此,每个应用程序项目应执行的最低UI测试是手动测试。一个人点击该应用程序,并确保UI能够按预期响应并遵循预期的工作流程。现在,如前所述,手动测试需要大量时间和资源来执行测试,即一个人可能会感到有点不知所措。因此,一般而言,我们在哪里可以利用自动UI测试来提高测试覆盖率:

  • 烟雾测试
  • 工作流程
  • 测试互动
  • 元素的存在
  • 本土化
  • 多设备测试

可能会很想考虑一个人可以完全消除手动测试,但是UI测试在某些方面只是无法自动覆盖而始终需要人工:

  • 布局(元素无法正确呈现)
  • 系统交互
    • 相机
    • 相片集
    • 分享中
  • 用户界面“ Snappiness”
  • 探索性测试
  • 离线测试
  • 蓝牙

即使该布局可以通过自动测试进行覆盖,但它所拍摄的图片都可以由用户/ MD5哈希进行比较。计算机(至少在撰写本文时)没有能力分析应用布局的正确性。因此,进行某些测试仍然需要人的眼睛和大脑,这是所有事物自动化时要记住的事情。其他限制来自设置,例如必须有与手机的WiFi连接才能运行自动UI测试。在测试与其他设备(即专有硬件或显然必须配对的其他电话)的互连性时,UI测试通常变得非常麻烦,并且XTC通常不支持此类情况。因此,是的,UI测试存在局限性,但是正确使用它们不仅会极大地提高自动化测试的覆盖范围,而且还可以节省宝贵的测试时间,然后将其用于将人的大脑用于更高级的测试任务,然后麻木地通过应用程序进行点击。

UI测试的特征

测试什么测试整个应用程序软件堆栈,冒烟测试,工作流测试
执行时间/测试 分钟
可靠性 中–低
对建筑的影响

结论

有多种方法可以实现对移动应用程序的自动化测试。一方面,有一些测试可以验证构建应用程序的单个构建块的逻辑。集成测试可以验证应用程序各部分之间的正确互通,这可以扩展到应用程序的边界,并且还包括对后端的调用以验证正确的集成。可用于移动应用程序的最高级别的测试是自动UI测试。 Xamarin 测试云允许创建可以在数百个设备上执行的UI测试。在应用发布之前在如此多的设备上测试应用可以带来有价值的见解,并且这些测试的自动化使您不仅可以轻松地在逻辑和集成层上而且还可以在UI上执行回归测试。考虑一下即将发布的操作系统版本,并且您想检查您的应用程序是否存在任何问题,考虑到自动UI测试,您可以轻松地运行测试套件,该套件会迅速通知您是否对即将发布的更新有任何疑问。

0条留言

 超人  Apps平台概述

借助UWP应用,编写一个可以在所有Windows 10设备上本机运行的应用程序变得更加容易,无论它是手机,平板电脑,PC,Xbox等。等现在,我们不仅希望我们的应用程序能够在我们希望它们在运行时发光的设备上运行。在此博客文章中,我们将介绍有关如何在UWP应用程序中采用不同屏幕尺寸的基础知识。

 

设备和屏幕尺寸

超人 在许多不同的平台上运行,默认情况下甚至可能没有屏幕。物联网(IoT)设备或其他需要唯一UI的设备,例如 全息镜头 将于今年晚些时候提供给一些幸运的开发人员。现在,尽管这些平台在某些情况下非常有趣,但很可能将为手机,平板电脑和平板手机(又名BAPH)(大型a **手机)等移动设备开发各种各样的应用程序。与Android和iOS应用程序相比,UWP的独特之处在于,您的应用程序不仅可以在移动设备上运行,而且还可以在台式机,笔记本电脑甚至更大的屏幕(例如新的屏幕)上运行 表面集线器 .

  视窗  10 设备
现在编写一次就可以在任何地方运行,看起来很容易废话。但是创建UWP应用的最大好处是您可以采用不同的屏幕尺寸,甚至可以采用不同的用户输入,例如触摸与鼠标和键盘。但是在深入探讨如何使用XAML编写响应式UI的细节之前,让我们先看一些基本的布局规则。

设备和屏幕尺寸

可以按如下方式对设备进行大致拆分。

类别 屏幕尺寸 有效像素宽度 输入项
电话 4”至6” 340+触摸& Voice
平板 6+”至7” 720+触摸& Voice
片剂 7英寸至13.3英寸 1024+音调,触控笔,外接键盘*,鼠标*,语音*
个人电脑和笔记本电脑13英寸及以上1024+鼠标,键盘,触摸*,游戏手柄
Surface集线器设备 55”和84” 1024+触摸,笔,语音,键盘,远程触摸板

*: 偶尔

基本布局指南

由于UWP应用是从头开始构建的,可以在各种不同的设备(即外形尺寸)上运行,因此该平台附带了许多帮助程序,可以简化多个平台的设计工作。一个基本概念是有效像素。有效像素与实际物理像素有所不同,因此手机上的24个有效像素将在更大的屏幕上放大为更大的物理外观。有效像素到物理像素的缩放全部由框架完成,并且开发人员(即设计人员)不需要任何特殊的出席。

该图显示了设备上附加的不同比例因子。

注意:通常小屏幕的每英寸点数非常大( DPI ),这也由平台处理,因此即使您在显示价格便宜(即DPI较低)的小型设备上运行,文本仍将像在具有更多像素(例如DPI较高)的高端显示器上一样清晰可读。

缩放比例基于四(4)的倍数,因此在定义布局时,请确保它们是四的倍数,例如16.这将确保缩放不会导致奇怪的影响。当使用图标而不是图像时,请尝试使用字体(例如,新的 Segoe MDL2资产),提供您要查找的图标(或足够接近)。尽管Windows 10确实提供了一种根据屏幕大小在图像的不同分辨率之间进行选择的机制,但是字体将始终能够按比例缩放,而无需任何进一步的努力。

实施自适应布局以适应可用的屏幕空间

当使用不同的分辨率时,可以执行多种布局调整,以改善常规的用户体验(UX)和–交互。 超人 提供了多种根据可用屏幕空间调整应用程序布局的方法。

  1. 根据尺寸和可用屏幕空间更改页面上元素的布局
  2. 回流焊屏幕尺寸增加时添加文本列
  3. 显示信息/功能,具体取决于设备及其分辨率
  4. 用弹出菜单替换导航栏之类的元素,以容纳较小的屏幕空间
  5. 更改屏幕流,例如主要详细信息站点

因此,让我们深入研究如何根据屏幕空间更改UI元素的布局。

响应式布局

ResponsiveDesign

超人 应用程序的一项新功能是可以根据可用的屏幕尺寸(即应用程序窗口的有效像素宽度)调整控件的布局。这使UI可以适应不同的屏幕尺寸,例如手机和平板电脑,还可以让UI适应Window在桌面上的大小。

假设您的应用程序具有以下屏幕流程和布局:

显示运行的有效像素少于720个的应用。

该应用程序的基本布局如下所示:

<RelativePanel>
    <Rectangle  x:名称 ="Image" Width="80" Height="80" Fill="Gray" Margin="8"></Rectangle>
    <Rectangle  x:名称 ="TextLine1" Height="16" Width="200" Fill="Gray" 相对面板.RightOf="Image" 相对面板.Below="" Margin="8,8,8,4"/>
    <Rectangle  x:名称 ="TextLine2" Height="16" Width="200" Fill="Gray" 相对面板.RightOf="Image" 相对面板.Below="TextLine1" 相对面板.AlignLeftWith="TextLine1" Margin="8,8,8,4"/>
    <Rectangle  x:名称 ="TextLine3" Height="16" Width="168" Fill="Gray" 相对面板.RightOf="Image" 相对面板.Below="TextLine2" 相对面板.AlignLeftWith="TextLine1" Margin="8,8,32,4"></Rectangle>
</RelativePanel>

注意: 将项目呈现在 相对面板 允许矩形内的元素彼此相对对齐。这是Windows 10 超人 应用程序中提供的一项新的布局功能,以前必须使用 要么 StackPanel 。使用相对布局的好处是,当我们专注于如何针对不同的屏幕(大小)重新调整内容时。

例如,当在平板电脑上显示时,您可能不仅希望在文本旁边显示小图像,而且还会带有横幅。用一个 VisualStateManager可以轻松定义最小窗口宽度和 如果触发触发器,则采用预定义布局的布局:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState  x:名称 ="wideView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="Image.(Width)" Value="720"/>
                <Setter Target="TextLine1.(Width)" Value="720"/>
                <Setter Target="TextLine2.(Width)" Value="720"/>
                <Setter Target="TextLine3.(Width)" Value="600"/>
                <Setter Target="TextLine1.(RelativePanel.Below)" Value="Image"/>
                <Setter Target="TextLine1.(RelativePanel.AlignLeftWith)" Value="Image"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState  x:名称 ="narrowView">
            <VisualState.Setters>
                <!-- Adjust view for narrow view -->
            </VisualState.Setters>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

目标名称与 x:名称 给控件。现在,如果应用的有效像素超过720个,页面将重新呈现:

显示运行的有效像素超过720的应用。

在Windows 10台式机上调整窗口大小时,页面也会进行调整,这使用户可以一次打开多个应用程序,使它们无缝适应新的窗口大小。

结论

在这篇文章中,我们看到通用Windows平台应用程序不仅可以在多个设备上运行,而且该平台为开发人员和设计人员提供了创建出色的用户体验的必要工具,无论屏幕大小和分辨率如何,都无需创建多个页面布局。地面,必须以某种方式弄清楚屏幕本身的大小。

您可以在以下位置找到整个项目 的GitHub .