JavaMe 编程连载(6) - 自适应滚动显示

【问题描述】

我们常看到一些滚动显示的实例，比如UC浏览器中，显示网页的内容。当内容比较多时，采用滚动分页显示是合理的。在Canvas中绘图中，多余的内容被截断了。如何实现滚动分页显示呢？

 

【原理】

JavaMe中有一个坐标变换的功能。当触发相应的按键事件时，我们就让其显示相应的页，并且使滚动条滚动到相应的位置。

 

【代码清单】

ShowHelp.java

package com.token.view;

import javax.microedition.lcdui.Font;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.game.GameCanvas;

import com.token.util.StringDealMethod;
import com.token.util.UIController;
import com.token.view.components.*;

public class ShowHelp  extends GameCanvas
{
	private UIController controller;
	private Graphics graphics;
	private Font ft;
	private int width;
	private int height;
	
	private Menu menu;
	private Head head;
	private BackGroud backGroud;
	
	private int page = 0;
	private int currentPageIndex = 0;
	private int bodyHeight;
	private int dir = 0;
	 
	public ShowHelp(UIController control)
	 {
		super(false);
		this.controller=control;
		setFullScreenMode(true);
		
		width = getWidth();
		height = getHeight();
		
		menu = new Menu(this);
		head = new Head(this);
		backGroud = new BackGroud(this);
	 }
	
	public void show()
	{
		int margin = 0;
		graphics = getGraphics();
		
		graphics.clipRect(0,0, width, height);
		backGroud.drawBackGroud(this, graphics);  
		head.drawHead(this, graphics, "帮助");
		menu.drawMenu(this, graphics, "","返回");
		//flushGraphics();
		
		ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_BOLD,Font.SIZE_MEDIUM);
		
		String info = "1 滚动分页显示；\n"
				+"2 滚动分页显示；\n"
				+"3 滚动分页显示；\n"
				+"4 滚动分页显示；\n"
				+"5 滚动分页显示；\n"
				+"6 滚动分页显示；\n"
				+"7 滚动分页显示；\n"
				+"8 滚动分页显示；\n"
				+"9 滚动分页显示；\n"
				+"10 滚动分页显示；\n"
				+"11 滚动分页显示；\n"
				+"12 滚动分页显示；\n"
				+"13 滚动分页显示；\n"
				+"14 滚动分页显示；\n"
				+"15 滚动分页显示；\n"
				+"16 滚动分页显示；\n"
				+"17 滚动分页显示；\n"
				+"18 滚动分页显示；\n"
				+"19 滚动分页显示；\n"
				+"20 滚动分页显示；\n"
				+"21 滚动分页显示；\n"
				+"22 滚动分页显示；\n"
				+"23 滚动分页显示；\n"
				+"24 滚动分页显示；\n"
				+"25 滚动分页显示；\n"
				+"26 滚动分页显示；\n"
				+"27 滚动分页显示；\n"
				+"28 滚动分页显示；\n"
				+"29 滚动分页显示；\n"
				+"30 滚动分页显示；\n"
				+"31 滚动分页显示；\n"
				+"32 滚动分页显示；\n"
				+"33 滚动分页显示；\n"
				+"34 滚动分页显示；\n";
				
		String info_wrap1[] = StringDealMethod.format(info, width-15, ft);

		page = info_wrap1.length*ft.getHeight()/(height-head.menuHeight-menu.menuHeight-2*margin)+1;
		bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();
		margin = (height-head.menuHeight-menu.menuHeight-bodyHeight)/2;
		
