ListBox控件的用法，创建一个xml，代码如下:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
<useControls filename="nifty-default-controls.xml"/>
<useStyles filename="nifty-default-styles.xml"/>
<screen id="ListBoxScreen" controller="mygame.appState.ListBox01AppState">
<layer id="ListBoxLayer" childLayout="absolute">
<control name="listBox" id="myListBox" childLayout="overlay" horizontal="optional" width="612px" x="104" y="163" valign="center" vertical="optional" align="center" selectionMode="Single" displayItems="5" height="244px"/>
</layer>
</screen>
</nifty>
Java控制器，代码如下：
/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ package mygame.appState; import com.jme3.app.Application; import com.jme3.app.SimpleApplication; import com.jme3.app.state.BaseAppState; import com.jme3.niftygui.NiftyJmeDisplay; import de.lessvoid.nifty.Nifty; import de.lessvoid.nifty.NiftyEventSubscriber; import de.lessvoid.nifty.controls.ListBox; import de.lessvoid.nifty.controls.ListBoxSelectionChangedEvent; import de.lessvoid.nifty.render.batch.BatchRenderConfiguration; import de.lessvoid.nifty.screen.Screen; import de.lessvoid.nifty.screen.ScreenController; import java.util.List; /** * * @author JhonKkk */ public class ListBox01AppState extends BaseAppState implements ScreenController{ private Nifty nifty; private NiftyJmeDisplay niftyDisplay; public class JustAnExampleModelClass { private String label; public JustAnExampleModelClass(final String label) { this.label = label; } public String toString() { return label; // we could really use anything in here, the name of the sword or something ;-) } } @Override protected void initialize(Application app) { SimpleApplication simpleApplication = (SimpleApplication) app; BatchRenderConfiguration config = new BatchRenderConfiguration(); config.atlasWidth = 1024; config.atlasHeight = 1024; config.fillRemovedImagesInAtlas = false; config.disposeImagesBetweenScreens = false; config.useHighQualityTextures = true; niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay( simpleApplication.getAssetManager(), simpleApplication.getInputManager(), simpleApplication.getAudioRenderer(), simpleApplication.getGuiViewPort(),config); nifty = niftyDisplay.getNifty(); nifty.enableAutoScaling(800, 600); nifty.fromXml("Interface/ListBox01.xml", "ListBoxScreen", this); simpleApplication.getGuiViewPort().addProcessor(niftyDisplay); } @Override protected void cleanup(Application app) { } @Override protected void onEnable() { } @Override protected void onDisable() { } @Override public void bind(Nifty nifty, Screen screen) { // ListBox listBox = screen.findNiftyControl("myListBox", ListBox.class); // listBox.addItem("a"); // listBox.addItem("b"); // listBox.addItem("c"); ListBox<JustAnExampleModelClass> listBox = (ListBox<JustAnExampleModelClass>) screen.findNiftyControl("myListBox", ListBox.class); listBox.addItem(new JustAnExampleModelClass("You can add more lines to this ListBox.")); listBox.addItem(new JustAnExampleModelClass("Use the append button to do this.")); } @NiftyEventSubscriber(id="myListBox") public void onMyListBoxSelectionChanged(final String id, final ListBoxSelectionChangedEvent<JustAnExampleModelClass> event) { List<JustAnExampleModelClass> selection = event.getSelection(); for (JustAnExampleModelClass selectedItem : selection) { System.out.println("listbox selection [" + selectedItem.label + "]"); } } @Override public void onStartScreen() { } @Override public void onEndScreen() { } }
其中@NiftyEventSubscriber(id="myListBox")注解方法onMyListBoxSelectionChanged在每次listBox发生事件时回调,然后我们在方法里获取当前选择项并打印。
注意，该注解并非监听onSelect或onCheck事件，而是监听事件发生。
如图:
如果需要改变ListBox的字体，需要通过修改ListBox的Style来实现，通过研读默认的Style，可以发现ListBox使用默认的NiftyLabel作为Item，而默认的NiftyLabel又使用了默认的字体。所以我们只需要改变ListBox的Style，甚至可以通过Style修改用其他控件作为ListBox的Item。
默认的Style文件:
<?xml version="1.0" encoding="UTF-8"?> <nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui"> <style id="nifty-listbox"> <attributes/> </style> <style id="nifty-listbox#scrollpanel"> <attributes focusable="true" padding="1px"/> <effect overlay="true"> <onActive name="colorBar" color="#666f" post="false" neverStopRendering="true" timeType="infinite"/> <onActive name="border" border="1px" color="#222f" inset="1px,0px,0px,1px"/> <onFocus name="border" border="1px" color="#f006"/> <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="false" length="150"/> <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="false" length="150"/> </effect> </style> <style id="nifty-listbox#bottom-right"> <attributes width="23px" height="23px"/> </style> <style id="nifty-listbox-item" base="nifty-label"> <attributes color="#000f" width="100%" align="left" textVAlign="center" textHAlign="left"/> <interact onClick="listBoxItemClicked()"/> <effect> <onCustom customKey="focus" name="colorBar" post="false" color="#444f" neverStopRendering="true" timeType="infinite"/> <onCustom customKey="select" name="colorBar" post="false" color="#444f" neverStopRendering="true" timeType="infinite"/> <onCustom customKey="select" name="textColor" post="false" color="#fc0f" neverStopRendering="true" timeType="infinite"/> <onHover name="colorBar" color="#444f" post="false" neverStopRendering="true" timeType="infinite" inset="1px"/> <onClick name="focus" targetElement="#parent#parent"/> </effect> </style> </nifty-styles>
其中<style id="nifty-listbox-item" base="nifty-label">表明了ListBox默认使用自带的NiftyLabel作为Item，而默认的NiftyLabel使用默认的字体。
自定义Item
通过研读默认的nifty-listbox.xml，我们会发现默认的ListBox的item是一个NiftyLabel。而我们在游戏开发中往往不仅仅局限于显示文本列表。更多的是复杂的图文列表。那么，NiftyGUI是否可以像Android一样，提供自定义List Item的接口呢？答案是肯定的。
具体而言，我们需要了解ListBox如何渲染一个Item，通过Wiki和源码可以简单了解到，ListBox渲染一个Item需要先提供模板控制器，然后每次渲染时通过模板控制器去获取Item并适配相应数据，这个过程其实和Android的RecylerView差不多，在Android里面，使用RecylerView渲染自定义Item，通常，我们可以用一个独立的布局文件来作为Item的模板，然后在java代码里实现适配器，加载对应的布局item，并填充数据。在NiftyGUI里，也是类似的。
第一步，添加一个自定Item，在NiftyGUI中，UI控件分为两大类，一类是NiftyElement（如Layer，Panel等），另一类就是具体的控件类型（如Button，Label等），所以，在NiftyGUI中，添加一个自定义控件，就是一个自定义Control。在SDK中，在Interface目录下创建一个control目录，然后右键新建一个名为ImgLabelItem的Item控制器，如下:
<?xml version="1.0" encoding="UTF-8"?> <nifty-controls xmlns="http://nifty-gui.lessvoid.com/nifty-gui"> <controlDefinition style="img-label-listbox" name="img-label-item"> <panel style="#panel" childLayout="horizontal" width="100%" align="center"> <image id="#icon" width="23px" height="23px" /> <control id="#text" name="label" align="left" style="img-label-listbox-label-item" textHAlign="left" height="23px" width="*" wrap="true" /> </panel> </controlDefinition> </nifty-controls>
分析下这里的代码，首先第一行<nifty-controls>标签定义这是一个nifty控制器(所有具体的ui控件都是一个控制器或element)，这表明我们正在创建一个自定义nifity控件；接下来的<controlDefinition>表明我们的控件定义从这里开始，在controlDefinition标签中，有一个style属性，这个非常重要，我们引用自己定义的img-label-listbox样式，这在接下来介绍，接着name属性指定了这个控件的名称是img-label-item(为何不叫id呢？其实可以这样理解，id是一个具体的实例的标识符，而name表明这是一个类的名称)，以便我们在布局文件中使用这种控件。
接着，我们通过组合基础控件类panel，image，control完成了我们这个自定义控件的内容（panle，image和control这些是基础类型控件，复杂的自定义控件都是通过组合基础类型得到，就像复合数据类型是通过组合各种基础数据类型实现的道理一样）。
panel提供了一个容器，使用id为#panel的样式（这个样式定义在默认的nifty中，你可能会不解，没看到哪里引入了这个样式文件，没错，这里没有引入其他样式文件，因为我们在最后的屏幕布局中才引入默认的nifty style，同样，上面的img-label-listbox是一个自定义样式的id，但是在这个xml中我们并没有看到任何引入样式文件的代码，因为我们统一在最后的屏幕布局中才引入），childLayout指定子对象使用水平布局，width指定为填充100%宽度，而algin指定了panel对齐中心于父控件。
image提供了一个图标控件，id为#icon，width为23像素，height为23像素。
control的name属性表明这个control是一个label-control控件，有一点需要注意，image和panel都是element类型的控件，所以直接用image或panel作为标签名；而label是一个control类型的控件，所以通过control并指定name属性来描述这种控件。style使用id为img-label-listbox-label-item的样式，其他属性不用多说都能理解是什么意思。
自定义控件定义好了，接下来，创建我们的自定义控件的样式文件，如果不创建自定义样式文件，则不存在上面id为img-label-listbox和img-label-listbox-label-item的样式，则只能使用默认的样式（样式必须显式指定，否则渲染会黑屏，但由于复杂控件由基础控件组成，基础控件默认就指定了样式，所以可以忽略style属性，但是controlDefinition必须显式指定样式）。我们在Interface下创建一个styles文件夹，然后添加一个名为img-label-list.xml的空样式文件，如下:
打开样式文件，我们找到默认的nifty的listbox样式文件，具体位置在如下位置:
把里面的内容复制到我们新建的style中，然后进行修改，如下:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui"> 3 4 <style id="img-label-listbox"> 5 <attributes/> 6 </style> 7 <style id="img-label-listbox#scrollpanel"> 8 <attributes focusable="true" padding="1px"/> 9 <effect overlay="true"> 10 <onActive name="colorBar" color="#666f" post="false" neverStopRendering="true" timeType="infinite"/> 11 <onActive name="border" border="1px" color="#222f" inset="1px,0px,0px,1px"/> 12 <onFocus name="border" border="1px" color="#f006"/> 13 <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="false" length="150"/> 14 <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="false" length="150"/> 15 </effect> 16 </style> 17 <style id="img-label-listbox#bottom-right"> 18 <attributes width="23px" height="23px"/> 19 </style> 20 <style id="img-label-listbox-label-item" base="nifty-label"> 21 <attributes color="#000f" width="100%" align="left" textVAlign="center" textHAlign="left"/> 22 <interact onClick="listBoxItemClicked()"/> 23 <effect> 24 <onCustom customKey="focus" name="colorBar" post="false" color="#444f" neverStopRendering="true" 25 timeType="infinite"/> 26 <onCustom customKey="select" name="colorBar" post="false" color="#444f" neverStopRendering="true" 27 timeType="infinite"/> 28 <onCustom customKey="select" name="textColor" post="false" color="#fc0f" neverStopRendering="true" 29 timeType="infinite"/> 30 <onHover name="colorBar" color="#444f" post="false" neverStopRendering="true" timeType="infinite" 31 inset="1px"/> 32 <onClick name="focus" targetElement="#parent#parent"/> 33 </effect> 34 </style> 35 </nifty-styles>
在第4行定义了一个id为img-label-listbox的样式，但这是一个空样式；接着在第7行和第17行定义了img-label-listbox的伪类样式，这才是真正的img-label-listbox的各个项的样式；然后，在第20行定义了一个img-label-listbox#bottom-right样式，通过base属性表明该样式继承自nifty-label样式，说明这是一个为label控件类型定制的样式。我们看看这个样式定义，首先attributes定义了color，width，align等一些属性，然后通过interact标签定义了用户交互响应listBoxItemClicked()函数，这个是函数是默认的listbox控制器内部的函数，建议你直接用这个，因为你自己实现的话需要写适配器，绑定等一系列逻辑；接下来effect标签定义了控件的一些效果，比如鼠标悬浮时(onHover事件)的效果，或者点击时(onClick事件)的效果，另外，也可通过onCustom标签来描述事件，比如将onClick事件改为onCustom描述则是：<onCustom customKey="click"/>，所以，我们通过onCustom标签分别定义了focus事件，select事件发生时，哪些属性产生效果；如<onCustom customKey="focus" name="colorBar".../>定义了当focus事件发生时,属性colorBar产生特效效果，具体效果由后面的post,color,neverStopRendering等参数定义。
现在，我们完成了自定义样式和自定义控件，可以实现我们的listBox的自定义item了，我们创建一个新的名为ImgLabelListBox01的gui文件，然后，代码如下:
1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?> 2 <nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd"> 3 <useControls filename="nifty-default-controls.xml"/> 4 <!--引入自定义控制器--> 5 <useControls filename="Interface/control/ImgLabelItem.xml"/> 6 <useStyles filename="nifty-default-styles.xml"/> 7 <!--引入自定义样式--> 8 <useStyles filename="Interface/styles/img-label-listbox.xml"/> 9 <screen id="ListBoxScreen" controller="mygame.appState.ImgLabelItemListBoxAppState"> 10 <layer id="ListBoxLayer" childLayout="absolute"> 11 <control name="listBox" id="myListBox" childLayout="overlay" horizontal="optional" width="612px" x="104" y="163" valign="center" vertical="optional" align="center" selectionMode="Single" displayItems="5" height="244px" viewConverterClass="mygame.gui.ImgLabelConverter"> 12 <control name="img-label-item" controller="de.lessvoid.nifty.controls.listbox.ListBoxItemController" /> 13 </control> 14 </layer> 15 </screen> 16 </nifty>
这里可以看到，我们在自定义控件中使用的样式（如id为img-listbox的样式），是包含在img-label-listbox.xml这个文件中，我们在gui文件中引入了这个样式文件，然后引入了自定义控制器文件ImgLabelItem.xml。这样，我们的gui文件就可以访问到自定义控件，同时可以访问我们的自定义样式了。
在第11行这里，我们定义了一个id为myListBox的listBox控件，然后添加了一个viewConverterClass="mygame.gui.ImgLabelConverter"属性，这个是item数据适配器对象，是一个我们自定义的item适配器java类，等会我们会介绍；然后，我们在内部定义了一个control标签，这个标签的name属性表明，这个control是一个img-label-item类型的控件，也就是我们自定义的类型为img-label-item的控件。同时指定controller属性，这个值可以写死，它使用默认的控制器类处理控件交互。
接下来实现名称为mygame.gui.ImgLabelConverter的类，代码如下:
1 /* 2 * To change this license header, choose License Headers in Project Properties. 3 * To change this template file, choose Tools | Templates 4 * and open the template in the editor. 5 */ 6 package mygame.gui; 7 8 import de.lessvoid.nifty.controls.ListBox; 9 import de.lessvoid.nifty.elements.Element; 10 import de.lessvoid.nifty.elements.render.ImageRenderer; 11 import de.lessvoid.nifty.elements.render.TextRenderer; 12 13 /** 14 * 15 * @author JhonKkk 16 */ 17 public class ImgLabelConverter implements ListBox.ListBoxViewConverter<ImgLabel>{ 18 private static final String ICON = "#icon"; 19 private static final String TEXT = "#text"; 20 21 /** 22 * Default constructor. 23 */ 24 public ImgLabelConverter() { 25 } 26 27 /** 28 * {@inheritDoc} 29 */ 30 @Override 31 public final void display(final Element listBoxItem, final ImgLabel item) { 32 final Element text = listBoxItem.findElementById(TEXT); 33 final TextRenderer textRenderer = text.getRenderer(TextRenderer.class); 34 final Element icon = listBoxItem.findElementById(ICON); 35 final ImageRenderer iconRenderer = icon.getRenderer(ImageRenderer.class); 36 if (item != null) { 37 textRenderer.setText(item.getLabel()); 38 iconRenderer.setImage(item.getIcon()); 39 } else { 40 textRenderer.setText(""); 41 iconRenderer.setImage(null); 42 } 43 } 44 45 /** 46 * {@inheritDoc} 47 */ 48 @Override 49 public final int getWidth(final Element listBoxItem, final ImgLabel item) { 50 final Element text = listBoxItem.findElementById(TEXT); 51 final TextRenderer textRenderer = text.getRenderer(TextRenderer.class); 52 final Element icon = listBoxItem.findElementById(ICON); 53 final ImageRenderer iconRenderer = icon.getRenderer(ImageRenderer.class); 54 return ((textRenderer.getFont() == null) ? 0 : textRenderer.getFont().getWidth(item.getLabel())) 55 + ((item.getIcon() == null) ? 0 : item.getIcon().getWidth()); 56 } 57 58 }
其中该类继承自ListBoxViewConverter类，这是item适配器父类，实现了两个方法display和getWidth。其中display在每个item被渲染时回调，在这里填入item的数据（就跟Android里的RecerverView适配器一样）；在getWidth返回当前渲染的item的宽度，返回0不可见。
其中ImgLabel是一个javaBean类，代码如下:
1 /* 2 * To change this license header, choose License Headers in Project Properties. 3 * To change this template file, choose Tools | Templates 4 * and open the template in the editor. 5 */ 6 package mygame.gui; 7 8 import de.lessvoid.nifty.render.NiftyImage; 9 10 /** 11 * 12 * @author JhonKkk 13 */ 14 public class ImgLabel { 15 private String label; 16 private NiftyImage icon; 17 18 public ImgLabel(String label, NiftyImage icon) { 19 this.label = label; 20 this.icon = icon; 21 } 22 23 public NiftyImage getIcon() { 24 return icon; 25 } 26 27 public String getLabel() { 28 return label; 29 } 30 31 }
这没啥好说的，就是包含一个label和icon的数据结构。接着，我们创建名为mygame.appState.ImgLabelItemListBoxAppState的gui屏幕控制器类，用于实现最终整合gui的逻辑。如下:
1 /* 2 * To change this license header, choose License Headers in Project Properties. 3 * To change this template file, choose Tools | Templates 4 * and open the template in the editor. 5 */ 6 package mygame.appState; 7 8 import com.jme3.app.Application; 9 import com.jme3.app.SimpleApplication; 10 import com.jme3.app.state.BaseAppState; 11 import com.jme3.niftygui.NiftyJmeDisplay; 12 import de.lessvoid.nifty.Nifty; 13 import de.lessvoid.nifty.NiftyEventSubscriber; 14 import de.lessvoid.nifty.controls.ListBox; 15 import de.lessvoid.nifty.controls.ListBoxSelectionChangedEvent; 16 import de.lessvoid.nifty.render.batch.BatchRenderConfiguration; 17 import de.lessvoid.nifty.screen.Screen; 18 import de.lessvoid.nifty.screen.ScreenController; 19 import java.util.List; 20 import mygame.gui.ImgLabel; 21 22 /** 23 * 24 * @author JhonKkk 25 */ 26 public class ImgLabelItemListBoxAppState extends BaseAppState implements ScreenController{ 27 private Nifty nifty; 28 private NiftyJmeDisplay niftyDisplay; 29 public class JustAnExampleModelClass { 30 private String label; 31 32 public JustAnExampleModelClass(final String label) { 33 this.label = label; 34 } 35 36 public String toString() { 37 return label; // we could really use anything in here, the name of the sword or something ;-) 38 } 39 } 40 @Override 41 protected void initialize(Application app) { 42 SimpleApplication simpleApplication = (SimpleApplication) app; 43 BatchRenderConfiguration config = new BatchRenderConfiguration(); 44 config.atlasWidth = 1024; 45 config.atlasHeight = 1024; 46 config.fillRemovedImagesInAtlas = false; 47 config.disposeImagesBetweenScreens = false; 48 config.useHighQualityTextures = true; 49 niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay( 50 simpleApplication.getAssetManager(), 51 simpleApplication.getInputManager(), 52 simpleApplication.getAudioRenderer(), 53 simpleApplication.getGuiViewPort(),config); 54 nifty = niftyDisplay.getNifty(); 55 nifty.enableAutoScaling(800, 600); 56 nifty.fromXml("Interface/ImgLabelListBox01.xml", "ListBoxScreen", this); 57 simpleApplication.getGuiViewPort().addProcessor(niftyDisplay); 58 } 59 60 @Override 61 protected void cleanup(Application app) { 62 } 63 64 @Override 65 protected void onEnable() { 66 } 67 68 @Override 69 protected void onDisable() { 70 } 71 72 @Override 73 public void bind(Nifty nifty, Screen screen) { 74 ListBox<ImgLabel> listBox = screen.findNiftyControl("myListBox", ListBox.class); 75 listBox.addItem(new ImgLabel("Help", nifty.getRenderEngine().createImage(screen, "Interface/help.png", false))); 76 listBox.addItem(new ImgLabel("Text", nifty.getRenderEngine().createImage(screen, "Interface/help.png", false))); 77 } 78 @NiftyEventSubscriber(id="myListBox") 79 public void onMyListBoxSelectionChanged(final String id, final ListBoxSelectionChangedEvent<ImgLabel> event) { 80 List<ImgLabel> selection = event.getSelection(); 81 for (ImgLabel selectedItem : selection) { 82 System.out.println("listbox selection [" + selectedItem.getLabel() + "]"); 83 } 84 } 85 86 @Override 87 public void onStartScreen() { 88 } 89 90 @Override 91 public void onEndScreen() { 92 } 93 94 }
在bind()函数中初始化数据项目，在onMyListBoxSelectionChanged()方法中，获取选中的item并打印。最终效果如下:
很显然，这就是我们的自定义Item。
总结，一个自定义Item的实现需要以下几个步骤：
1.实现自定义控件布局
2.实现自定义控件样式
3.实现自定义控件Item适配器
需要注意的一点，如果你的自定义Item无法选中，即无法获取选中事件，那么极有可能是你没有为Item定义样式并定义Effect效果，要是一个item能够被选中，必须包含select效果，在这个例子中，是这样的:
1 <onCustom customKey="select" name="colorBar" post="false" color="#444f" neverStopRendering="true" 2 timeType="infinite"/> 3 <onCustom customKey="select" name="textColor" post="false" color="#fc0f" neverStopRendering="true" 4 timeType="infinite"/>
还有一点需要注意，我们仅仅为id为#text控件定义了select效果，所以点击#text控件会有效，但是点击id为#icon的控件仍然无效。