JavaMe開發(fā)自適應(yīng)滾動顯示
【問題描述】
我們常看到一些滾動顯示的實例,比如UC瀏覽器中,顯示網(wǎng)頁的內(nèi)容。當(dāng)內(nèi)容比較多時,采用滾動分頁顯示是合理的。在Canvas中繪圖中,多余的內(nèi)容被截斷了。如何實現(xiàn)滾動分頁顯示呢?
【原理】
JavaMe中有一個坐標(biāo)變換的功能。當(dāng)觸發(fā)相應(yīng)的按鍵事件時,我們就讓其顯示相應(yīng)的頁,并且使?jié)L動條滾動到相應(yīng)的位置。
【代碼清單】
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設(shè)計模式,此處不再贅述。
【分析】
1 字符串拆分
String info_wrap1[] = StringDealMethod.format(info, width-15, ft);
具體請參考JavaMe連載(4)-繪制可自動換行文本
2 避免字截斷
如何在指定的區(qū)域內(nèi)繪制整行文本,而不會因為字體或屏幕高度的改變使文本出現(xiàn)截斷的問題,使文本出現(xiàn)“半截字”的問題呢?
bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();
經(jīng)過上述處理后,滾動區(qū)域的高度bodyHeight總會是字體高度的整數(shù)倍,這樣就不會出現(xiàn)上述字截斷的問題了。
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 坐標(biāo)變換
graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight); graphics.translate(0, dir*currentPageIndex*bodyHeight);
文本繪制完成后,將坐標(biāo)變換回來。
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 事件處理
當(dāng)檢測到按鍵事件后,進行翻頁操作。
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;
}
}
}
本例方法能自適應(yīng)的檢測屏幕的寬度和長度,依據(jù)字體的大小,對文本進行分頁,滾動顯示,實現(xiàn)效果如圖1所示:

圖 滾動顯示效果
- Javascript實現(xiàn)的分頁函數(shù)
- Javascript實現(xiàn)的分頁函數(shù)
- javascript+xml技術(shù)實現(xiàn)分頁瀏覽
- javascript 支持頁碼格式的分頁類
- javascript 新聞標(biāo)題靜態(tài)分頁代碼 (無刷新)
- Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動實現(xiàn)代碼
- javascript分頁代碼(當(dāng)前頁碼居中)
- Java(基于Struts2) 分頁實現(xiàn)代碼
- java調(diào)用oracle分頁存儲過程示例
- Java web velocity分頁宏示例
- javascript實現(xiàn)簡單的分頁特效
- 純javascript實現(xiàn)分頁(兩種方法)
- JavaMe開發(fā)繪制可自動換行文本
- JavaMe開發(fā)繪制文本框TextEdit
相關(guān)文章
使用resty Quartz執(zhí)行定時任務(wù)的配置方法
這篇文章主要為大家介紹了使用resty?Quartz來執(zhí)行定時任務(wù)的配置方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步2022-03-03
Java生成的隨機數(shù)靠譜嗎?多少次會重復(fù)?
今天給大家?guī)淼氖顷P(guān)于Java的相關(guān)知識,文章圍繞著Java生成的隨機數(shù)靠不靠譜展開,文中有非常詳細的介紹,需要的朋友可以參考下2021-06-06
spring MVC + bootstrap實現(xiàn)文件上傳示例(帶進度條)
本篇文章主要介紹了spring MVC + bootstrap實現(xiàn)文件上傳示例(帶進度條),非常具有使用價值,有需要的朋友可以了解一下。2017-03-03
img 加載網(wǎng)絡(luò)圖片失敗 顯示默認圖片的方法
下面小編就為大家?guī)硪黄猧mg 加載網(wǎng)絡(luò)圖片失敗 顯示默認圖片的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Java+Swing實現(xiàn)經(jīng)典五子棋游戲
五子棋是世界智力運動會競技項目之一,是一種兩人對弈的純策略型棋類游戲,是世界智力運動會競技項目之一。本文將采用Java Swing實現(xiàn)這一經(jīng)典游戲,需要的可以參考一下2022-01-01

