在 Xamarin 中使用 watchOS 屏幕大小Working with watchOS Screen Sizes in Xamarin

Apple Watch 提供了两种屏幕大小:Apple Watch is available in two screen sizes:

  • 38mm38mm

    • 136 x 170 逻辑像素(272 x 340 物理像素)136 x 170 logical pixels (272 x 340 physical pixels)
  • 42mm42mm

    • 156 x 195 逻辑像素(312 x 390 物理像素)。156 x 195 logical pixels (312 x 390 physical pixels).

设计和测试应用时,应考虑屏幕大小。You should take screen size into account when designing and testing your apps.

watchOS 接口设计器watchOS Interface Designer

默认情况下,Visual Studio for Mac 设计器将在任何 Apple Watch显示 "监视" 界面控制器。By default the Visual Studio for Mac Designer will display watch interface controllers at Any Apple Watch.

使用 "大小" 菜单可在任何可用屏幕尺寸上编辑和预览情节提要: 38mm42mmUse the size menu to edit and preview your storyboard at either of the available screen sizes: 38mm or 42mm:

屏幕大小越大,有时会呈现在较小屏幕上被截断/隐藏的内容。The larger screen size will sometimes render content that would be truncated/hidden on the smaller screen. 请确保对这两种大小进行测试。Be sure to test on both sizes.

接口设计Interface Design

应用应在屏幕上显示相同的内容,而不考虑大小,应根据需要展开或折叠元素。Your app should display the same content on the screen, regardless of size, and should expand or contract elements as appropriate. 在 Visual Studio for Mac 设计器中,在 "属性检查器" 中,应使用 "相对于容器" 或 "大小" 来根据固定大小调整内容的优先级。In the Visual Studio for Mac Designer, in the Attribute Inspector, you should use Relative to Container or Size to Fit Content in preference to fixed sizes.

由于手表屏幕环绕在黑色档板上,因此不建议在界面周围提供填充。Because the watch screen is surrounded by a black bezel, providing padding around your interface is not recommended. 让元素在屏幕边缘上停留,并让档板形成应用周围的自然边框。Let elements rest against the edge of the screen and let the bezel form a natural border around the app.

watchOS 模拟器watchOS Simulator

在模拟器上进行测试时,可以使用硬件 > 设备菜单在两个屏幕大小之间轻松切换。When testing on the simulator you can easily switch between the two screen sizes using the Hardware > Device menu.

图像资源Image Resources

如果单个资产在不同尺寸上看起来不佳,则应使用多个图像资产。You should use multiple image assets if a single asset does not look good at different sizes. 图像资产目录允许为每个大小指定单独的位图:Image asset catalogs allow for separate bitmaps to be specified for each size:

// specify the asset name, the correct size will automatically be loaded
staticImage.SetImage(UIImage.FromBundle("Walkway"));

或者,使用代码来确定屏幕大小并完全加载不同的图像:Alternatively, use code to determine the screen size and load different images altogether:

bool large = WKInterfaceDevice.CurrentDevice.ScreenBounds.Size.Width > 136.0;
// Load image depending on screen size
using (var image = UIImage.FromBundle (large ? "42mm-Walkway" : "38mm-Walkway"))
{
   myImage.SetImage (image);

}

阅读有关使用图像控件的详细信息。Read more about using the image control.