java - 如何在黑莓上制作这样的屏幕

Question

对不起标题，但我不知道如何总结这个问题=/

我需要制作这样的屏幕:

如您所见，它显示了那些“框”每个元素中都有 UI 元素。

每个“盒子”都放置在某种表格的单元格之内。

我认为将“框”表示为具有垂直滚动的 TableLayoutManager 中的单独屏幕是个好主意，但我什至不知道这是否可靠。

请有人告诉我如何在 BlackBerry 上做类似的事情因为我不知道从哪里开始。

我使用的是黑莓 JRE 4.5.0

提前致谢!

编辑:我编辑这个答案只是为了展示用户 Nate 提供的解决方案有多好:

Answer 1

这是我的建议。如果你想把它做成一个表格，重复标题/文本/图像/按钮/页脚模式，应该有一个 Manager 子类代表布局一行。

正如 Arhimed 指出的那样，此解决方案假设行数相对较少(请参阅下面的评论)，以表现良好。

首先，我创建了一个简单的类来保存一行将包含的数据:

   /** The data representation of one row in our table */
   private class Data {
      public String title;
      public String footer;
      public String[] text;  // each array element is a line of text
      public Bitmap icon;

      public Data(String title, String footer, String[] text, String iconName) {
         this.title = title;
         this.footer = footer;
         this.text = text;
         this.icon = Bitmap.getBitmapResource(iconName);
      }
   }

然后，这里是Manager子类，它只布局了一行，是一个Data对象的展示:

   /** The UI for one row of data */
   private class RowManager extends Manager {

      private LabelField title;
      private LabelField footer;
      private BitmapField iconImage;
      private ButtonField button;
      private TextField text;
      private static final int TITLE_AND_FOOTER_HEIGHT = 32;
      private static final int TEXT_HEIGHT = 80;

      public RowManager(int index, Data content, long style) {
         super(style);

         final Font titleFont = Font.getDefault().derive(Font.PLAIN, 24);
         final Font footerFont = Font.getDefault().derive(Font.PLAIN, 20);
         final Font textFont = Font.getDefault().derive(Font.PLAIN, 16);

         title = new CustomLabelField(content.title, titleFont, 
               Color.BLACK, Field.USE_ALL_WIDTH | DrawStyle.LEFT);
         title.setPadding(6, 0, 0, 10);  // top, right, bottom, left pad
         add(title);

         iconImage = new BitmapField(content.icon);
         add(iconImage);

         button = new ButtonField("Button" + index, ButtonField.CONSUME_CLICK);
         // the cookie helps identify which button this is (which row)
         button.setCookie(new Integer(index));
         button.setFont(textFont);
         add(button);

         text = new TextField(TextField.NON_FOCUSABLE) { 
            public void paint(Graphics g) {
               int c = g.getColor();
               g.setColor(Color.DARKRED);
               super.paint(g);
               g.setColor(c);
            }
         };
         text.setFont(textFont);
         StringBuffer textContent = new StringBuffer();         
         for (int line = 0; line < content.text.length; line++) {
            textContent.append(content.text[line] + "\n\n");   // double line-spacing
         }
         if (content.text.length > 0) {
            text.setText(textContent.toString().substring(0, textContent.toString().length() - 2));  // 2 \n chars
         }
         text.setPadding(10, 10, 10, 10);
         add(text);

         footer = new CustomLabelField(content.footer, footerFont, 
               Color.BLACK, Field.USE_ALL_WIDTH | DrawStyle.RIGHT);
         footer.setPadding(6, 10, 0, 0);  // top, right, bottom, left pad
         add(footer);
      }

      // overridden just to change background color (OS 4.5+!)
      public void paint(Graphics graphics)
      {
         int oldBgColor = graphics.getBackgroundColor();
         graphics.setBackgroundColor(Color.GRAY);
         // make the whole field gray, first, and then fill in the blue
         graphics.clear();

         // paint just the middle section blue
         int oldColor = graphics.getColor();
         graphics.setColor(Color.LIGHTBLUE);         
         graphics.fillRect(0, TITLE_AND_FOOTER_HEIGHT, getWidth(), TEXT_HEIGHT); 

         super.paint(graphics);

         graphics.setColor(oldColor);
         graphics.setBackgroundColor(oldBgColor);
      }

      public void setChangeListener(FieldChangeListener listener) {
         // only the button field supports change listeners
         button.setChangeListener(listener);
      }

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

      public int getPreferredHeight() {
         return TITLE_AND_FOOTER_HEIGHT + TEXT_HEIGHT + TITLE_AND_FOOTER_HEIGHT;
      }

      protected void sublayout(int width, int height) {
         int y = 0;

         layoutChild(title, width, TITLE_AND_FOOTER_HEIGHT);
         setPositionChild(title, 0, y);

         layoutChild(iconImage, 
               iconImage.getPreferredWidth(), iconImage.getPreferredHeight());
         setPositionChild(iconImage, 
               width - iconImage.getPreferredWidth() - 10, 5);
         y += TITLE_AND_FOOTER_HEIGHT;

         int buttonWidth = 88;
         layoutChild(text, width - buttonWidth - 20, TEXT_HEIGHT);
         setPositionChild(text, 0, y);

         layoutChild(button, buttonWidth, 40);
         setPositionChild(button, width - buttonWidth - 20, 
               y + (TEXT_HEIGHT - 40) / 2);

         y += TEXT_HEIGHT;

         layoutChild(footer, width, TITLE_AND_FOOTER_HEIGHT);
         setPositionChild(footer, 0, y);

         super.setExtent(width, y + TITLE_AND_FOOTER_HEIGHT);
      }
   }

