JavaMe开发:自适应滚动显示

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

【问题描述】

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

 

【原理】

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

 

【代码清单】

ShowHelp.java

  1. package com.token.view;  
  2.  
  3. import javax.microedition.lcdui.Font;  
  4. import javax.microedition.lcdui.Graphics;  
  5. import javax.microedition.lcdui.game.GameCanvas;  
  6.  
  7. import com.token.util.StringDealMethod;  
  8. import com.token.util.UIController;  
  9. import com.token.view.components.*;  
  10.  
  11. public class ShowHelp  extends GameCanvas  
  12. {  
  13.     private UIController controller;  
  14.     private Graphics graphics;  
  15.     private Font ft;  
  16.     private int width;  
  17.     private int height;  
  18.       
  19.     private Menu menu;  
  20.     private Head head;  
  21.     private BackGroud backGroud;  
  22.       
  23.     private int page = 0;  
  24.     private int currentPageIndex = 0;  
  25.     private int bodyHeight;  
  26.     private int dir = 0;  
  27.        
  28.     public ShowHelp(UIController control)  
  29.      {  
  30.         super(false);  
  31.         this.controller=control;  
  32.         setFullScreenMode(true);  
  33.           
  34.         width = getWidth();  
  35.         height = getHeight();  
  36.           
  37.         menu = new Menu(this);  
  38.         head = new Head(this);  
  39.         backGroud = new BackGroud(this);  
  40.      }  
  41.       
  42.     public void show()  
  43.     {  
  44.         int margin = 0;  
  45.         graphics = getGraphics();  
  46.           
  47.         graphics.clipRect(0,0, width, height);  
  48.         backGroud.drawBackGroud(this, graphics);    
  49.         head.drawHead(this, graphics, "帮助");  
  50.         menu.drawMenu(this, graphics, "","返回");  
  51.         //flushGraphics();  
  52.           
  53.         ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_BOLD,Font.SIZE_MEDIUM);  
  54.           
  55.         String info = "1 滚动分页显示;\n" 
  56.                 +"2 滚动分页显示;\n" 
  57.                 +"3 滚动分页显示;\n" 
  58.                 +"4 滚动分页显示;\n" 
  59.                 +"5 滚动分页显示;\n" 
  60.                 +"6 滚动分页显示;\n" 
  61.                 +"7 滚动分页显示;\n" 
  62.                 +"8 滚动分页显示;\n" 
  63.                 +"9 滚动分页显示;\n" 
  64.                 +"10 滚动分页显示;\n" 
  65.                 +"11 滚动分页显示;\n" 
  66.                 +"12 滚动分页显示;\n" 
  67.                 +"13 滚动分页显示;\n" 
  68.                 +"14 滚动分页显示;\n" 
  69.                 +"15 滚动分页显示;\n" 
  70.                 +"16 滚动分页显示;\n" 
  71.                 +"17 滚动分页显示;\n" 
  72.                 +"18 滚动分页显示;\n" 
  73.                 +"19 滚动分页显示;\n" 
  74.                 +"20 滚动分页显示;\n" 
  75.                 +"21 滚动分页显示;\n" 
  76.                 +"22 滚动分页显示;\n" 
  77.                 +"23 滚动分页显示;\n" 
  78.                 +"24 滚动分页显示;\n" 
  79.                 +"25 滚动分页显示;\n" 
  80.                 +"26 滚动分页显示;\n" 
  81.                 +"27 滚动分页显示;\n" 
  82.                 +"28 滚动分页显示;\n" 
  83.                 +"29 滚动分页显示;\n" 
  84.                 +"30 滚动分页显示;\n" 
  85.                 +"31 滚动分页显示;\n" 
  86.                 +"32 滚动分页显示;\n" 
  87.                 +"33 滚动分页显示;\n" 
  88.                 +"34 滚动分页显示;\n";  
  89.                   
  90.         String info_wrap1[] = StringDealMethod.format(info, width-15, ft);  
  91.  
  92.         page = info_wrap1.length*ft.getHeight()/(height-head.menuHeight-menu.menuHeight-2*margin)+1;  
  93.         bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();  
  94.         margin = (height-head.menuHeight-menu.menuHeight-bodyHeight)/2;  
  95.           
  96.         graphics.setFont(ft);  
  97.         graphics.setColor(Color.text);  
  98.         graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight);  
  99.         graphics.translate(0, dir*currentPageIndex*bodyHeight);  
  100.           
  101.         for(int i=0; i<info_wrap1.length;i++)  
  102.         {  
  103.             graphics.drawString(info_wrap1[i],5, i * ft.getHeight()+head.menuHeight+margin, Graphics.TOP|Graphics.LEFT);  
  104.         }  
  105.           
  106.         graphics.translate(0, -dir*currentPageIndex*bodyHeight);  
  107.           
  108.         drawScrollBar();  
  109.         flushGraphics();  
  110.           
  111.         //System.out.println(graphics.getTranslateY());  
  112.           
  113.     }  
  114.       
  115.     private void drawScrollBar()  
  116.     {  
  117.         int barHeight = height-head.menuHeight-menu.menuHeight;  
  118.           
  119.         graphics.setColor(Color.menuFrame);  
  120.         graphics.fillRect(width-3, head.menuHeight, 2, barHeight);  
  121.         graphics.setColor(Color.selectBg);  
  122.         graphics.fillRect(width-4, head.menuHeight+(currentPageIndex)*barHeight/page, 4, barHeight/page);  
  123.     }  
  124.       
  125.     protected void keyPressed(int keyCode)  
  126.     {  
  127.         //System.out.println(keycode);  
  128.         switch(keyCode)  
  129.         {  
  130.             case KeyID.SOFT_RIGHT:  
  131.             {  
  132.                 String flag = "0";  
  133.                 Object [] args = {flag,""};  
  134.                 controller.handleEvent(UIController.EventID.EVENT_MAIN_SCREEN,args);  
  135.                 break;  
  136.             }  
  137.             default:  
  138.                     ;  
  139.         }  
  140.           
  141.         keyCode = getGameAction(keyCode);  
  142.         //System.out.println(page);  
  143.           
  144.         switch(keyCode)  
  145.         {  
  146.               
  147.             case UP:  
  148.             {  
  149.                 dir = -1;  
  150.                   
  151.                   
  152.                 if(currentPageIndex>0)  
  153.                 {  
  154.                     currentPageIndex--;  
  155.                 }  
  156.                 else   
  157.                 {  
  158.                     //dir = 0;  
  159.                 }  
  160.                   
  161.                 show();  
  162.                 break;  
  163.                   
  164.             }  
  165.             case DOWN:  
  166.             {  
  167.                 dir = -1;  
  168.                 if(currentPageIndex<page-1)  
  169.                 {  
  170.                     currentPageIndex++;  
  171.                 }  
  172.                 else   
  173.                 {     
  174.                     //dir = 0;  
  175.                 }  
  176.                   
  177.                 show();  
  178.                 break;  
  179.             }  
  180.         }  
  181.     }  
  182.  

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

