Given two label fields inside an HorizontalFieldManager, how should I do to display the full text from second label without wrapping it?

Question

I have an HorizontalFieldManager with two labels inside. The left label shows a description, and the right one shows a money amount.

For me, it's more important to show the full text of the second label. Problem is that if the first label is too long, the second label will be wrapped. I want to avoid that, so text from second label always is displayed. I also need to avoid the wrapping over first label in that case, so text from that label is trimmed and filled with dots.

This is how the HorizontalFieldManager looks:

And this is what I need to get:

How should I do that?

Thanks in advance!

Answer 1

If you create your LabelField with the LabelField.ELLIPSIS flag, it will truncate the field with . characters. I would recommend that you use a custom Manager subclass (instead of HorizontalFieldManager) to decide what the proper width of your two LabelFields should be. You can do this by asking what the proper width is of the dollar amount, given the current font.

Try this example:

public class LabelAlignScreen extends MainScreen {

   private LabelField description;
   private LabelField balance;
   private static final int MARGIN = 8;  // used for x and y

   public LabelAlignScreen() {
      super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);

      Manager row = new RowManager(Manager.USE_ALL_WIDTH);
      description = new LabelField("This is a very looooooooooong description", 
            LabelField.ELLIPSIS);
      row.add(description);
      balance = new LabelField("1,500,000,000 USD");
      row.add(balance);
      add(row);
   }

   private class RowManager extends Manager {
      public RowManager(long flags) {
         super(flags);
      }

      protected void sublayout(int width, int height) {
         // first, determine how much space the balance field needs
         int balanceWidth = balance.getFont().getAdvance(balance.getText());
         // description field gets leftover width, 
         //   minus a margin at left, center and right
         int descriptionWidth = width - balanceWidth - 3 * MARGIN;

         setPositionChild(description, MARGIN, MARGIN);
         layoutChild(description, descriptionWidth, description.getPreferredHeight());

         setPositionChild(balance, MARGIN + descriptionWidth + MARGIN, MARGIN);
         layoutChild(balance, balanceWidth, balance.getPreferredHeight());  

         setExtent(width, getPreferredHeight());
      }

      public int getPreferredHeight() {
         return Math.max(balance.getPreferredHeight(), description.getPreferredHeight()) + 2 * MARGIN;
      }

      public int getPreferredWidth() {
         return Display.getWidth();
      }
   }
}

Note: you didn't specify whether the dollar/balance field should be a fixed width, or always just barely enough to fit the text. I assumed that it should just barely fit the text, as I think that makes for a better layout in most cases. Also, my code above uses a hardcoded MARGIN value for the space around all the fields. You can adjust that if you like.

Results