Smooth and three-dimensional page flip effects of Android Launcher

Here we extract the Code related to the workspace of the android launcher program and use a simple code to demonstrate how the launcher program implements multiple pages and different

Switch between pages. This sample code runs in SDK 2.1 and sets the screen size of WVGA.

First, let's take a look at the program running effect to give us some perceptual knowledge.

Next, let's take a look at the layout of the UI (view and viewgroup) of the program. The contentview of the activity is main. XML in layout. Its content is as follows:


The basic class of flatworkspace is workspace, which inherits from viewgroup and is a container class. It contains three sub-views and the sub-view is imageview. Three
Imageview is three pages. The creation of the three imageviews is completed by calling the initscreens function of workspace in the oncreate function of workspaceactivity.
The Code is as follows:
Listing 2
Viewgroup. layoutparams P = new iewgroup. layoutparams (viewgroup. layoutparams. fill_parent, viewgroup. layoutparams. fill_parent); For (INT I = 0; I <3; I ++) {This. addview (New imageview (this. getcontext (), I, p);} (imageview) This. getchildat (0 )). setimageresource (R. drawable. image_search); (imageview) This. getchildat (1 )). setimageresource (R. drawable. image_system); (imageview) This. getchildat (2 )). setimageresource (R. drawable. image_top );


