欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaMe开发自适应滚动显示

程序员文章站 2024-03-05 22:00:19
【问题描述】 我们常看到一些滚动显示的实例,比如uc浏览器中,显示网页的内容。当内容比较多时,采用滚动分页显示是合理的。在canvas中绘图中,多余的内容被截断了。如何实...

【问题描述】

我们常看到一些滚动显示的实例,比如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所示:

 JavaMe开发自适应滚动显示

图 滚动显示效果