自定义工具栏问题答案

【问题标题】：Custom toolbar issues自定义工具栏问题
【发布时间】：2016-11-06 23:16:20
【问题描述】：

我写了一个自定义工具栏。而且我很难让它发挥作用（设计方面）。我有几个问题。

1）我面临的主要问题是将菜单图标放置在它们的确切位置。当我在不同的设备上测试它时，它们之间的差距是不同的。我也为菜单图标使用了表格布局和网格布局以及分层布局的徽标，但结果并不好。

代码：

void addTitle(Form form, Resources theme) {
    Toolbar toolbar = new Toolbar();
    form.setToolbar(toolbar);

    Container containerTitle = new Container(new BorderLayout());
    Image titleImage = theme.getImage("toolbar_bg.jpg");
    containerTitle.getAllStyles().setBgImage(titleImage);
    containerTitle.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_TILE_HORIZONTAL);
    containerTitle.setPreferredH(titleImage.getHeight());

    ScaleImageButton ruslanLogo = new ScaleImageButton();

    toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle,
            FlowLayout.encloseCenter(ruslanLogo)));
    Image ruslanLogoImage = theme.getImage("ruslanLogo.png").scaledWidth(toolbar.getPreferredH() - 180);
    ruslanLogo.setIcon(ruslanLogoImage);

    Image emergencyImage = theme.getImage("emergency.png");
    Image receipeImage = theme.getImage("receipe.png");
    Image fmImage = theme.getImage("fm.png");
    Image gameImage = theme.getImage("game.png");

    TableLayout tableLayout = new TableLayout(1, 5);
    //GridLayout gridLayout = new GridLayout(5);
    Container tableContainer = new Container(tableLayout);

    Button emergencyButton = getButton(emergencyImage);
    emergencyButton.getAllStyles().setAlignment(Label.CENTER);

    Button fmButton = getButton(fmImage);
    fmButton.getAllStyles().setAlignment(Label.CENTER);

    Button gameButton = getButton(gameImage);
    gameButton.getAllStyles().setAlignment(Label.CENTER);

    Button receipeButton = getButton(receipeImage);
    receipeButton.getAllStyles().setAlignment(Label.CENTER);

    Button transparentButton = getButton(receipeImage);
    transparentButton.getAllStyles().setAlignment(Label.CENTER);
    transparentButton.setVisible(false);

    tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(emergencyButton));
    tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(fmButton));
    tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(transparentButton));
    tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(gameButton));
    tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(receipeButton));
    containerTitle.addComponent(BorderLayout.SOUTH, tableContainer);
    toolbar.revalidate();
}

2)我检查了宽度和首选宽度，它们不同。会不会影响设计？

int width = emergencyButton.getWidth(); //60
int preferredwidth = emergencyButton.getPreferredW(); //74

3)在上面的代码中，我使用了 bg 图像高度来设置工具栏的高度。 “containerTitle.setPreferredH(titleImage.getHeight());”这是设置高度的好方法吗？因为我测试过的android手机的高度略有变化，但是在标签中看起来非常大，而且我在不同的模拟器中测试过，高度差异很大。普通工具栏的工具栏高度是怎么设置的？

Image titleImage = theme.getImage("toolbar_bg.jpg");
containerTitle.getAllStyles().setBgImage(titleImage);
containerTitle.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_TILE_HORIZONTAL);
containerTitle.setPreferredH(titleImage.getHeight());

ScaleImageButton ruslanLogo = new ScaleImageButton();

toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle,
        FlowLayout.encloseCenter(ruslanLogo)));

4)如何设置图标的宽度？

Image emergencyImage = theme.getImage("emergency.png");
Button emergencyButton = getButton(emergencyImage);

如果我这样做，某些设备的图标太大了。如果我缩放它，例如：emergencyImage.scaledWidth(screenwidth/8)，图像质量很差。如果我设置了像紧急按钮.setPreferredW(100) 这样的preferredW， img 宽度在不同设备中差异很大。 PS主题中的图片保存为multiImage

【问题讨论】：

标签： codenameone

【解决方案1】：

设置首选的宽度/高度是有问题的，因为它暗示了反维度并且可能有很多含义。我注意到你用过：

Image ruslanLogoImage = theme.getImage("ruslanLogo.png").scaledWidth(toolbar.getPreferredH() - 180);

根据首选高度而不是 width/5 或类似的东西设置宽度。它还在工具栏构造完成之前根据首选高度设置值，因此事情会有所不同。

首选宽度包括可能会影响您的设计的填充。我建议在设计器中创建一个居中对齐的 0 填充/边距 UIID，并将其设置为所有组件，以消除填充/边距差异并缩短代码。

【讨论】：