		graphics.setFont(ft);
		graphics.setColor(Color.text);
		graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight);
		graphics.translate(0, dir*currentPageIndex*bodyHeight);
		
		for(int i=0; i<info_wrap1.length;i++)
		{
			graphics.drawString(info_wrap1[i],5, i * ft.getHeight()+head.menuHeight+margin, Graphics.TOP|Graphics.LEFT);
		}
		
		graphics.translate(0, -dir*currentPageIndex*bodyHeight);
		
		drawScrollBar();
		flushGraphics();
		
		//System.out.println(graphics.getTranslateY());
		
	}
	
	private void drawScrollBar()
	{
		int barHeight = height-head.menuHeight-menu.menuHeight;
		
		graphics.setColor(Color.menuFrame);
		graphics.fillRect(width-3, head.menuHeight, 2, barHeight);
		graphics.setColor(Color.selectBg);
		graphics.fillRect(width-4, head.menuHeight+(currentPageIndex)*barHeight/page, 4, barHeight/page);
	}
	
	protected void keyPressed(int keyCode)
	{
		//System.out.println(keycode);
		switch(keyCode)
		{
			case KeyID.SOFT_RIGHT:
			{
				String flag = "0";
				Object [] args = {flag,""};
				controller.handleEvent(UIController.EventID.EVENT_MAIN_SCREEN,args);
				break;
			}
			default:
					;
		}
		
		keyCode = getGameAction(keyCode);
		//System.out.println(page);
		
		switch(keyCode)
		{
			
			case UP:
			{
				dir = -1;
				
				
				if(currentPageIndex>0)
				{
					currentPageIndex--;
				}
				else 
				{
					//dir = 0;
				}
				
				show();
				break;
				
			}
			case DOWN:
			{
				dir = -1;
				if(currentPageIndex<page-1)
				{
					currentPageIndex++;
				}
				else 
				{	
					//dir = 0;
				}
				
				show();
				break;
			}
		}
	}

}

*UIController请参考JavaMe连载(3)-也说MVC设计模式，此处不再赘述。

 

【分析】

1 字符串拆分

String info_wrap1[] = StringDealMethod.format(info, width-15, ft);

具体请参考JavaMe连载(4)-绘制可自动换行文本

 

2 避免字截断

如何在指定的区域内绘制整行文本，而不会因为字体或屏幕高度的改变使文本出现截断的问题，使文本出现“半截字”的问题呢？

bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();

经过上述处理后，滚动区域的高度bodyHeight总会是字体高度的整数倍，这样就不会出现上述字截断的问题了。

 

3 绘制文本

for(int i=0; i<info_wrap1.length;i++)
{
	graphics.drawString(info_wrap1[i],5, i * ft.getHeight()+head.menuHeight+margin, Graphics.TOP|Graphics.LEFT);
}

 

4 坐标变换

graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight);
graphics.translate(0, dir*currentPageIndex*bodyHeight);

文本绘制完成后，将坐标变换回来。

graphics.translate(0, -dir*currentPageIndex*bodyHeight);

5 绘制滚动条

private void drawScrollBar()
{
	int barHeight = height-head.menuHeight-menu.menuHeight;
	
	graphics.setColor(Color.menuFrame);
	graphics.fillRect(width-3, head.menuHeight, 2, barHeight);
	graphics.setColor(Color.selectBg);
	graphics.fillRect(width-4, head.menuHeight+(currentPageIndex)*barHeight/page, 4, barHeight/page);
}

 

6 事件处理

当检测到按键事件后，进行翻页操作。

protected void keyPressed(int keyCode)
{
	//System.out.println(keycode);
	switch(keyCode)
	{
		case KeyID.SOFT_RIGHT:
		{
			String flag = "0";
			Object [] args = {flag,""};
			controller.handleEvent(UIController.EventID.EVENT_MAIN_SCREEN,args);
			break;
		}
		default:
			;
	}
		
	keyCode = getGameAction(keyCode);
	//System.out.println(page);
		
	switch(keyCode)
	{
		
		case UP:
		{
			dir = -1;
					
				
			if(currentPageIndex>0)
			{
				currentPageIndex--;
			}
			else 
			{
				//dir = 0;
			}
			
			show();
			break;
			
		}
		case DOWN:
		{
			dir = -1;
			if(currentPageIndex<page-1)
			{
				currentPageIndex++;
			}
			else 
			{	
				//dir = 0;
			}
				
			show();
			break;
		}
	}
}

本例方法能自适应的检测屏幕的宽度和长度，依据字体的大小，对文本进行分页，滚动显示，实现效果如图1所示：

图1 滚动显示效果

 

转载请标明出处，仅供学习交流，勿用于商业目的

Copyright @ http://blog.csdn.net/tandesir