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

Posted 2023-03-22

【中文标题】代号一：带图像的样式工具栏

【英文标题】：Codename One: Style Toolbar with Image

【发布时间】：2016-12-16 15:52:00

【问题描述】：

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

我想让它看起来很像“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 = (" ", ...);

如果我不给表单添加标题，工具栏会变得非常小并从工具栏中挤压背景图像。工具栏中的居中徽标只是出于样式原因，它不需要命令。有没有办法去掉标题？我现在已将其设置为完全透明，但对我来说这只是一种解决方法。

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

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

这是滚动动画的代码：

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

在示例中，它起作用了。我的工具栏没有，我不知道为什么。我也看不到“滚动后工具栏”的大小设置在哪里。

我也可以在那里添加图片吗？在滚动我的徽标之前有点像一个工具栏，然后在滚动时它会变成一个只有 textlogo 图像的小工具栏？

这是我试图使它工作的整个代码：

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();

【参考方案1】：

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

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

【讨论】：

哇，结果是一样的，只是你的要短得多，哈哈。你有什么技巧可以让工具栏在滚动时变小吗？有没有办法设置工具栏的大小？

你的意思是：codenameone.com/blog/new-animation-manager.html仅供参考，如果答案是正确的，你应该点击它旁边的复选框来接受它