JavaMe开发自适应滚动显示

前端技术 2023/09/07 Java

【问题描述】

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

 

图 滚动显示效果

本文地址：https://www.stayed.cn/item/19507

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案