很多时候,由于手机屏幕太小,一下子显示不了那么多内容,这个时候就需要通过按键一点一点的显示下面的内容(相当于浏览器中的滚动条的功能)。我做了一个类,能够一点一点的显示内容。其实就是个容器,把内容统统放在容器中,计算全部内容的高度,计算每屏显示的高,每次移动的高度,需要移动的总次数,通过这些量就能确定滚动情况了。
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);
}
}
}
注意图最右边的滚动条了吗?:)。滚动条颜色大小啊什么的需要自己根据实际情况“改装”,我这个是最简单的画法了,呵呵。