【Problem Description】
We often see some scrolling examples, such as the content of the web page in UC browser. When there is a lot of content, it is reasonable to use scrolling pagination to display. In the drawing in Canvas, the excess content is truncated. How to realize scrolling pagination display?
【principle】
There is a coordinate transformation function in JavaMe. When the corresponding key event is triggered, we let it display the corresponding page and scroll the scrollbar to the corresponding position.
【Code List】
ShowHelp.javapackage com.token.view; import javax.microedition.lcdui.Font; import javax.microedition.lcdui.Graphics; import javax.microed ition.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 Grap hics 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 ShowHel p(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 s how() { int margin = 0; graphics = getGraphics(); graphics.clipRect(0, 0, width, height); backGroud.drawBackGroud(this, graphics); head.drawHead(this, graphics, "help") ; menu.drawMenu(this, graphics, "", "Return"); //flushGraphics(); ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_BOLD,Font.SIZE_MEDIUM); String info = "1 Scroll pagination display; /n" +"2 Scroll points Page display;/ n" +"3 scroll page display; /n" +"4 scroll page display; /n" +"5 scroll page display; /n" +"6 scroll page display; /n" +"7 scroll page display; / n" +"8 scroll page display; /n" +"9 scroll page display; /n" +"10 scroll page display; /n" +"11 scroll page display; /n" +"12 scroll page display; / n" +"13 Scroll paging display; /n" +"14 Scroll paging display; /n" +"15 Scroll paging display; /n" +"16 Scroll paging display; /n" +"17 Scroll paging display; / n" +"18 Scroll paging display; /n" +"19 Scroll paging display; /n" +"20 Scroll paging display; /n" +"21 Scroll paging display; /n" +"22 Scroll paging display; / n" +"23 Scroll paging display; /n" +"24 Scroll paging display; /n" +"25 Scroll paging display; /n" +"26 Scroll paging display; /n" +"27 Scroll paging display; / n" +"28 Scroll paging display; /n" +"29 Scroll paging display; /n" +"30 Scroll paging display; /n" +"31 Scroll paging display; /n" +"32 Scroll paging display; / n" +"33 Scroll paging display; /n" +"34 Scroll paging display; /n"; String info_wrap1[] = StringDealMethod.format(info, width-15, ft); page = info_wrap1.length*ft.getHe ight ()/(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.clip Rect(0, head.menuHeight+margin, width, bodyHeight); graphics.translate(0, dir*currentPageIndex*bodyHeight); for(int i=0; i<info_wrap1.length;i++) { graphics.drawString(i nfo_wrap1[i],5, i * ft.getHeight() +head.menuHeight+margin, Graphics.TOP|Graphics.LEFT); } graphics.translate(0, -dir*currentPageIndex*bodyHeight); drawScrollBar(); f lushGraphics(); //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(UI Controller.EventID.EVENT_MAIN_SCREEN,args); break; } default: ; } keyCode = getGameAction(keyCode); //System.out.println(page); switch(keyCode) { case UP: { dir = -1; if(currentPage Index>0) { currentPageIndex--; } else { //dir = 0; } show(); break; } case DOWN: { dir = -1; if(currentPageIndex<page-1) { currentPageIndex++; } else { //dir = 0; } show(); b Reak ; } } } } }* Please refer to JavaMe serialization (3) for UIController - also talk about the MVC design pattern, so I will not repeat it here.
【analyze】
1 String split
String info_wrap1[] = StringDealMethod.format(info, width-15, ft);
For details, please refer to JavaMe serialization (4) - Drawing automatic line wrapping text
2 Avoid word truncation
How to draw a whole line of text in a specified area without truncating the text due to changes in font or screen height, causing the text to have "half-truncated words"?
bodyHeight = ((int) (height-head.menuHeight-menu.menuHeight)/ft.getHeight())*ft.getHeight();
After the above processing, the height bodyHeight of the scrolling area will always be an integer multiple of the font height, so that the above-mentioned word truncation problem will not occur.
3 Draw text
for(int i=0; i<info_wrap1.length;i++) { graphics.drawString(info_wrap1[i],5, i * ft.getHeight()+head.menuHeight+margin, Graphics.TO P|Graphics.LEFT); }4 Coordinate transformation
graphics.clipRect(0, head.menuHeight+margin, width, bodyHeight); graphics.translate(0, dir*currentPageIndex*bodyHeight);
After the text is drawn, transform the coordinates back.
graphics.translate(0, -dir*currentPageIndex*bodyHeight);
5 Draw scrollbars
private void drawScrollBar() { int barHeight = height-head.menuHeight-menu.menuHeight; graphics.setColor(Color.menuFrame); graphics.fillRec t(width-3, head.menuHeight, 2, barHeight); graphics.setColor(Color .selectBg); graphics.fillRect(width-4, head.menuHeight+(currentPageIndex)*barHeight/page, 4, barHeight/page); }6 Event handling
When a key press event is detected, a page turn operation is performed.
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(p age); 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; } } }This example method can adaptively detect the width and length of the screen, and paginate the text according to the size of the font and display it scrolls. The effect is as shown in Figure 1:
Picture scrolling display effect