为什么图片出现在GUI Builder和设备上,而不是出现在Codename One Simulator中?

时间:2017-09-11 13:36:31

标签: css codenameone

我正在使用GUI Builder设计我的应用UI。我创建了一个新表单并定义了一个样式如下:

FinishFlagIcon {
background-image: url(pics/FinishFlag.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
font-size: 11.9mm; 
}

我在标签上设置了这种样式,它出现在GUI Builder上。 Project in the GUI Builder

然而,当我在模拟器中启动项目时,它不再出现了。 Project in the simulator

我还尝试使用Scaled Label并将图标定义为FinishFlag(存在于res文件中),并再次出现在GUI Builder中但不在模拟器中。当然,控制台中没有打印错误,告诉我无法找到该文件。

请注意:res / myCustomTheme.css文件夹包含与png相关的所有子文件夹(这些子文件夹用低到高的png填充),src / theme.res包含图片(下面是Shai' s建议): Project theme.res file with the images

那么我该怎么办才能让图片出现在模拟器中呢?

编辑:我尝试手动编写UI代码,并将一个Label(上面定义的UIID)添加到BorderLayout的中心区域。在我向Label添加 3 空格或更多空格之前,我没有出现。我没有再使用GUI Builder重试。这对我来说很奇怪,它是故意的吗?

2017年9月13日编辑:如果我构建应用并在真实的Android设备上打开它,那么就会显示标签。 Project on the device

2017年9月15日编辑:对于没有显示组件问题的人,按照接受的答案中的建议,解决方案包括删除未显示的组件的顶部或底部约束并将其设置为自动(单击锁定)以便有足够的空间容纳组件。所以最终设置为" auto"进度条的底部约束标记预期结果显示在模拟器上:

Layout with fewer constraints on the bottom components

任何帮助表示赞赏,

2 个答案:

答案 0 :(得分:2)

您问题中的图片是红鲱鱼。看起来问题在于你的布局插图。请注意,您的下部组件都没有出现在模拟器中。 “进展”标签,三个零等......

我看不到您对标志或零标签使用的约束,但我可以看到“progress”标签在顶部和底部都有固定的插图。如果没有足够的空间,这可能导致零高度。尝试将顶部或底部插入更改为“自动”,以便它们具有灵活性。

尝试更改模拟器以使用桌面主题,以便您可以调整窗口大小并查看表单在不同大小下的显示方式。

您也可以通过覆盖表单的layoutContainer()方法轻松验证这一点,并检查您的标记所获得的高度:

public void layoutContainer() {
   super.layoutContainer();
   System.out.println("finishflag height: "+gui_FinishFlag.getHeight());
}

答案 1 :(得分:1)

我不确定什么是“正确”的解决方案,所以也许史蒂夫可以插话但这就是正在发生的事情。

您有两个资源文件:theme& theme.css

theme.css中的图片非常适合您的风格。但是,由于加载过程加载theme而不是theme.css,模拟器不会意识到这些图像,因为theme res文件不知道它们。

GUI构建器可能正在扫描此处的所有res文件,因此它允许您执行可能是错误的操作...您可以使用以下选项来解决此问题:

  • 加载theme.css并弃置theme - 您需要定义inheritNativeThemeBool标记,如果采用该方法,则不应再使用设计器工具

    < / LI>
  • 使用设计器工具加载图像而不是CSS

  • 使用Resources.open明确加载css res文件并明确将其传递给Form

  • 使用Resources.open显式加载css res文件并将其设置为全局资源文件