【問題描述】
我們常看到一些滾動顯示的實例，比如UC瀏覽器中，顯示網頁的內容。當內容比較多時，采用滾動分頁顯示是合理的。在Canvas中繪圖中，多余的內容被截斷了。如何實現滾動分頁顯示呢？
【原理】
JavaMe中有一個坐標變換的功能。當觸發相應的按鍵事件時，我們就讓其顯示相應的頁，并且使滾動條滾動到相應的位置。
【代碼清單】
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
ShowHelp.javapackage 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 繪制文本
|
1
2
3
4
|
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 坐標變換
|
1
2
|
graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight); graphics.translate(0, dir*currentPageIndex*bodyHeight); |
文本繪制完成后，將坐標變換回來。
|
1
|
graphics.translate(0, -dir*currentPageIndex*bodyHeight); |
5 繪制滾動條
|
1
2
3
4
5
6
7
8
9
|
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 事件處理
當檢測到按鍵事件后，進行翻頁操作。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
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所示：
圖 滾動顯示效果
