当显示内容过多时的滚屏类Container.java

很多时候，由于手机屏幕太小，一下子显示不了那么多内容，这个时候就需要通过按键一点一点的显示下面的内容（相当于浏览器中的滚动条的功能）。我做了一个类，能够一点一点的显示内容。其实就是个容器，把内容统统放在容器中，计算全部内容的高度，计算每屏显示的高，每次移动的高度，需要移动的总次数，通过这些量就能确定滚动情况了。
PS：我讨厌C/S架构的程序，原因就是很多问题都要自己去考虑，比如滚动条、文字换行啊什么的。而B/S架构就不需要考虑这种“低级问题”，浏览器帮我们解决了。

import javax.microedition.lcdui.Graphics;
import com.tlt.util.Consts;
import com.tlt.view.CommonObject;

public class Container extends CommonObject {

	int maxHeight;//内容总高度
	int pageHeight;//每屏显示的高
	int deltaY;//每次移动的高度
	int count;//需要移动的总次数
	int index;//当前移动的次数
	
	int offsetY;//向上移动的高度，那么y-offsetY就是开始画的地方
	public Container(int maxHeight,int pageHeight,int deltaY){
		this.maxHeight=maxHeight;
		this.pageHeight=pageHeight;
		this.deltaY=deltaY;
		count=(maxHeight-pageHeight)/deltaY+1;
	}
	public void close() {
		// TODO Auto-generated method stub

	}

	public void init() {
		// TODO Auto-generated method stub

	}

	public void keyPressed(int keyCode) {
		// TODO Auto-generated method stub
		switch (keyCode) {
		case Consts.KEY_UP:
			if (index > 0) {
				index--;
			}
			break;
		case Consts.KEY_DOWN:
			if (index <count) {
				index++;
			}
			break;
		}
	}

	public void keyReleased(int keyCode) {
		// TODO Auto-generated method stub

	}

	public void paint(Graphics g) {
		// TODO Auto-generated method stub

	}

	public void run() {
		// TODO Auto-generated method stub

	}
	
	public int getMaxHeight() {
		return maxHeight;
	}
	public int getPageHeight() {
		return pageHeight;
	}
	public int getDeltaY() {
		return deltaY;
	}
	public int getCount() {
		return count;
	}
	public int getIndex() {
		return index;
	}

	public int getOffsetY(){
		return index*deltaY;
	}
}

如何使用？看下面

import javax.microedition.lcdui.Graphics;
import com.tlt.util.Consts;
import com.tlt.util.Util;
import com.tlt.view.item.Container;

public class HelpPage extends CommonObject {
	AppCanvas appCanvas;
	String content;
	String[] contents=null;
	int x=5;
	int fontHeight=20;
	int y;//显示的位置
	Container container;
	public HelpPage(AppCanvas appCanvas){
		this.appCanvas=appCanvas;
	}
	public void close() {
		// TODO Auto-generated method stub
		contents=null;
		content=null;
		container=null;
	}

	public void init() {
		// TODO Auto-generated method stub
		y=titleHeight;
		content="尊敬的用户,唐路手机彩票网（wap.5bingo.cn） 与唐路彩票网（www.5bingo.cn）投注是同步统一 的, 网站现有用户直接凭用户名和密码登录即可投注, 新用户请按照以下步骤进行投注：" +
				"|第1步:免费注册成为会员! 并请牢记您的用户名、密码！" +
				"|第2步:充值！您可以使用支付宝和 财付通手机WAP支付方式充值,也可电脑登录唐路彩票网（www.5bingo.cn） 输入用户名和密码登录后选择网银充值！" +
				"|第3步:开始投注!登录唐路手机彩票网（wap.5bingo.cn）选择彩种依流程投注！" ;
		contents=Util.splitString(content, Consts.small_font, Consts.SCREEN_WIDTH-2*x);
		container=new Container(fontHeight*contents.length,Consts.SCREEN_HEIGHT-2*titleHeight,fontHeight);//这里需要注意！！！
	}

