【问题描述】

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

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

【分析】

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. } 

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);  
9. } 

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