3

タイトルは申し訳ありませんが、質問の要約方法がわかりません= /

次のような画面を作成する必要があります。

ここに画像の説明を入力してください

ご覧のとおり、各ボックス内にUI要素が含まれる「ボックス」が表示されます。

各「ボックス」は、ある種のテーブルのセルのようなものの中に配置されます。

「ボックス」をTableLayoutManager内の個々の画面として垂直スクロールで表すのは良い考えだと思いましたが、それが信頼できるかどうかさえわかりません。

どこから始めればいいのかわからないので、BlackBerryでそのようなことをする方法を誰かに教えてください。

私はBlackBerryJRE4.5.0を使用しています

前もって感謝します!

編集:この回答を編集して、ユーザーNateが提供したソリューションがどれほど優れているかを示します。

ここに画像の説明を入力してください

4

1 に答える 1

10

これが私の提案です。これをテーブルにして、タイトル/テキスト/画像/ボタン/フッターのパターンを繰り返したい場合は、1Managerのレイアウトを表すサブクラスが必要です。

Arhimedが指摘したように、このソリューションは、パフォーマンスを向上させるために、比較的少数の行(以下のコメントを参照)を想定しています。

まず、1つの行に含まれるデータを保持する単純なクラスを作成しました。

   /** 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);
      }
   }

次に、 1つのオブジェクトManagerのプレゼンテーションである1つの行のみをレイアウトするサブクラスを次に示します。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クラスです。DataRowManager

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クラスが1つあります。

   /** 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);
      }
   }  

setPadding()これは、OS 5.0 9550での外観です。OS4.5では使用できないAPI(文書化されていませんが使用可能)には近づかないと思います。明らかに、レイアウトは高度にハードコーディングされています。他のデバイスに合わせて調整する必要がありますが、私はあなたにいくつかの仕事を残さなければなりません:)

ここに画像の説明を入力してください

于 2012-12-02T12:49:47.743 に答える