	public void keyPressed(int keyCode) {
		// TODO Auto-generated method stub
		container.keyPressed(keyCode);//这里需要注意！！！
		switch (keyCode) {
		case Consts.KEY_LS:
		case Consts.KEY_OK:
			break;
		case Consts.KEY_RS:
			appCanvas.setST(Consts.ST_SUBMENU);
			break;
		case Consts.KEY_UP:
			break;
		case Consts.KEY_DOWN:
			break;
		}
	}

	public void keyReleased(int keyCode) {
		// TODO Auto-generated method stub

	}
	
	public void paint(Graphics g) {
		// TODO Auto-generated method stub
		int offsetY=container.getOffsetY();//这里需要注意！！！
		drawContent(g,x,y-offsetY,contents);//一般都是y-offsetY
		
		super.drawTopBar(g,0,0,Consts.title);
		super.drawButtomBar(g,0,Consts.SCREEN_HEIGHT-titleHeight,new String[]{"","返回"});
		
	}

	public void run() {
		// TODO Auto-generated method stub

	}
	
	private void drawContent(Graphics g,int x, int y,String[] contents){
		g.setColor(0xffffff);
		for(int i=0;i<contents.length;i++){
			g.drawString(contents[i], x, y+i*fontHeight, Graphics.LEFT|Graphics.TOP);
		}
		
	}

}

只要注意3个地方就可以了。构造函数中需要告诉它内容总高度是多少，每屏显示的高是多少，每按键一次移动的高度是多少，通过这3个参数就能确定滚动情况了。
还有就是在keyPressed和paint中注意调用它的两个方法。


当然在内容过长时，旁边加个滚动条就更好了，改一下Container的paint()方法就可以了。
另外这里显示的都是文字，并且循环了for(int i=0;i<contents.length;i++)很多次，当然没这个必要，万一碰到有图有文字的时候此类也可以用，不过可能需要在container.keyPressed(keyCode);上加些条件罢了。


下面是添加了滚动条之后的类，注意构造函数多了一个变量，用于表示滚动条从哪里开始画：

import javax.microedition.lcdui.Graphics;
import com.tlt.util.Consts;
import com.tlt.view.CommonObject;

public class Container extends CommonObject {

	int maxHeight;//内容总高度
	int pageHeight;//每屏显示的高
	int deltaY;//每次移动的高度
	int count;//需要移动的总次数
	int index;//当前移动的次数
	
	int offsetY;//向上移动的高度，那么y-offsetY就是开始画的地方
	int y;//开始画滚动条的y坐标
	public Container(int maxHeight,int pageHeight,int deltaY,int y){
		this.maxHeight=maxHeight;
		this.pageHeight=pageHeight;
		this.deltaY=deltaY;
		count=(maxHeight-pageHeight)/deltaY+1;
		this.y=y;
	}
	public void close() {
		// TODO Auto-generated method stub

	}

	public void init() {
		// TODO Auto-generated method stub

	}

	public void keyPressed(int keyCode) {
		// TODO Auto-generated method stub
		switch (keyCode) {
		case Consts.KEY_UP:
			if (index > 0) {
				index--;
			}
			break;
		case Consts.KEY_DOWN:
			if (index <count) {
				index++;
			}
			break;
		}
	}

	public void keyReleased(int keyCode) {
		// TODO Auto-generated method stub

	}

	public void paint(Graphics g) {
		// TODO Auto-generated method stub
		drawScrollBar(g);
	}

