Home>

We often see some examples of scrolling,For example, in the uc browser,Display the content of the web page.When there is more content,It is reasonable to use scrolling pagination.In drawing in canvas,The extra content is truncated.How to implement scrolling pagination display?

【Problem Description】

We often see some examples of scrolling,For example, in the uc browser,Display the content of the web page.When there is more content,It is reasonable to use scrolling pagination.In drawing in canvas,The extra content is truncated.How to implement scrolling pagination display?

【principle】

There is a coordinate transformation function in javame.When the corresponding key event is triggered,Let's make it show the corresponding page,And make the scroll bar to the corresponding 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 pagination display;
\ n "
    + "2 Scroll through pages;
\ n "
    + "3 Scroll through the pages;
\ n "
    + "4 Scroll through the pages;
\ n "
    + "5 Scrolls through pages;
\ n "
    + "6 scroll page display;
\ n "
    + "7 Scrolls through pages;
\ n "
    + "8 Scroll through pages;
\ n "
    + "9 Scroll through the pages;
\ n "
    + "10 Scroll through the pages;
\ n "
    + "11 Scroll through the pages;
\ n "
    + "12 scroll page display;
\ n "
    + "13 Scroll through the pages;
\ n "
    + "14 Scroll through the pages;
\ n "
    + "15 Scroll to page display;
\ n "
    + "16 Scroll through the pages;
\ n "
    + "17 Scroll through the pages;
\ n "
    + "18 Scroll through the pages;
\ n "
    + "19 Scroll through the pages;
\ n "
    + "20 Scroll through the pages;
\ n "
    + "21 Scroll through the pages;
\ n "
    + "22 Scroll through pages;
\ n "
    + "23 Scroll through the pages;
\ n "
    + "24 Scroll through the pages;
\ n "
    + "25 Scrolls through pages;
\ n "
    + "26 Scroll through the pages;
\ n "
    + "27 Scroll through the pages;
\ n "
    + "28 Scroll through the pages;
\ n "
    + "29 Scroll through pages;
\ n "
    + "30 Scroll through the pages;
\ n "
    + "31 Scroll through the pages;
\ n "
    + "32 scroll page display;
\ n "
    + "33 Scroll through pages;
\ n "
    + "34 Scroll through pages;
\ 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,I won't repeat them here.

【analysis】

1 string splitting

string info_wrap1 []=stringdealmethod.format (info, width-15, ft);

For details, please refer to javame serialization (4) -Drawing Wrap Text

2 Avoid word truncation

How to draw an entire line of text in a specified area,Without truncating the text due to font or screen height changes,What about making the text "half-cut"?

bodyheight=((int) (height-head.menuheight-menu.menuheight) /ft.getheight ()) * ft.getheight ();

After the above processing,The height of the scroll area is always an integer multiple of the font height.In this way, the problem of truncation of the above-mentioned words does not occur.

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 processing

When a key event is detected,Perform page turning operation.

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

The method of this example can adaptively detect the width and length of the screen.Depending on the size of the font,Paginate the text,Scrolling,The effect is shown in Figure 1:

Figure scroll display effect

  • Previous ThinkPHP form data intelligent write create method instance analysis
  • Next Train your own PHP coding standards