还有一个 Screen 类，它会创建一些示例 Data 对象，并使用 RowManager:

public class StackScreen extends MainScreen implements FieldChangeListener {

   private Vector rowData;

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

      // define the screen title
      Font titleFont = Font.getDefault().derive(Font.PLAIN, 30);
      CustomLabelField title = new CustomLabelField("Screen Title", 
            titleFont, Color.DARKRED, DrawStyle.HCENTER | Field.USE_ALL_WIDTH);        
      title.setPadding(10, 10, 10, 10);
      add(title);

      // populate a dummy set of model data
      rowData = new Vector();      
      Data one = new Data("Title 1", "Some footer info", 
            new String[]{ "First line of text", "Second line of text" }, 
            "image1.png");
      Data two = new Data("Title 2", "Some footer info", 
            new String[]{ "First line of text", "Second line of text" }, 
            "image2.png");
      rowData.addElement(one);
      rowData.addElement(two);

      // create a UI representation of each row's data
      for (int i = 0; i < rowData.size(); i++) {
         RowManager row = new RowManager(i, (Data)rowData.elementAt(i), 0);
         row.setPadding(10, 20, 10, 20);  // top, right, bottom, left pad
         row.setChangeListener(this);
         add(row);
      }
   }

   // invoked when buttons are clicked
   public void fieldChanged(Field field, int context) {
      Object cookie = field.getCookie();
      if (cookie instanceof Integer) {
         Integer rowIndex = (Integer) cookie;
         Dialog.alert("Button " + rowIndex + " clicked!");
      }
   }
}

我使用了最后一个实用 UI 类来创建彩色标签:

   /** A label field with custom font and color attributes */
   private class CustomLabelField extends LabelField {

      private int fontColor = Color.BLACK;

      public CustomLabelField(String text, Font f, int color, long style) {
         super(text, style);
         setFont(f);
         fontColor = color;
      }      

      public void paint(Graphics g) {
         int oldColor = g.getColor();

         g.setColor(fontColor);
         super.paint(g);

         // reset graphics context
         g.setColor(oldColor);
      }
   }  

这是它在 OS 5.0 9550 上的样子。我相信我远离任何在 OS 4.5 上不可用的 API(setPadding() 未记录，但可用)。显然，布局是高度硬编码的。您需要针对其他设备进行调整，但我必须给您留一些工作:)