向列表中的每个列表项添加图标

Question

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

    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();

我该怎么做？

Answer 1

使用此列表渲染器

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());

Answer 2

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

Answer 3

我使用了较新的“通用列表单元格渲染器”来生成列表中的缩略图（图标）。我发现它比其他列表渲染选项更容易实现。以下链接包含示例代码，展示如何使用此技术创建列表。
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;

}