在Codenameone的手机和平板电脑的样式布局

时间:2017-04-18 23:32:23

标签: iphone ipad codenameone tablet

我完成了应用程序的开发,使用了非常适合模拟器中iphone 6的表单组件布局。我使用了主题样式(总是基本资源)和一些编码调整的外观和感觉组合。

当我对iphone 5运行时,我曾经天真地期望显示器缩小到适合,正如您对浏览器应用程序所期望的那样,但我的组件(标签很大程度上)偏离了容器的边缘。恐慌。

我最终必须测量显示器高度并从那里判断设备并编写不同尺寸的组件以获得正确的配合。这花了一些时间。

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

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

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演示并没有真正解决它。非常感谢提前。

1 个答案:

答案 0 :(得分:1)

从问题描述来看,您似乎正在考虑将平板电脑视为一部大型手机&#34;这是错误的看待方式。平板电脑具有与手机相似的密度,但更多的空间以英寸为单位,这意味着您需要设计您的应用程序,以便更有效地消耗额外空间。

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

on a phone

on a tablet