将图标添加到列表中的每个列表项

时间:2011-07-27 19:00:20

标签: java-me lwuit

我想为列表中的每个项目添加一个图标。这是我创建列表的代码:

    Form f3=new Form("DEMO FORM");
    f3.setScrollable(true);
    f3.setLayout(new BorderLayout());
    f3.setLayout(new BoxLayout(BoxLayout.Y_AXIS));


     String items[] = {"one","two","three","four"};
     DefaultListModel myListModel = new DefaultListModel(items);
     List lst=new List(myListModel);

    f3.addComponent(lst);
    f3.show();

我该怎么做?

3 个答案:

答案 0 :(得分:3)

使用此列表渲染器

import com.sun.lwuit.Component;
import com.sun.lwuit.Font;
import com.sun.lwuit.Image;
import com.sun.lwuit.Label;
import com.sun.lwuit.List;
import com.sun.lwuit.list.ListCellRenderer;
import com.sun.lwuit.plaf.Border;
import java.io.IOException;
public class MyListRenderer extends Label implements ListCellRenderer {

    private Image[] images;
    /** Creates a new instance of MyListRenderer */

    public MyListRenderer() {
        super("");
        images = new Image[2];
        try {
            images[0] = Image.createImage("/on.png");
            images[1] = Image.createImage("/off.png");
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected) {
        setText(value.toString());
        //getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD,Font.SIZE_MEDIUM));
        if (isSelected) {
            setFocus(true);
            setIcon(images[1]);
            getStyle().setBgColor(0xffcc99);
            getStyle().setBgTransparency(55);
            getStyle().setBorder(Border.createRoundBorder(15, 15, 0xff9900, true));
        } else {
            setFocus(false);
            setIcon(images[0]);
            getStyle().setBgColor(0xffffff);
            getStyle().setFgColor(0x000000);
            getStyle().setBorder(Border.createRoundBorder(15, 15, 0xffcc99, true));
            getStyle().setBgTransparency(255);
        }
        return this;
    }

    public Component getListFocusComponent(List list) {
        setIcon(images[1]);
        setText("");
        getStyle().setBgColor(0x0000ff);//no effect
        setFocus(true);
        getStyle().setBgTransparency(100);
        return this;
    }
}

您可以从此渲染器中删除不需要的装饰:焦点上的颜色更改等...我还为未选择和选定的列表项提供了两个不同图标的代码。 然后像这样设置列表的渲染器:

lst.setListCellRenderer(new MyListRenderer());

答案 1 :(得分:2)

您需要将图像数据放在模型中,或者为渲染器提供某种方式来提取和应用该数据。请参阅LWUIT演示中的示例,其中包含渲染器演示或滚动演示,其中显示了具有图标和各种条目布局的列表。

答案 2 :(得分:0)

我使用了较新的“通用列表单元格渲染器”来生成列表中的缩略图(图标)。我发现它比列表渲染的其他选项更容易实现。以下链接有示例代码,以显示如何使用此技术创建列表。 http://codenameone.blogspot.in/2011/03/list-rendering-easy-way-generic-list.html

为了显示缩略图,我做了以下几乎是LWUIT中的锅炉。

 private Container createGenericRendererContainer() throws IOException {

        Container c = new Container(new BorderLayout());
        c.setUIID("ListRenderer");

        Label xname = new Label("");
        Label description = new Label();
        //create box layout to contain name and description
        Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
        xname.setName("Name");
        xname.getStyle().setBgTransparency(0);
        xname.getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM));
        description.setFocusable(true);
        description.setName("Description");
        cnt.addComponent(xname);
        cnt.addComponent(description);
        c.addComponent(BorderLayout.CENTER, cnt);
        //thumbail or icon goes here. we add to the left in our borderlayout
        Button thumb = new Button(Image.createImage("/res/home-work.png"));
        c.addComponent(BorderLayout.WEST, thumb);

        return c;

}