In order to make the window layout of the three pages reach, we reload the onmeasure and onlayout functions of the workspace, focusing on the onlayout code. Onlayout
The function calls the layoutscreens function to complete the layout. The layoutscreens implementation in flatworkspace is as follows:
Listing 3
Protected void layoutscreens () {int childleft = 0; Final int COUNT = getchildcount (); For (INT I = 0; I <count; I ++) {final view child = getchildat (I); If (child. getvisibility ()! = View. gone) {final int childwidth = child. getmeasuredwidth (); child. layout (childleft, 0, childleft + childwidth, child. getmeasuredheight (); childleft + = childwidth ;}}}

The code in the child. layout section above layout the three pages in the X and Y coordinate systems ()-(screenwidth, screenheight) and (screenwidth,
0)-(2 * screenwidth, screenheight) and (2 * screenwidth, 0)-(3 * screenwidth, screenheight) in the three rectangle areas. The rectangle area is used here.
The upper-left vertex coordinates of the domain and the lower-right vertex coordinates represent the matrix.
Now we have completed the layout of the entire window page. The layout of the window page is three times the actual visible screen width. Therefore, to display all pages, you need to scroll the page.

Next let's take a look at how the app slides the page and draws them when you touch move.
You can call the scrollby or scrollto function of the view to slide the page. In the ontouchevent function of the workspace, you can get the distance from the user's finger movement, and then call
Scrollby (its parameter is the distance that needs to be moved on the X and Y axes) to let the workspace view (also viewgroup) Move the user's finger to move the distance, of course, View
Before moving, you must determine whether the distance and speed of the user's fingers are enough to move, so as to reduce the user's misoperation. This part of the code is simple and will not be further analyzed. Please
Let's look at the code.
When the view in Workspace calls scrollby to scroll the view, the view will inevitably become invalid and be re-drawn by the system. Therefore, its dispatchdraw function will
Called to draw a sub-view (imageview). It has nothing to draw, so you don't need to care about the ondraw function of the workspace. Dispatchdraw letter
Number will call drawscreens (canvas) to draw the child view. Let's take a look at the implementation of flatworkspace:
Listing 4
Protected void drawscreens (canvas) {final long drawingtime = getdrawingtime (); Final int COUNT = getchildcount (); For (INT I = 0; I <count; I ++) {drawchild (canvas, getchildat (I), drawingtime );}}

The canvas width and height are the size of the visual range of the screen (for example, the size of the hvga screen is 320 × 480), and the layout of the three sub-imageviews is beyond the screen range, not on the screen
Parts within the visible range are not drawn. This function is very important for drawing three sub-imageviews. It is the key to making special effects such as page turning of cubes. It is implemented by flatworkspace.
Therefore, we can directly draw three sub-imageviews. If you want to implement the cube effect, you need to make the three sub-imageviews be drawn.
There is a stereoscopy. In Android, we can use the camera class mentioned above to rotate a certain angle along the Y axis.
The program allows the user to perform the Touch Move operation to allow the user to select a page. According to the above implementation, when the user finally raises his finger, the page switching will not be very thorough, but like
Figure 1 stays between two pages. So when the user raises his finger, the program needs to determine the distance to move to the next complete page, and then let the workspace View
Move the distance to the next page. In the process of moving, in order to give the user a smooth feeling, it is necessary to give a certain amount
Time interval, gradually moving in place during this time period, so here we use the scroller class method to achieve gradual moving. The specific process is in the Workspace
When the ontouchevent function detects the page on which the user needs to adjust the touch up (finger up), it calls the snaptoscreen (targetscreen) to jump to the desired page.
To target the page, and then it calls scrolltoscreen (screen) to let the workspace view scroll as needed. The implementation of this function in flatworkspace is as follows:
Listing 5
Public void scrolltoscreen (INT screen) {final int newx = screen * getwidth (); Final int deltax = newx-getscrollx (); log. E ("flatworkspace", "scrolltoscreen call mscroller. startscroll "); mscroller. startscroll (getscrollx (), getscrolly (), deltax, getscrolly (), math. ABS (deltax) * 2); invalidate ();}

Here the focus is on the code of the mscroler. startscroll part, which allows the workspace view to move the next target page in math. Abs (deltax) * 2.
The distance from deltax (and the coordinates of the target page minus the distance that has been moved). Please take a good look at the deltax calculation. This
Mscroller. startscroll does not cause the workspace to move immediately. It only invalidates the current view and re-draws it. In the workspace, the parent View
When calling the drawing, its computescroll function will be called, so the workspace will call the scrollto function in this function for actual movement. The Code is as follows:
Listing 6
Public void computescroll () {If (mscroller. computescroloffset () {scrollto (mscroller. getcurrx (), mscroller. getcurry (); // postinvalidate ();} else if (mnextscreen! = Invalid_screen) {mcurrentscreen = mnextscreen; mnextscreen = invalid_screen ;}}

So far, we have introduced how to implement the entire operating mechanism of the workspace and the smooth moving effect. Next, let's talk about how to implement the three-dimensional page turning effect.
Based on the previous analysis, we can see that the stereoscopic paging effect can be drawn by rewriting the three sub-imageviews on the basis of the smooth paging effect. At the same time, we can see that the user's operation process during page turning
There are three steps: Put your fingers down, touch the screen, move your fingers, and raise your fingers. When you touch the screen with your fingers, the slide between pages starts. When you move your fingers, the page should follow your fingers.
The system also draws the three sub-views (pages) in the Workspace Based on the moving position of the page.
Which page should be moved, how much distance should be moved, and then smoothly move the required distance to jump to the target page.
To display the stereoscopic effect, you have to figure out how to rotate each sub-imageview along the Y axis. As mentioned above, Android provides
This function does not need to use OpenGL ES. Of course, to make better 3D effects, we need the powerful functions of OpenGL ES. Since we need to rotate a certain angle,
How can we calculate this angle? We associate the angle with the distance between the user's finger movement. Because this cube will only rotate along the Y axis, we only look at
The top is enough. The top of the screen is an equi triangle directed by the arrow along the Y axis. The calculation method of the rotation angle of each face on the screen of the mobile phone is as follows:
As shown in:

Rotate for Screen 1 along Y axis 45 read and then the other two screens need to rotate along Y axis angle.

For the transformation part, see the code of the drawscreen function in cubeworkspace, as follows:
Listing 7
Protected void drawscreen (canvas, int screen, long drawingtime) {final int width = getwidth (); Final int scrollwidth = screen * width; Final int scrollx = This. getscrollx (); If (scrollwidth> scrollx + width | scrollwidth + width <scrollx) {return;} final view child = getchildat (screen); Final int faceindex = screen; final float facedegree = currentdegree-faceindex * prefacedegree; If (Facedegree> 90 facedegree <-90) {return;} final float centerx = (scrollwidth <scrollx )? Scrollwidth + width: scrollwidth; Final float centery = getheight ()/2; Final camera = mcamera; Final matrix = mmatrix; canvas. save (); camera. save (); camera. rotatey (-facedegree); camera. getmatrix (matrix); camera. restore (); matrix. pretranslate (-centerx,-centery); matrix. posttranslate (centerx, centery); canvas. concat (matrix); drawchild (canvas, child, drawingtime); child. setbackgroundcolor (color. transparent); canvas. restore ();}

The currentdegree variable in the above function is changed rather than a fixed value. The method for changing the value of this variable is relatively hidden. In the scrollto function of angelbaseworkspace
. The scrollto function in angelbaseworkspace reloads the functions in the View class. This function will be called by the scrollby function in the view, so each touch screen
In addition, when moving, the scrollto function in angelbaseworkspace will be called (ontouchevent calls scrollby and scrollby calls scrollto ).
User Touch Move distance to change the angle of the current page, that is, the value of the variable currentdegree. For details, see the following code:
Listing 8
Public void scrollto (int x, int y) {If (getscrollx ()! = X | getscrolly ()! = Y) {int oldx = getscrollx (); int Oldy = getscrolly (); super. scrollto (x, y); // X is the touch action X direction move distance currentdegree = x * degreeoffset; onscrollchanged (X, Y, oldx, Oldy ); invalidate ();}}

The code of this cube special effect section is introduced here.
This article introduces the smooth and three-dimensional page flip effects of Android launcher, which helps developers to gain an in-depth understanding of the principles of Android animation framework, so as to make full use of Android
The existing framework is used to make dazzling and cool animation effects.