Question

I want to align a Custom Button Field (the Star on the Screenshot) to the center in a Horizontal Manager

Definition of the HFM

final HorizontalFieldManager _navigation = new HorizontalFieldManager(HorizontalFieldManager.NO_VERTICAL_SCROLL | HorizontalFieldManager.FIELD_VCENTER | Field.USE_ALL_WIDTH)
{    
 protected void paint(Graphics graphics)
 {
     graphics.setGlobalAlpha(100);

     int[] xInds = new int[]{0, getExtent().width, getExtent().width, 0};
     int[] yInds = new int[]{0, 0, getExtent().height, getExtent().height};
     final int[] cols = new int[]{Color.WHITE, Color.WHITE, color_computacenter_light_blue, color_computacenter_light_blue};

     graphics.drawShadedFilledPath(xInds, yInds, null, cols, null);
     super.paint(graphics);
 }
 protected void sublayout(int maxWidth, int maxHeight)
    {
        super.sublayout(maxWidth, maxHeight);
        setExtent(maxWidth, navigation_vertical_manager_height);
    }
};

Custom Field (partial)

public class NavigationButton extends Field
{
    private String label;
    Bitmap img;
    int horizontalPadding = 4;
    int verticalPadding = 10;
    static int height;
    static int weight;
    ToolTip _tooltip;

    public NavigationButton(String name, Bitmap img) 
    {
        label = name;
        this.img = img;
        this.height = img.getHeight() + 4;
        this.weight = img.getWidth()  + 2;
    }

    public NavigationButton(String name, Bitmap img, long style) 
    {
        super(style);
        label = name;
        this.img = img;
        this.height = img.getHeight() + 4;
        this.weight = img.getWidth()  + 2;
    }

    protected void layout(int maxWidth, int maxHeight) 
    {  
        setExtent(maxWidth, maxHeight);
        // setExtent(Math.min(weight, maxWidth), Math.min(height, maxHeight));
    }

    protected void paint(Graphics graphics) 
    {
        // Draw background  
        graphics.setGlobalAlpha(255);
        if(isFocus())
        {   
            graphics.setColor(0x005AA1);
            graphics.drawRoundRect(0 ,0 , weight + 1, height + 1, 2, 2);
        }
        if (img != null) 
        {
            graphics.drawBitmap(0, 0 , img.getWidth(), img.getHeight(), img, 0, 0);
        }
    }

[…]

Any Ideas, what I’m doing wrong?!

Thanks!

Answer 1

I haven’t tested this code out, but I suspect your problem is in the layout method of your field:

protected void layout(int maxWidth, int maxHeight) 
    {  
        setExtent(maxWidth, maxHeight);
        // setExtent(Math.min(weight, maxWidth), Math.min(height, maxHeight));
    }

Is there a reason you commented that line? I think what’s happening is that your custom field is taking up the whole width, and in your paint method you’re drawing the bitmap at the extreme left, making it look like the field is aligned left. If you uncomment that line, and add a field style bit of Field.FIELD_HCENTER when you construct your field it should work.

Alternatively, you can keep the layout as is, and just draw the bitmap centered, by changing the line in your paint method to something like this

graphics.drawBitmap((this.getWidth()-img.getWidth())/2, 0 , img.getWidth(), img.getHeight(), img, 0, 0);

The field will still take up the whole width, but the image will be centered. This might cause unexpected behavior on touchscreen devices (i.e. the Storm).