路是爬出來的

統計

隨筆 - 50
文章 - 50
評論 - 2
引用 - 0

常用鏈接

留言簿(1)

隨筆檔案

2006年12月 (50)

文章檔案

2006年12月 (50)

搜索

閱讀排行榜

評論排行榜

設計可組裝的j2me UI(一) 核心部件

最近發現很多朋友在設計j2me程序的時候，在有些關鍵的UI設計都放棄j2me提供的高級UI。而自己通過繼承Canvas，而實現自己想要的效果。游戲的菜單設計一般都是這樣。設計自己的UI是比較困難的，因為自己要控制屏幕的各個元素跟各個元素的低級事件。我想這些不是問題。主要還是很少有教程手把手的教你。小第我經過一個項目，而起這個項目的UI全部是自己實現。所以在這方面算是有點點經驗。所以拿出來給大家分享下。
我的設計思想是這樣的。
1。手機CPU，內存等資源都有限。手機屏幕各個廠商各不相同。
2。手機基本不用考慮，窗口移動，拖動，縮放，重疊，窗口至頂等問題。
3。手機窗口事件不用考慮，拖動，移動，縮放，鼠標等時間。因此問題就相對簡單了。
4：我們只需要實現，UI的顯示跟文字，圖片的排版顯示，已經文字的滾動顯示等。

下面將是一些片段代碼，希望。
首先設計兩個核心的類。
1。Part －－窗口顯示部件。主要是一些可以組裝的組件例如（TextField，TextBox）等

代碼

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;
	}

上面的類不足以顯示，主要是通過下面的類，通過addPart方法添加進去。

代碼

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] );
		}
			
	}

}

以上就是UI的核心，以后我將會逐漸介紹其他的組件跟相關的事件接口。讀者也可以自己實現一些有意思的界面然后測試下，我相信效果會更好

posted on 2006-12-30 09:24 路是爬出來的閱讀(297) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理