JavaMe開發(fā)自適應(yīng)滾動顯示
【問題描述】
我們??吹揭恍L動顯示的實例,比如UC瀏覽器中,顯示網(wǎng)頁的內(nèi)容。當內(nèi)容比較多時,采用滾動分頁顯示是合理的。在Canvas中繪圖中,多余的內(nèi)容被截斷了。如何實現(xiàn)滾動分頁顯示呢?
【原理】
JavaMe中有一個坐標變換的功能。當觸發(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 坐標變換
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; } } }
本例方法能自適應(yīng)的檢測屏幕的寬度和長度,依據(jù)字體的大小,對文本進行分頁,滾動顯示,實現(xiàn)效果如圖1所示:
圖 滾動顯示效果
- Javascript實現(xiàn)的分頁函數(shù)
- Javascript實現(xiàn)的分頁函數(shù)
- javascript+xml技術(shù)實現(xiàn)分頁瀏覽
- javascript 支持頁碼格式的分頁類
- javascript 新聞標題靜態(tài)分頁代碼 (無刷新)
- Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動實現(xiàn)代碼
- javascript分頁代碼(當前頁碼居中)
- 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-03Java生成的隨機數(shù)靠譜嗎?多少次會重復(fù)?
今天給大家?guī)淼氖顷P(guān)于Java的相關(guān)知識,文章圍繞著Java生成的隨機數(shù)靠不靠譜展開,文中有非常詳細的介紹,需要的朋友可以參考下2021-06-06spring MVC + bootstrap實現(xiàn)文件上傳示例(帶進度條)
本篇文章主要介紹了spring MVC + bootstrap實現(xiàn)文件上傳示例(帶進度條),非常具有使用價值,有需要的朋友可以了解一下。2017-03-03img 加載網(wǎng)絡(luò)圖片失敗 顯示默認圖片的方法
下面小編就為大家?guī)硪黄猧mg 加載網(wǎng)絡(luò)圖片失敗 顯示默認圖片的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Java+Swing實現(xiàn)經(jīng)典五子棋游戲
五子棋是世界智力運動會競技項目之一,是一種兩人對弈的純策略型棋類游戲,是世界智力運動會競技項目之一。本文將采用Java Swing實現(xiàn)這一經(jīng)典游戲,需要的可以參考一下2022-01-01