#p#

【分析】

1 字符串拆分

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

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

 

2 避免字截断

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

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

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

3 绘制文本

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

4 坐标变换

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

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

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

5 绘制滚动条

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

6 事件处理

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

  1. protected void keyPressed(int keyCode)  
  2. {  
  3.     //System.out.println(keycode);  
  4.     switch(keyCode)  
  5.     {  
  6.         case KeyID.SOFT_RIGHT:  
  7.         {  
  8.             String flag = "0";  
  9.             Object [] args = {flag,""};  
  10.             controller.handleEvent(UIController.EventID.EVENT_MAIN_SCREEN,args);  
  11.             break;  
  12.         }  
  13.         default:  
  14.             ;  
  15.     }  
  16.           
  17.     keyCode = getGameAction(keyCode);  
  18.     //System.out.println(page);  
  19.           
  20.     switch(keyCode)  
  21.     {  
  22.           
  23.         case UP:  
  24.         {  
  25.             dir = -1;  
  26.                       
  27.                   
  28.             if(currentPageIndex>0)  
  29.             {  
  30.                 currentPageIndex--;  
  31.             }  
  32.             else   
  33.             {  
  34.                 //dir = 0;  
  35.             }  
  36.               
  37.             show();  
  38.             break;  
  39.               
  40.         }  
  41.         case DOWN:  
  42.         {  
  43.             dir = -1;  
  44.             if(currentPageIndex<page-1)  
  45.             {  
  46.                 currentPageIndex++;  
  47.             }  
  48.             else   
  49.             {     
  50.                 //dir = 0;  
  51.             }  
  52.                   
  53.             show();  
  54.             break;  
  55.         }  
  56.     }  
  57. }  

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


图1 滚动显示效果

原文链接:http://blog.csdn.net/tandesir/article/details/7548518

【系列文章】

  1. JavaMe开发:低级界面绘图之点阵字
  2. JavaMe开发:低级界面绘图之菜单
  3. JavaMe开发:也说MVC设计模式
  4. JavaMe开发:绘制可自动换行文本
  5. JavaMe开发:绘制文本框TextEdit
  6. JavaM开发:自适应滚动显示
责任编辑:林师授 来源: tandesir的博客
相关推荐

2017-06-06 10:30:12

前端Web宽度自适应

2013-12-02 17:40:48

系统监控工具Glances

2023-11-16 09:50:56

鸿蒙自适应布局

2010-08-30 09:52:03

DIV高度自适应

2014-09-05 10:10:32

Android自适应布局设计

2010-08-30 10:26:20

DIV自适应高度

2023-07-31 08:24:34

MySQL索引计数

2022-04-12 07:48:57

云技术SDN网络

2023-10-23 08:48:04

CSS宽度标题

2009-04-23 11:24:09

2011-05-12 11:28:20

按比例缩放

2022-10-24 17:57:06

CSS容器查询

2012-05-09 10:35:36

JavaMEJava

2012-05-09 10:09:18

JavaMEJava

2012-05-09 10:03:08

JavaMEJava

2017-08-16 14:08:46

Android O图标视觉

2010-08-26 16:27:46

CSS高度

2014-04-15 13:09:08

Android配色colour

2017-04-13 11:20:37

图片宽度解决方案前端

2012-05-09 09:49:54

JavaMeJava
点赞
收藏

51CTO技术栈公众号