phone 和平板电脑的 Codenameone 样式布局

Question

我使用完全适合模拟器中 iphone 6 的表单组件布局完成了我的应用程序的开发。我结合使用了主题样式（始终是基础资源）和一些代码调整外观。

当我运行与 iphone 5 对比时，我曾天真地期望显示会缩小以适合，正如您对浏览器应用程序所期望的那样，但我的组件（主要是标签）却消失了离开他们的容器的边缘。恐慌。

我最终不得不测量显示器高度并从那里判断设备，并对不同尺寸的组件进行编码以获得合适的尺寸。这花了一些时间。

在 AppStore 中的 TestFlight 旁边。作为更广泛测试的一部分，我决定在我的 iPad 3 上安装，结果发现布局组件呈现得非常小。恐慌。

我已经花了几天时间解决这个问题。我基本上使用这种方法来确定设备类型 'category' 然后应用字体或字体图像等的大小

public static ScreenSizeEnum getScreenSize() {
    if (Display.getInstance().isTablet() && Display.getInstance().getDisplayHeight() > 2000) {
        return ScreenSizeEnum.TABLET;
    }
    else if (Display.getInstance().getDisplayHeight() < 950) {
        return ScreenSizeEnum.SMALL;
    } else if (Display.getInstance().getDisplayHeight() > 949 && Display.getInstance().getDisplayHeight() < 1200) {
        return ScreenSizeEnum.MEDIUM;
    } else {
        return ScreenSizeEnum.LARGE;
    }
}

不出所料，这并非万无一失。 Ipad 6 plus 无法识别为平板电脑但显示高度较大，但其中一款 Nexus 是平板电脑但显示高度较小。

我的问题是，你究竟是如何解决这个问题的？

平板电脑和手机有不同的尺寸，但重要的是无论外形如何，您仍然可以获得高质量的组件渲染。 CN1 KitchenSink 演示并没有真正解决这个问题。非常感谢。

Answer 1

根据问题的描述，您似乎将平板电脑视为 "large phone"，这是错误的看待方式。平板电脑的密度与 phone 相似，但以英寸为单位的空间更大，这意味着您需要设计您的应用程序，以便它更有效地使用额外的 space。

这是同一个 Kitchen Sink 演示的两个屏幕截图，一个运行在 iPad 中，另一个运行在 iPhone 中。请注意 UI 的外观非常不同，因为我们调整 UI 以用完额外的 space。图像（例如多图像）和字体由密度而不是像素数量决定，因为目标是使用额外的 space 而不是用更大的 images/text.[=12= 填满屏幕]

phone 和平板电脑的 Codenameone 样式布局

Styling layout in Codenameone for phone and tablet

iphone

ipad

codenameone

tablet