Wie Sie eine Dropdown-Liste machen, die den Benutzer Bilder anstelle von Text angezeigt?

Question

Das ObjectChoiceField Feld erfüllt alle meine Anforderungen, aber es ist nicht schön.

Das ist, was ich habe:

String pets[] = {"Dog", "Cat", "Duck" };
ObjectChoiceField dd = new ObjectChoiceField("My Pet",pets,0,ObjectChoiceField.FIELD_LEFT);

Aber ich würde es vorziehen, Bilder in der Dropdown-Liste zu haben. Mein Verständnis ist, dass das Objekt Array-Objekte, die die Methode toString unterstützen enthalten. Es gibt bekomme ein Weg, um zu tun, ich es in anderen Anwendungen zu sehen, ich kann einfach nicht das richtige Objekt in der API finden.

Es muss kein ObjectChoiceField sein.

Answer 1

würde ich benutzerdefinierte verwenden Button und PopupScreen. Zwei Gründe:

• fahrbar ist es besser, Bildschirm effektiv zu nutzen und klassischen Desktop-Drop-Down-Steuerung scheint als Popup weniger ausreichend zu sein, zumindest für komplexe Elemente (Bild + Text)
• es ist einfacher:)

alt text http://img405.imageshack.us/img405/3746/dropdown .jpg

DropDownItem:

class DropdownItem {
 Bitmap mBitmap;
 String mName;

 public DropdownItem(Bitmap bitmap, String name) {
  this.mBitmap = bitmap;
  this.mName = name;
 }
}

Benutzerdefinierte Button:

class BitmapButtonField extends ButtonField {
 protected DropdownItem mItem;
 boolean mTextItem;
 int mWidth;
 int mHeight;

 public BitmapButtonField(DropdownItem item, boolean textItem) {
  super(CONSUME_CLICK);
  mItem = item;
  mTextItem = textItem;
  mWidth = mItem.mBitmap.getWidth() + 6
    + (mTextItem ? getFont().getAdvance(mItem.mName) + 6 : 0);
  mHeight = mItem.mBitmap.getHeight() + 6;
  setMargin(0, 0, 0, 0);
  setPadding(0, 0, 0, 0);
  setBorder(BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
  setBorder(VISUAL_STATE_ACTIVE, BorderFactory
    .createSimpleBorder(new XYEdges(0, 0, 0, 0)));
 }

 protected void paint(Graphics graphics) {
  int color = (getVisualState() == VISUAL_STATE_FOCUS) ? Color.LIGHTGREY
    : Color.DARKGRAY;
  graphics.setColor(color);
  graphics.drawRect(1, 1, mWidth - 2, mHeight - 2);
  graphics.drawBitmap(3, 3, mItem.mBitmap.getWidth(), mItem.mBitmap
    .getHeight(), mItem.mBitmap, 0, 0);
  if (mTextItem)
   graphics.drawText(mItem.mName, mItem.mBitmap.getWidth() + 6, 3);

 }

 public int getPreferredWidth() {
  return mWidth;
 }

 public int getPreferredHeight() {
  return mHeight;
 }

 protected void layout(int width, int height) {
  setExtent(mWidth, mHeight);
 }
}

Auswahlsteuerung selbst:

class DDImagesButton extends BitmapButtonField implements FieldChangeListener {
 DropdownItem[] mItems;
 int mIndex;

 public DDImagesButton(DropdownItem[] items) {
  super(items[0], false);
  mItems = items;
  updateIndex(0);
  setChangeListener(this);
 }

 protected void paint(Graphics graphics) {
  super.paint(graphics);

  int x = mItems[mIndex].mBitmap.getWidth() + 2;
  int y = 5;

  int y1 = y;
  int y2 = y + 10;
  int x1 = x;
  int x2 = x + 18;
  int[] xPts = new int[] { x1, x2, x1 + 9 };
  int[] yPts = new int[] { y1, y1, y2 };
  graphics.drawFilledPath(xPts, yPts, null, null);
 }

 public void fieldChanged(Field field, int context) {
  getScreen().getUiEngine().pushScreen(new DDImagesPopUp());
 }

 public void updateIndex(int index) {
  mIndex = index;
  mItem = mItems[mIndex];
  mWidth = mItem.mBitmap.getWidth() + 6 + 18 + 3;
  mHeight = mItem.mBitmap.getHeight() + 6;
  invalidate();
 }

 class DDImagesPopUp extends PopupScreen implements FieldChangeListener {

