服务器之家：专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|

服务器之家 - 编程语言 - JAVA教程 - JavaMe开发自适应滚动显示

JavaMe开发自适应滚动显示

2020-01-06 14:42lijiao JAVA教程

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

【问题描述】

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

?
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所示：

 JavaMe开发自适应滚动显示

图 滚动显示效果

  • JavaMe开发
  • 自适应滚动

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    501 　 2000 　 闰年 　 Brute 　 Force 　 三角数字 　 Fast 　 Counting 　 考拉兹猜想 　 Collatz 　 Conjecture 　 公式运算 　 朴素字符匹配 　 断点上传 　 判断语句 　 遍历数组 　 异或语句 　 Object类 　 sprng 　 日志类 　 OpenGL 　 ES 　 纹理映射 　 渲染 　 汉诺塔问题 　 Hanoi 　 补白 　 首拼 　 文件选择对话框 　 JFileChooser 　
    © 2019-2020 服务器之家 版权所有 www.zzvips.com 关于我们联系我们版权申明网站地图