Javame Development Adaptive Scrolling Display _java

"Problem description"

We often see examples of scrolling displays, such as UC browsers, that display the contents of a Web page. When the content is relatively long, it is reasonable to use the scrolling paging display. In the canvas drawing, the extra content is truncated. How do I implement a scrolling paging display?

Principle

There is a function of coordinate transformation in Javame. When the corresponding keystroke event is triggered, we let it display the corresponding page, and the scroll bar scrolls to the appropriate position.

"Code List"

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, "help"); 
  Menu.drawmenu (This, graphics, "", "return"); 
   
  Flushgraphics (); 
   
  FT = Font.getfont (font.face_proportional,font.style_bold,font.size_medium); String info = "1 scrolling paging display; \ n" + 2 scrolling paging display; \ n "+" 3 scrolling paging display; \ n "+" 4 scrolling paging display; \ n "+" 5 scrolling paging display; \ n "+" 6 scrolling page Show \ n "+" 7 scrolling paging display, \ n "+" 8 scrolling paging display, \ n "+" 9 scrolling paging display, \ n "+" 10 scrolling paging display, \ n "+" 11 scrolling paging display; \ n "+" 12 scrolling page \ n "+" 13 scrolling paging display, \ n "+" 14 scrolling paging display, \ n "+" 15 scrolling paging display, \ n "+" 16 scrolling paging display, \ n "+" 17 scrolling paging display; \ n "+" 18 scrolling paging display, \ n "+" 19 scrolling paging display, \ n "+" 20 scrolling paging display, \ n "+" 21 scrolling paging display, \ n "+" 22 scrolling paging display, \ n "+" 23 scrolling paging display; \ n "+ 
    "24 scrolling paging display; \ n" + "25 scrolling paging display; \ n" + "26 scrolling paging display; \ n" + "27 scrolling paging display; \ n" + 28 scrolling paging display; \ n "+" 29 scrolling page display; \ n " 
  + 30 scrolling paging display; \ n "+" 31 scrolling paging display; \ n "+" 32 scrolling paging display; \ n "+" 33 scrolling paging display; \ n "+" 34 scrolling paging display; \ 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 please refer to Javame serialization (3)-also said MVC design pattern, here no longer repeat.

Analysis

1 string Split

String info_wrap1[] = Stringdealmethod.format (info, width-15, ft);
please refer to Javame serialization (4)-draw text that can be wrapped automatically

2 Avoid word truncation

How do I draw an entire line of text within a specified range, without the problem of truncation of text due to a change in font or screen height that causes the text to appear as a "halfway word" problem?

Bodyheight = ((int) (height-head.menuheight-menu.menuheight)/ft.getheight ()) *ft.getheight ();
after the above processing, the height of the scrolling area will always be the bodyheight of the font height, so that the word truncation is not the problem.

3 Drawing Text

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 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 scroll Bar

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 Event handling

When a key event is detected, the paging operation occurs.

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; 
  } 
 } 

This example method can adaptively detect the width and length of the screen, according to the size of the font, the text paging, scrolling display, the implementation of the effect as shown in Figure 1:

Figure Scrolling Display effect