텍스트 대신 사용자에게 이미지를 표시하는 드롭 다운 목록을 어떻게 만드나요?
-
05-07-2019 - |
문제
ObjectChoicefield 필드는 모든 요구 사항을 충족하지만 예쁘지는 않습니다.
이것이 내가 가진 것입니다.
String pets[] = {"Dog", "Cat", "Duck" };
ObjectChoiceField dd = new ObjectChoiceField("My Pet",pets,0,ObjectChoiceField.FIELD_LEFT);
그러나 나는 드롭 다운에 사진이있는 것을 선호합니다. 내 이해는 객체 배열에 Tostring 방법을 지원하는 객체가 포함되어야한다는 것입니다. 다른 앱에서 볼 수있는 방법이 있어야합니다. API에서 올바른 객체를 찾을 수 없습니다.
ObjectChoicefield 일 필요는 없습니다.
해결책
맞춤형 버튼 필드와 팝업 스크린을 사용합니다. 두 가지 이유 :
- 모바일 디자인에서는 화면을 효과적으로 사용하는 것이 좋습니다. 최소한 복잡한 항목 (이미지 + 텍스트)의 경우 클래식 데스크톱 드롭 다운 컨트롤이 팝업보다 충분하지 않은 것 같습니다.
- 더 쉬워요 :)
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;
}
}
맞춤형 버튼 필드 :
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);
}
}
드롭 다운 컨트롤 자체 :
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();
}
}
}
사용 샘플 :
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);
}
}
다른 팁
나는 BlackBerry Development에 익숙하지 않지만 서브 클래스를 할 수있을 것 같아요 ObjectChoiceField
그리고 덮어 씁니다 layout(int, int)
그리고 paint(Graphics)
행동 양식.
그리고 나서 paint(Graphics)
아마도 사용하십시오 drawImage(...)
이미지를 그리기 위해 그래픽 객체로 전달 된 방법.
그냥 거친 추측
내 대답은 그 선을 따라갈 것입니다 지터의 응답. 원하는 사용자 정의에 대한 일반적인 아이디어는 기본 구성 요소의 기본 동작을 무시하는 것입니다.
표시하려는 선택은 이름이 지정된 클래스에서 캡슐화 할 수 있다고 가정합니다. Choice
다음과 같이 선언 됨 :
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;
}
}
그런 다음 선언 할 수 있습니다 ObjectListField
인스턴스 :
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);
}
};
선택 항목을 다음과 같이 설정하십시오.
choice.setChoices(new Choice[]{ new Choice("choice 1"), new Choice("choice 2")});
그런 다음 그것을 추가하십시오 Screen
(또는 FieldManager
선택의 사용) 사용 :
add(choice);
실제 선택 팝업 메뉴 항목을 무시할 수 없었습니다. 이것은 그것을 부르는 것 같습니다 toString()
선택한 항목의 방법. 그렇기 때문에 기본 구현을 재정의 한 이유입니다. toString()
에서 Choice
해당 팝업에 논리 이름을 표시 할 수 있도록 클래스.
이것이 Java 위젯 인 경우 선택 필드에 표시 할 항목으로 간단한 HTML을 전달할 수 있습니다 (또는 ToString ()가 간단한 HTML을 반환 할 수 있습니다). 그런 다음이 경우 이미지 URL/상대 경로를 전달하면 이미지가 표시되어야합니다. 적어도 스윙에서 작동하는 afaik, 예를 들어 ...
"<html> dog <img src ="dog.png "> < /html>"
(미리보기에 표시 할 코드가 추가 된 공간)