Ophone 2D UI animation tutorial-Implementation of screen Switching

Transferred from ophonesdn

 

This tutorial describes how to implement switching between screens. In the aforementioned ophone 2D UI animation tutorial, I introduced the animation function provided by ophone, which describes how to operate the animation effect of a specific view, in general, we hope to provide different animation effects when switching the program screen. Providing better screen switching results will make users feel cool. BackgroundThe screen switching mentioned here does not mean activity switching. Everyone knows that activity is an important concept in ophone. A program may have multiple activities to do different things, activity switching is implemented by the ophone system in a unified manner. If we customize the switching effect, it will lead the user to wrong guidance, currently, ophone does not provide APIs to control the switching effect between activities. However, in future ophone versions, a function activity will be provided. overridependingtransition (INT enteranim, int exitanim). The parameter is the ID defined for the animation resource used for activity entry and exit. You can start another activity in the activity (call the startactivity function) or the activity is used to exit (call the finish function), so that the specified animation is used to display (close) the activity. Although version 2.0 provides this function, in order to be consistent with the system style without causing user misunderstanding, I still recommend that you do not use this function easily to change the switching effect between activities. Return to the topic. In this tutorial, screen switching refers to the switching of the display in the same activity. The longest case is that there are multiple pages in one framelayout, for example, a system setting page and a personalized setting page. By viewing the ophone API documentation, you can find that there is an android. widget. viewanimator class inherited to framelayout. The viewanimator class is used to provide animation effects for view switching in framelayout. This class has the following animation-related functions: l setinanimation: sets the animation used when the view enters the screen. This function has two versions, one of which accepts a single parameter and the type is Android. view. animation. animation; one accepts two parameters, whose types are context and INT, respectively, the context object and the resourceid that defines the animation.

• Setoutanimation: Specifies the animation used when the view exits the screen. The setinanimation parameter function is the same.
• Shownext: Call this function to display the next view in framelayout.
• Showprevious: Call this function to display the previous view in framelayout.

Generally, viewanimator is not directly used. Instead, viewflipper and viewswitcher are used. Viewflipper can be used to specify the switching effect between multiple views in framelayout. It can be specified at one time or a separate effect can be specified during each switching. This class provides the following functions:

• Isflipping: used to determine whether view switching is in progress
• Setfilpinterval: set the time interval for switching between views.
• Startflipping: Use the interval set above to start switching all views.
• Stopflipping: Stop view switching

As the name suggests, viewswitcher refers to switching between two views. You can use this class to specify a viewswitcher. viewfactory project to create these two views. This class also has two sub-classes: imageswitcher and textswitcher for image and text switching. In the tutorial, we will introduce the use of viewflipper through examples. Other usage methods are similar. For more information, see the document: http://androidappdocs-staging.appspot.com/reference/android/widget/ViewAnimator.html Viewflipper exampleRemember, viewflipper inherits from framelayout, so it is a layout where multiple views can be placed. Define a viewflipper In the example, which contains three viewgroups as three screens in the example. Each viewgroup contains a button and an image. click the button to display the next screen. The Code is as follows (RES/layout/Main. XML ): <? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout <br/> xmns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"> <br/> <viewflipper Android: Id = "@ + ID/details" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: persistentdrawingcache = "Animation" <br/> Android: flipinterval = "1000" <br/> Android: inanimation = "@ anim/push_left_in" <br/> Android: outanimation = "@ anim/push_left_out" <br/> <linearlayout <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"> <br/> <button <br/> Android: text = "Next" <br/> Android: id = "@ + ID/button_next1" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content"> <br/> </button> <br/> <imageview <br/> Android: id = "@ + ID/image1" <br/> Android: src = "@ drawable/dell1" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content"> <br/> </imageview> <br/> </linearlayout> </P> <p> <linearlayout <br/> Android: orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"> <br/> <button <br/> Android: TEXT = "Next" <br/> Android: Id = "@ + ID/button_next2" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content"> <br/> </button> <br/> <imageview <br/> Android: id = "@ + ID/image2" <br/> Android: src = "@ drawable/LG" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content"> <br/> </imageview> <br/> </linearlayout> </P> <p> <linearlayout <br/> Android: orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"> <br/> <button <br/> Android: TEXT = "Next" <br/> Android: Id = "@ + ID/button_next3" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content"> <br/> </button> <br/> <imageview <br/> Android: id = "@ + ID/image3" <br/> Android: src = "@ drawable/Lenovo" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content"> <br/> </imageview> <br/> </linearlayout> </P> <p> </viewflipper> </P> <p> </linearlayout> <br/>You can simply specify the relevant attributes of the animation in the layout definition. Use persistentdrawingcache to specify the cache policy. flipinterval to specify the interval between each view animation; inanimation and outanimation specify the animation effects used for view access. The animation effect is defined as follows: Res/anim/push_left_in.xml <br/> <? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <translate <br/> Android: fromxdelta = "100% P" <br/> Android: toxdelta = "0" <br/> Android: Duration = "500" type = "codeph" text = "codeph"/> <br/> <Alpha <br/> Android: fromalpha = "0.0" <br/> Android: toalpha = "1.0" <br/> Android: duration = "500"/> <br/> </set> <br/> Res/anim/push_left_out.xml <br/> <? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <translate <br/> Android: fromxdelta = "0" <br/> Android: toxdelta = "-100% P" <br/> Android: Duration = "500"/> <br/> <Alpha <br/> Android: fromalpha = "1.0" <br/> Android: toalpha = "0.0" <br/> Android: duration = "500"/> <br/> </set> <br/> 