	public void run() {
		// TODO Auto-generated method stub

	}
	public void drawScrollBar(Graphics g){
		if(count>0){//内容过长才需要有滚动条
			int w=2;//滚动条宽，2个像素
			int h;
			if(pageHeight%count==0){//修正误差
				h=pageHeight/(count+1);
			}else{
				h=pageHeight/(count+1)+1;
			}
			g.setColor(0x555555);
			g.fillRect(Consts.SCREEN_WIDTH-w, y, w, pageHeight);
			g.setColor(0xcccccc);
			g.fillRect(Consts.SCREEN_WIDTH-w, y+index*h, w, h);
		}
		
	}
	public int getMaxHeight() {
		return maxHeight;
	}
	public int getPageHeight() {
		return pageHeight;
	}
	public int getDeltaY() {
		return deltaY;
	}
	public int getCount() {
		return count;
	}
	public int getIndex() {
		return index;
	}

	public int getOffsetY(){
		return index*deltaY;
	}
}

加了滚动条之后的page：

import javax.microedition.lcdui.Graphics;
import com.tlt.util.Consts;
import com.tlt.util.Util;
import com.tlt.view.item.Container;

public class HelpPage extends CommonObject {
	AppCanvas appCanvas;
	String content;
	String[] contents=null;
	int x=5;
	int fontHeight=20;
	int y;//显示的位置
	Container container;
	public HelpPage(AppCanvas appCanvas){
		this.appCanvas=appCanvas;
	}
	public void close() {
		// TODO Auto-generated method stub
		contents=null;
		content=null;
		container=null;
	}

	public void init() {
		// TODO Auto-generated method stub
		y=titleHeight;
		content="尊敬的用户,唐路手机彩票网（wap.5bingo.cn） 与唐路彩票网（www.5bingo.cn）投注是同步统一 的, 网站现有用户直接凭用户名和密码登录即可投注, 新用户请按照以下步骤进行投注：" +
		"|第1步:免费注册成为会员! 并请牢记您的用户名、密码！" +
		"|第2步:充值！您可以使用支付宝和 财付通手机WAP支付方式充值,也可电脑登录唐路彩票网（www.5bingo.cn） 输入用户名和密码登录后选择网银充值！" +
		"|第3步:开始投注!登录唐路手机彩票网（wap.5bingo.cn）选择彩种依流程投注！" ;
				
		contents=Util.splitString(content, Consts.small_font, Consts.SCREEN_WIDTH-2*x);
//		container=new Container(fontHeight*contents.length,Consts.SCREEN_HEIGHT-2*titleHeight,fontHeight);
		container=new Container(fontHeight*contents.length,Consts.SCREEN_HEIGHT-2*titleHeight,fontHeight,y);//注意加了y参数，滚动条从titleHeight开始画
	}

	public void keyPressed(int keyCode) {
		// TODO Auto-generated method stub
		container.keyPressed(keyCode);
		switch (keyCode) {
		case Consts.KEY_LS:
		case Consts.KEY_OK:
			break;
		case Consts.KEY_RS:
			appCanvas.setST(Consts.ST_SUBMENU);
			break;
		case Consts.KEY_UP:
			break;
		case Consts.KEY_DOWN:
			break;
		}
	}

	public void keyReleased(int keyCode) {
		// TODO Auto-generated method stub

	}
	
	public void paint(Graphics g) {
		// TODO Auto-generated method stub
		int offsetY=container.getOffsetY();
		drawContent(g,x,y-offsetY,contents);
		
		container.paint(g);//别忘了画滚动条
		super.drawTopBar(g,0,0,Consts.title);
		super.drawButtomBar(g,0,Consts.SCREEN_HEIGHT-titleHeight,new String[]{"","返回"});
		
	}

	public void run() {
		// TODO Auto-generated method stub

	}
	
	private void drawContent(Graphics g,int x, int y,String[] contents){
		g.setColor(0xffffff);
		for(int i=0;i<contents.length;i++){
			g.drawString(contents[i], x, y+i*fontHeight, Graphics.LEFT|Graphics.TOP);
		}
		
	}

}

注意图最右边的滚动条了吗？：）。滚动条颜色大小啊什么的需要自己根据实际情况“改装”，我这个是最简单的画法了，呵呵。