JavaMe开发:自适应滚动显示
2023-03-14 22:46:50 时间
【问题描述】
我们常看到一些滚动显示的实例,比如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 滚动分页显示; "
- +"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 滚动分页显示; ";
- 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设计模式,此处不再赘述。
#p#
【分析】
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所示:
图1 滚动显示效果
原文链接:http://blog.csdn.net/tandesir/article/details/7548518
【系列文章】
相关文章
- Java基础语法
- 实战:第四章:java后端日志埋点实现
- java环境配置 | cmd命令 java正常,javac不是内部或外部命令
- Java的学习笔记(01)准备
- Java的学习笔记(02)基础
- Java的学习笔记(03)控制流程
- Java的学习笔记(04)方法
- Java的学习笔记(05)数组
- Java的学习笔记(06)对象 一
- Java的学习笔记(07)对象 二
- Java的学习笔记(08)对象 三
- Java的学习笔记(09)对象 四
- Java的学习笔记(10)对象 五
- Java的学习笔记(11)对象 六
- Java的学习笔记(12)对象 七
- Java的学习笔记(13)对象 八
- Java的学习笔记(14)对象 九
- Java的学习笔记(15)对象 十
- Java的学习笔记(16)异常处理
- vivo官网App模块化开发方案-ModularDevTool