ListField Contains rows of selectable list items. A ListField uses a class that implements the ListFieldCallback interface to perform drawing tasks. A ListField must register a class that implements the ListFieldCallback interface using the setCallback method before the class can be used. After registration, when a ListField must display an item in its list, it invokes the appropriate methods of the registered callback class.
My post will answer all your questions:
- How do I customize my list field with multiple fields?
- How do I listen for click and move to another screen?
- How to customize the font of list field items?
The sample here will gives the screen as shows in the picture given here.
I have used this following set of static String to demonstrate the usages of my custom list field class. Here the first step is to create a CustomListField field object and then pass the required param.
Bitmap listThumb = Bitmap.getBitmapResource("thumb_icon.png");
String listTitle="Headline";
String listDesc = "Mobile news feeds & mobile buzz";
String listDesc2 = " Update yourself keep learning and have fun";
Bitmap navBar = Bitmap.getBitmapResource("next_arrow.png");
Vector v = new Vector();
for(int i=0; i
v.addElement(new ListRander(listThumb, listTitle, listDesc,listDesc2, navBar));
}
CustomListField myListView = new CustomListField(v){
protected boolean trackwheelClick (int status, int time) {
Dialog.alert(" You have selected :" + getSelectedIndex());
return super.trackwheelClick(status, time);
}
}
;
add(myListView);
Now you got to include the CustomListField class
public class CustomListField extends ListField implements ListFieldCallback {
private Vector _listData;
private int _MAX_ROW_HEIGHT = 60;
public CustomListField (Vector data) {
_listData = data;
setSize(_listData.size());
setSearchable(true);
setCallback(this);
setRowHeight(_MAX_ROW_HEIGHT);
}
protected void drawFocus (Graphics graphics, boolean on) {
XYRect rect = new XYRect();
graphics.setGlobalAlpha(150);
graphics.setColor(Color.BLUE);
getFocusRect(rect);
drawHighlightRegion(graphics,HIGHLIGHT_FOCUS,true,rect.x,rect.y,rect.width,rect.height);
}
public int moveFocus (int amount, int status, int time) {
this.invalidate(this.getSelectedIndex());
return super.moveFocus(amount, status, time);
}
public void onFocus (int direction) {
super.onFocus(direction);
}
protected void onUnFocus () {
this.invalidate(this.getSelectedIndex());
}
public void refresh () {
this.getManager().invalidate();
}
public void drawListRow (ListField listField, Graphics graphics, int index, int y, int w) {
ListRander listRander = (ListRander)_listData.elementAt(index);
graphics.setGlobalAlpha(255);
graphics.setFont(Font.getDefault().getFontFamily().getFont(Font.PLAIN, 24));
final int margin =5;
final Bitmap thumb= listRander.getListThumb();
final String listHeading = listRander.getListTitle();
final String listDesc= listRander.getListDesc();
final String listDesc2= listRander.getListDesc2();
final Bitmap nevBar = listRander.getNavBar();
//list border
graphics.setColor(Color.GRAY);
graphics.drawRect(0, y, w, _MAX_ROW_HEIGHT);
//thumbnail border & thumbnail image
graphics.setColor(Color.BLACK);
graphics.drawRoundRect(margin-2, y+margin-2,thumb.getWidth()+2, thumb.getHeight()+2, 5, 5);
graphics.drawBitmap(margin, y+margin, thumb.getWidth(), thumb.getHeight(), thumb, 0, 0);
//drawing texts
graphics.setFont(FontGroup.fontBold);
graphics.drawText(listHeading, 2*margin+thumb.getWidth(), y+margin);
graphics.setColor(Color.GRAY);
graphics.setFont(FontGroup.smallFont);
graphics.drawText(listDesc, 2*margin+thumb.getWidth(), y+ margin+20);
graphics.drawText(listDesc2, 2*margin+thumb.getWidth(), y+ margin+32);
//draw navigation button
final int navBarPosY = y+(_MAX_ROW_HEIGHT/2 - nevBar.getHeight()/2);
final int navBarPosX = Graphics.getScreenWidth()- nevBar.getWidth()+ margin;
graphics.drawBitmap(navBarPosX, navBarPosY, nevBar.getWidth(), nevBar.getHeight(), nevBar, 0 , 0);
}
public Object get(ListField listField, int index) {
String rowString = (String) _listData.elementAt(index);
return rowString;
}
public int indexOfList (ListField listField, String prefix, int start) {
for (Enumeration e = _listData.elements(); e.hasMoreElements(); ) {
String rowString = (String) e.nextElement();
if (rowString.startsWith(prefix)) {
return _listData.indexOf(rowString);
}
}
return 0;
}
public int getPreferredWidth(ListField listField) {
return 3 * listField.getRowHeight();
}
}
Here, in order to make the changes depending on the list items that we are rendering, I have declared a bean class to make my life easy.
public class ListRander {
private Bitmap listThumb= null;
private Bitmap navBar = null;
private String listTitle=null;
private String listDesc= null;
private String listDesc2= null;
public ListRander(Bitmap listThumb,String listTitle, String listDesc, String listDesc2, Bitmap navBar) {
this.listDesc = listDesc;
this.listDesc2 = listDesc2;
this.listThumb = listThumb;
this.listTitle = listTitle;
this.navBar = navBar;
}
public Bitmap getListThumb() {
return listThumb;
}
public void setListThumb(Bitmap listThumb) {
this.listThumb = listThumb;
}
public Bitmap getNavBar() {
return navBar;
}
public void setNavBar(Bitmap navBar) {
this.navBar = navBar;
}
public String getListTitle() {
return listTitle;
}
public void setListTitle(String listTitle) {
this.listTitle = listTitle;
}
public String getListDesc() {
return listDesc;
}
public void setListDesc(String listDesc) {
this.listDesc = listDesc;
}
public String getListDesc2() {
return listDesc2;
}
public void setListDesc2(String listDesc2) {
this.listDesc2 = listDesc2;
}
}
