最近发现很多朋友在设计j2me程序的时候，在有些关键的UI设计都放弃j2me提供的高级UI。而自己通过继承Canvas，而实现自己想要的效果。游戏的菜单设计一般都是这样。设计自己的UI是比较困难的，因为自己要控制屏幕的各个元素跟各个元素的低级事件。我想这些不是问题。主要还是很少有教程手把手的教你。小第我经过一个项目，而起这个项目的UI全部是自己实现。所以在这方面算是有点点经验。所以拿出来给大家分享下。
我的设计思想是这样的。
1。手机CPU，内存等资源都有限。手机屏幕各个厂商各不相同。
2。手机基本不用考虑，窗口移动，拖动，缩放，重叠，窗口至顶等问题。
3。手机窗口事件不用考虑，拖动，移动，缩放，鼠标等时间。因此问题就相对简单了。
4：我们只需要实现，UI的显示跟文字，图片的排版显示，已经文字的滚动显示等。
下面将是一些片段代码，希望。
首先设计两个核心的类。
1。Part －－ 窗口显示部件。主要是一些可以组装的组件例如（TextField，TextBox）等
[code]
public abstract class Part {
protected final int X = 0;
protected final int Y = 1;
protected final int WIDTH = 2;
protected final int HEIGHT = 3;
/**
* 位置的显示位置（相对手机屏幕的位置）
*/
protected int view[] = new int[4];
/**
* 背景色
*/
protected int bgColor = 0x000000;
/**
* 字体颜色
*/
protected int fontColor = 0xFFFFFF;
protected int selectIndex;
protected Canvas container;
protected String label;
/** 每个Item都有自己的焦点 **/
protected boolean hasFocus;
protected PartChangeListener partChangeListener;
public Part(int x, int y, int widht, int height) {
view[X] = x;
view[Y] = y;
view[WIDTH] = widht;
view[HEIGHT] = height;
}
public void setStyle(int bgColor, int fontColor) {
this.bgColor = bgColor;
this.fontColor = fontColor;
}
/**
* 默认字体
*/
protected Font font = Font.getDefaultFont();
/**
* 资料实现绘制方法
*
* @param g
*/
public abstract void paint(Graphics g);
/**
* 事件
*
* @param keyCode
*/
public abstract void onClick(int keyCode);
public int getSelectIndex() {
return selectIndex;
}
public void setSelectIndex(int selectIndex) {
this.selectIndex = selectIndex;
}
/**
* 改变部件的位置
*/
public void changePosition(int x, int y, int width, int height){
view[X] = x;
view[Y] = y;
view[WIDTH] = width;
view[HEIGHT] = height;
}
public void setContainer(Canvas container) {
this.container = container;
}
/**
* 聚焦，主要用户当前使用的Part。
* @param hasFocus
*/
public void setHasFocus(boolean hasFocus){
this.hasFocus = hasFocus;
}
public void setPartChangeListener(PartChangeListener partChangeListener) {
this.partChangeListener = partChangeListener;
}
public int[] getView() {
return view;
}[/code]
上面的类不足以显示，主要是通过下面的类，通过addPart方法添加进去。
[code]
public abstract class Panel extends Canvas {
private static Log log = Log.getLog("Panel");
final int X = 0;
final int Y = 1;
final int WIDTH = 2;
final int HEIGHT = 3;
/** 显示主要部分.比如菜单的Icon,List的数据的位置 */
int[] viewContent = new int[4];
Image icon;
Part part;
SoftButton softButton;
Part timer;
public Panel(){
init();
}
public Panel(Image icon) {
init();
this.icon = icon;
//此方法是让所以的Panel都添加一个TimerPart
//以后重构的时候应该�?�虑要不要这么做
//this.setTimer(null);
}
private void init() {
setFullScreenMode(true);
initViewContent();
this.softButton = new SoftButton();
}
public void addCommand(Command cmd) {
if (cmd == null)
return;
softButton.addCommand(cmd);
}
public Part getPart() {
return part;
}
public void append(Part part){
this.part = part;
}
public void setPartChangeListener(PartChangeListener partChangeListener) {
this.part.setPartChangeListener(partChangeListener);
}
public void removeCommand(int type) {
softButton.removeCommand(type);
}
public void setSoftButtonListener(CommandListener cmdListener) {
if (softButton != null)
softButton.setCommandListener(cmdListener);
}
public void setSoftButtonStyle(int bgColor, int fontColor){
this.softButton.setStyle(bgColor, fontColor);
}
public abstract void paint(Graphics g);
protected abstract void keyPressed(int keyCode);
/**
* 长按事件
*/
protected void keyRepeated(int keyCode) {
keyPressed(keyCode);
}
private void initViewContent() {
viewContent[X] = 0;
viewContent[Y] = 45;
viewContent[WIDTH] = Platform.WIDTH;
viewContent[HEIGHT] = Platform.HEIGHT;
}
public SoftButton getSoftButton() {
return softButton;
}
public void setSoftButton(SoftButton softButton) {
this.softButton = softButton;
}
/**
* 增加时间显示
*/
public void setTimer(Part timer){
this.timer = timer;
}
void paintTimerImpl(Graphics g){
if(timer != null)
timer.paint(g);
}
public void repaintTimer(){
if(timer != null){
int [] view = timer.getView();
repaint(view[X],view[Y],view[WIDTH], view[HEIGHT] );
}
}
}
[/code]
以上就是UI的核心，以后我将会逐渐介绍其他的组件跟相关的事件接口。读者也可以自己实现一些有意思的界面然后测试下，我相信效果会更好
