Codenameone 中用于手机和平板电脑的样式布局答案

【问题标题】：Styling layout in Codenameone for phone and tabletCodenameone 中用于手机和平板电脑的样式布局
【发布时间】：2017-09-14 23:35:55
【问题描述】：

我完成了我的应用程序的开发，使用了非常适合模拟器中的 iphone 6 的表单组件布局。我结合使用了主题样式（始终为 Base Resource）和一些外观和感觉的编码调整。

当我在 iphone 5 上运行它时，我天真地期望显示屏会缩小以适应浏览器应用程序，但我的组件（主要是标签）却脱离了容器的边缘。恐慌。

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

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

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

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 演示并没有真正解决这个问题。非常感谢。

【问题讨论】：

如果您可以分享一些屏幕截图来展示您遇到的问题，我可以提供一些关于如何改进布局以跨平台工作的建议。
嗨，史蒂夫，我们不再提供屏幕截图。本质上，在基本层面上，问题是我有一个屏幕在顶部显示标题，在中心显示一些核心文本，在南部显示页脚文本。在主题中，所有文本的字体都在 2 到 5 毫米之间。这适合 iphone 6 尺寸。在我们进行更改之前，当在 ipnone 5 上呈现时，文本离开了页面的边缘。在 ipad 上，页面上有很多多余的空间，所以看起来不平衡。因此我的解决方案是读取屏幕尺寸并减少\增加字体。这是最好/唯一的方法吗？
要添加，对于图像也是如此，因为您必须在屏幕上设置它们的大小。因此，在 ipad 上，你最终会得到很多空白空间，而在较小的手机上，它看起来会显得局促。那么，以编程方式将大小调整为屏幕大小的唯一方法又是什么？

标签： iphone ipad codenameone tablet

【解决方案1】：

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

以下是同一个 Kitchen Sink 演示的两个屏幕截图，一个在 iPad 上运行，另一个在 iPhone 上运行。请注意 UI 的外观非常不同，因为我们调整了 UI 以使用额外的空间。图片（例如多张图片）和字体由密度决定，而不是由像素数量决定，因为目标是使用额外空间而不是用更大的图片/文本填满屏幕。

【讨论】：