From the previous tutorial, it is not difficult to see that the two files define the fade-in and fade-out effects from the left. For example:

The activity code for switching between views is as follows (src/CC/C/testactivity. Java ):Public class testactivity extends activity {<br/> private viewflipper mviewflipper; <br/> @ override <br/> Public void oncreate (bundle savedinstancestate) {<br/> super. oncreate (savedinstancestate); <br/> setcontentview (R. layout. main); </P> <p> button buttonnext1 = (button) findviewbyid (R. id. button_next1); <br/> mviewflipper = (viewflipper) findviewbyid (R. id. flipper); <br/> buttonnext1.setonclicklis Tener (new view. onclicklistener () {<br/> Public void onclick (view) {<br/> // attributes defined in layout, you can also specify <br/> // mviewflipper in the code. setinanimation (getapplicationcontext (), R. anim. push_left_in); <br/> // mviewflipper. setoutanimation (getapplicationcontext (), R. anim. push_left_out); <br/> // mviewflipper. setpersistentdrawingcache (viewgroup. persistent_all_caches); <br/> // mviewflipper. setflipinterval (1000); <B R/> mviewflipper. shownext (); <br/> // call the following function to display all views in mviewflipper cyclically. <Br/> // mviewflipper. startflipping (); <br/>}< br/>}); </P> <p> button buttonnext2 = (button) findviewbyid (R. id. button_next2); <br/> buttonnext2.setonclicklistener (new view. onclicklistener () {<br/> Public void onclick (view) {<br/> mviewflipper. shownext (); <br/>}</P> <p >}); <br/> button buttonnext3 = (button) findviewbyid (R. id. button_next3); <br/> buttonnext3.setonclicklistener (new view. onclicklistener () {<br/> Public void onclick (view) {<br/> mviewflipper. shownext (); <br/>}</P> <p >}); </P> <p >}< br/> Move the screen with gesturesThe buttons on the screen are used to switch between screens. This seems somewhat different from the ophone style, if you can achieve screen switching by sliding between the left and right of the gesture, it will be more elegant. The android. View. gesturedetector class can detect various gesture events. This class has two callback interfaces to notify specific events:Gesturedetector. ondoubletaplistener: Used to notify doubletap events, similar to double-click events of the mouse. This interface has the following three callback functions: 1. ondoubletap (motionevent E): Notification doubletap gesture, 2. ondoubletapevent (motionevent E): notifies the events in the doubletap gesture, including the Down, up, and move events (this refers to the events that occur between double-click, for example, double-click in the same place will generate a doubletap gesture, while a down and up event will occur in the doubletap gesture, which are notified by the function); 3. onsingletapconfirmed (motionevent E): used to determine whether the click is singletap rather than doubletap. If you click it twice consecutively, It is a doubletap gesture. If you click it only once, after waiting for a while, the ophone system determines that the second click is singletap instead of doubletap, and then triggers singl Etapconfirmed event.Gesturedetector. ongesturelistener: Used to notify common gesture events. This interface has the following six callback functions: 1. ondown (motionevent E): Down event; 2. onsingletapup (motionevent E): one-click up event; 3. onshowpress (motionevent E): When the down event occurs and the move or up event is not triggered before its lifetime; 4. onlongpress (motionevent E): Long press event; 5. onfling (motionevent E1, motionevent E2, float velocityx, float velocityy): slide gesture event; 6. onscroll (motionevent E1, motionevent E2, float distancex, float distancey): drag the event on the screen. Some definitions of these events are not easy to understand. In the example project, all callback functions are implemented, and relevant logs are output in each function. projects that do not understand these events can be run, you can use different operations to trigger events and view the logcat output logs to help you understand these events. In the above events, if the event is processed in the program, true is returned; otherwise false is returned. In gesturedetector, A simpleongesturelistener class is also defined, which is a helper class, all the above functions are implemented and false is returned. If you only need to listen to an event in the project to inherit this class, you can have fewer empty callback functions. To add a sliding gesture to the above program to implement screen switching, you must first define a gesturedetector:PrivateGesturedetector mgesturedetector; and initialize it in the oncreate function: mgesturedetector =NewGesturedetector (This); The parameter is ongesturelistener, and then the testactivity implements the ongesturelistener and ondoubletaplistener interfaces:Class testactivity extends activity implements ongesturelistener, ondoubletaplistener <br/>Then, the onfling function enables screen switching:Public Boolean onfling (motionevent E1, motionevent E2, float velocityx, <br/> float velocityy) {<br/> log. D (TAG ,"... onfling... "); <br/> If (e1.getx ()> e2.getx () {// move to left <br/> mviewflipper. shownext (); <br/>}else if (e1.getx () <e2.getx () {<br/> mviewflipper. setinanimation (getapplicationcontext (), R. anim. push_right_in); <br/> mviewflipper. setoutanimation (getapplicationcontext (), R. anim. push_right_out); <br/> mviewflipper. showprevious (); <br/> mviewflipper. setinanimation (getapplicationcontext (), R. anim. push_left_in); <br/> mviewflipper. setoutanimation (getapplicationcontext (), R. anim. push_left_out); <br/>}else {<br/> return false; <br/>}< br/> return true; <br/>}< br/>Here, the function is to move from right to left to the previous view, move from left to right to the next view, and use different In and Out animations to make the switching effect look more unified. In ondoubletap, double-click the automatic switch function and double-click it again to stop:Public Boolean ondoubletap (motionevent e) {<br/> log. D (TAG ,"... ondoubletap... "); <br/> If (mviewflipper. isflipping () {<br/> mviewflipper. stopflipping (); <br/>}else {<br/> mviewflipper. startflipping (); <br/>}< br/> return true; <br/>}< br/>Now the gesture code is complete. You can switch between views by swiping left and right, and double-clicking to switch the view automatically. Careful readers may find a problem here. The above code is used when creating mgesturedetector: mgesturedetector =NewGesturedetector (This); Here the parameter is ongesturelistener, and gesturedetector has a function setondoubletaplistener to set ondoubletaplistener. In the above Code, how does one call the ondoubletap event? The xuanjicang here will go to explore the source code of the gesturedetector (ongesturelistener L) constructor:Public gesturedetector (ongesturelistener listener) {<br/> This (null, listener, null); <br/>}< br/>Another constructor is called:Public gesturedetector (context, ongesturelistener listener, Handler handler) {<br/> If (handler! = NULL) {<br/> mhandler = new gesturehandler (handler); <br/>}else {<br/> mhandler = new gesturehandler (); <br/>}< br/> mlistener = listener; <br/> If (listener instanceof ondoubletaplistener) {<br/> setondoubletaplistener (ondoubletaplistener) Listener ); <br/>}< br/> Init (context); <br/>

Notice that listener InstanceofOndoubletaplistener? Now you understand. The res/anim directory in the project code in the appendix contains some commonly used animation definitions and the sample project code.