  public DDImagesPopUp() {
   super(
     new VerticalFieldManager(VERTICAL_SCROLL
       | VERTICAL_SCROLLBAR));
   for (int i = 0; i < mItems.length; i++) {
    BitmapButtonField button = new BitmapButtonField(mItems[i],
      true);
    add(button);
    button.setChangeListener(this);
   }
   setFieldWithFocus(getField(mIndex));
  }

protected boolean keyChar(char key, int status, int time) {
    if (Keypad.KEY_ESCAPE == key) {
        this.close();
        return true;
    } else
        return super.keyChar(key, status, time);
}

  public void fieldChanged(Field field, int context) {
   updateIndex(getFieldWithFocusIndex());
   close();
  }
 }
}

Beispiel für die Verwendung:

class Scr extends MainScreen {
 DDImagesButton ddImages1;
 DDImagesButton ddImages2;

 public Scr() {
  HorizontalFieldManager hfm = new HorizontalFieldManager();
  add(hfm);

  DropdownItem[] items = new DropdownItem[6];
  items[0] = new DropdownItem(Bitmap.getBitmapResource("1.png"),
    "Add Item");
  items[1] = new DropdownItem(Bitmap.getBitmapResource("2.png"),
    "Attachment");
  items[2] = new DropdownItem(Bitmap.getBitmapResource("3.png"), "Time");
  items[3] = new DropdownItem(Bitmap.getBitmapResource("4.png"), "User");
  items[4] = new DropdownItem(Bitmap.getBitmapResource("5.png"), "Group");
  items[5] = new DropdownItem(Bitmap.getBitmapResource("6.png"),
    "Information");
  ddImages1 = new DDImagesButton(items);
  hfm.add(ddImages1);

  ddImages2 = new DDImagesButton(items);
  hfm.add(ddImages2);
 }
}

Answer 2

Ich bin nicht vertraut mit Brombeere Entwicklung, aber ich denke, man ObjectChoiceField Unterklasse könnte und die layout(int, int) und die paint(Graphics) Methoden überschreiben.

Und dann vielleicht in paint(Graphics) verwenden, um die drawImage(...) Methode des übergebenen Graphics-Objekts, das Bild zu zeichnen.

Nur eine wilde Vermutung

Answer 3

Meine Antwort wird entlang der Linien von Jitter Antwort . Die allgemeine Idee für die Art von Anpassungen, die Sie wollen, ist das Standardverhalten der Basiskomponenten außer Kraft zu setzen.

Nehmen wir an, die Entscheidungen, die Sie anzeigen möchten, können durch eine Klasse gekapselt werden dem Namen Choice wie folgt deklariert:

private class Choice
{
  public Bitmap image;
  public String label;

  public Choice(String name)
  {
    this.image = Bitmap.getBitmapResource(name + ".png");
    this.label = name;
  }

  public String toString()
  {
    return this.label;
  }
}

dann können Sie ein ObjectListField Beispiel als deklarieren:

ObjectChoiceField choice = new ObjectChoiceField()
{      
  protected void paint(Graphics graphics)
  {
    // Get the current selected Choice
    Choice item = (Choice) this.getChoice(getSelectedIndex());

    int xOffset = 5; // 5 px padding on the left
    graphics.drawBitmap(xOffset, 0, 
                        item.image.getWidth(), 
                        item.image.getHeight(), 
                        item.image, 
                        0, 0);
    // Add text after the image and 10px padding.
    xOffset += item.image.getWidth() + 10; 
    graphics.drawText(item.label, xOfffset, 0);
  }            
};

, geben Sie Ihre Wahl Elemente wie:

choice.setChoices(new Choice[]{ new Choice("choice 1"), new Choice("choice 2")});

und dann fügen Sie sie Screen (oder FieldManager Ihrer Wahl) mit:

add(choice);

Ich habe nicht in der Lage gewesen, die tatsächlichen Auswahl Pop-up-Menüpunkte außer Kraft zu setzen. Dies scheint die toString() Methode Ihrer Wahl Artikel zu nennen. Deshalb habe ich die Standardimplementierung von toString() außer Kraft gesetzt haben, in der Choice Klasse, so dass wir logische Namen in diesem Pop-up angezeigt werden können.

Answer 4

Wenn dies ein Java-Widget ist dann die Chancen sind Sie einfache HTML passieren können als Elemente im Auswahlfeld (oder haben toString () zurückkehren einfache HTML) angezeigt werden soll. Dann, wenn das der Fall ist und Sie übergeben einen Bild-URL / relativen Pfad sollte das Bild angezeigt werden soll. AFAIK das funktionieren würde in Swing mindestens, z ...

" Hund "

(Räume für den Code hinzugefügt in der Vorschau zeigen)