代号一：带有图像的样式工具栏

Question

在我的应用中，我不知道如何使用我的徽标图像正确设置工具栏的样式。

我想让它看起来很像 "Sport1" 应用程序中的工具栏。 Example

所以我需要工具栏左侧的后退命令，我的徽标在资源中的 MultiImage 中间，右侧是另一个命令。

此外，我想让工具栏随着滚动而变小。到目前为止我尝试了什么：

    res_theme = r;
    Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
    logo = res_theme.getImage("Logo_Gema_vertikal.png");
    f.getToolbar().getTitleComponent().setUIID("toolbar_image");
    Style stitle = f.getToolbar().getStyle();
    stitle.setBgTransparency(0);
    stitle.setBgImage(logo);
    stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
    stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
    stitle.setPaddingTop(5);

所以，这看起来不错。我实际上不需要标题，这就是为什么我需要

Form f = (" ", ...);

如果我不向表单添加标题，工具栏会变得非常小，并且会挤压工具栏中的背景图像。工具栏居中的徽标只是出于样式原因，它不需要命令。有没有办法省略标题？我现在已经将它设置为完全透明，但对我来说这只是一个 work-around.

此外，我想与其将徽标设置为居中对齐的背景，不如将其作为图像添加到标题部分会更好，但我不知道这样是否更好或如何做吧。

现在，我还想让工具栏在向下滚动时变小。我在 Codename One 工具栏文档中找到了一种示例代码，但它对我不起作用，因为背景图像已被删除。

这是滚动动画的代码：

    ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
    f.getAnimationManager().onTitleScrollAnimation(title);

在示例中，它起作用了。我的工具栏没有，我不知道为什么。我也看不到，"after scrolling toolbar" 的大小是在哪里设置的。

我也可以添加图片吗？有点像一个工具栏，然后滚动我的徽标，然后在滚动时它变成一个只有文本徽标图像的较小工具栏？

这是我尝试让它工作的全部代码：

Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
    logo = res_theme.getImage("Logo_Gema_vertikal.png");
    f.getToolbar().getTitleComponent().setUIID("toolbar_image");
    Style stitle = f.getToolbar().getStyle();
    stitle.setBgTransparency(0);
    stitle.setBgImage(logo);
    stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
    stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
    stitle.setPaddingTop(5);
    f.add(new SpanLabel("asdasdasdasd");
    ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
    f.getAnimationManager().onTitleScrollAnimation(title);
    f.show();

Answer 1

从上面的示例来看，如果您看起来只想使用图像作为标题，而不是使用背景图像设置工具栏样式。

只需使用 ((Label)toolbar.getTitleComponent()).setIcon(myImage);.

代号一：带有图像的样式工具栏

Codename One: Style Toolbar with Image

codenameone