JAVA实现带图片的列表——JList
JList:显示对象列表并且允许用户选择一个或多个项的组件。
JList的构造方法:
1.根据数组创建列表:
JList(Object[] listData)
构造一个 JList,使其显示指定数组中的元素。
String[] str = { "列表1", "列表2", "列表3", "列表4" };
JList<String> s = new JList<>(str);
一个简单地列表就显示出来了。
2.根据指定的非 null 模型构造一个显示元素的 JList。
JList(ListModel dataModel)
DefaultListModel<String> model=new DefaultListModel<>();
model.addElement("列表1");
model.addElement("列表2");
model.addElement("列表3");
model.addElement("列表4");
JList<String> s = new JList<>(model);
如图:
一个图片的JList
ImageIcon u = new ImageIcon(this.getClass().getResource("卡通.jpg"));
u.setImage( u.getImage().getScaledInstance(50, 50, Image.SCALE_DEFAULT));
DefaultListModel<ImageIcon> model=new DefaultListModel<>();
model.addElement(u);
model.addElement(u);
model.addElement(u);
model.addElement(u);
JList<ImageIcon> list = new JList<>(model);
怎么实现一个又有图片又有文字的JList呢?
首先认识一下,JList的几个重要部分:
1.ListModel列表模型,用于获取列表中每个单元格的值以及列表的长度,
我们可以通过继承AbstractListModel类,来写自己的JList列表;AbstractListModel类继承了实现了ListModel接口,并且实现了序列化,
2.ListCellRenderer :单元渲染器。
要想使列表添加图片,那么我们就需要去自己实现这个ListCellRenderer 这个接口;
在默认的单元渲染器中,返回的是一个JLable,也就是把一个JLable放入JList中的列表中,作为它的每一个项目;
从JList默认的单元渲染器中我们可以看出JAVA自带的JList不能够同时实现文字以及图片。所以如果要实现一个既有文字又有图片的JList的话,那我们就需要去自己实现单元渲染器;
自定义JLIst列表
1.自定义ListModel列表模型:
public class FriListModel extends AbstractListModel {
ArrayList<User> uArray;//好友类表;
public FriListModel(ArrayList<User> uArray){
this.uArray=uArray;
}
@Override
public int getSize() {
return uArray.size();
}
@Override
public Object getElementAt(int index) {
return uArray.get(index) ;
}
}
2.自定义单元渲染器
@SuppressWarnings({ "rawtypes", "serial" })
public class FriListCellRenderer extends JLabel implements ListCellRenderer {
@Override
public Component getListCellRendererComponent(JList list, Object value, int index, boolean isSelected,
boolean cellHasFocus) {
User user=(User)value;//把数据转换为user对象, 在AbstractListModel中传过来的是一个user对象;
/*******设置JLable的文字******/
String text="<html>"+user.name+"<br/>"+user.motto+" <html/>";
setText(text);//设置JLable的文字
/*******设置JLable的图片*****/
// 得到此图标的 Image,然后创建此图像的缩放版本。
Image img=user.u.getImage().getScaledInstance(50, 50, Image.SCALE_DEFAULT);
setIcon(new ImageIcon(img));//设置JLable的图片
setIconTextGap(30);//设置JLable的图片与文字之间的距离
return this;
}
}
为了能够图片的同比例缩放对于图片进行了修改,是他能够匹配JList的大小;
图片的缩放方法:
Image img = image.getImage(); //得到此图标的 Image(image.getImage())
img = img.getScaledInstance(width, height, Image.SCALE_DEFAULT);
// 创建此图像的缩放版本。
image.setImage(img);//该图像就设置为得到的缩放版本
this.image=image;
然后为了使JList中的文字能够换行用了HTML格式来设置JLable的text;
3.构建JList
//*创建一个Jlist,显示好友类表**/
FriListModel buddy = new FriListModel(uArray);
@SuppressWarnings("rawtypes")
JList buddyList = new JList(buddy);
//设置单元渲染器
buddyList.setCellRenderer(new FriListCellRenderer());
buddyList.setFont(new Font(Font.SERIF, Font.PLAIN, 18));
buddyList.setPreferredSize(new Dimension(360, 350));
/*********给好友列表添加滚动条**************/
JScrollPane jp = new JScrollPane(buddyList);
jp.setPreferredSize(new Dimension(360, 400));
jpanel.add(jp);
这样一个带图片的文字的JList就做好了
最后,来看一看效果: