My android advanced tour --> slide pages for Android-use viewflipper

Screen switching refers to the switching on the screen of the same activity. The longest case is that there are multiple pages in a framelayout, such as 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

 

Now I will write a new project using viewflipper to implement page switching, such:

Step 1: Design the program UI main. xml

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> <viewflipper Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Id = "@ + ID/viewfipper"> <! -- Page 1st --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: gravity = "center"> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "1st page" Android: textsize = "60dip" Android: gravity = "center"/> </linearlayout> <! -- Page 2nd --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "# ffffff" Android: gravity = "center"> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "2nd page" Android: textsize = "60dip" Android: gravity = "center"/> </linearlayout> <! -- Page 3rd --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "#00ff00" Android: gravity = "center"> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "3rd page" Android: textsize = "60dip" Android: gravity = "center"/> </linearlayout> <! -- Page 4th --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "# ff0000" Android: gravity = "center"> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "4th page" Android: textsize = "60dip" Android: gravity = "center"/> </linearlayout> <! -- Page 5th --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "# FFFF00" Android: gravity = "center"> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "5th page" Android: textsize = "60dip" Android: gravity = "center"/> </linearlayout> </viewflipper> </linearlayout>

Note:

• Use relativelayout as the parent container, and add the button at the top of viewflipper;
• Each subpage of viewflipper is included in the view;
• Each subpage of viewflipper displays a textview;

Step 2: Set the animation effect during page switching.

Enter_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:shareInterpolator="false"><translateandroid:fromXDelta="-100%p"android:toXDelta="0"android:duration="500"/><alphaandroid:duration="500"android:fromAlpha="1.0"android:toAlpha="0.1"/></set>

Enter_right_to_left.xmlenter_right_to_left.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:shareInterpolator="false"><translateandroid:fromXDelta="100%p"android:toXDelta="0"android:duration="500"/><alphaandroid:duration="500"android:fromAlpha="0.1"android:toAlpha="1.0"/></set>

Exit_left_to_right.xmlexit_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:shareInterpolator="false"><translateandroid:fromXDelta="0"android:toXDelta="100%p"android:duration="500"/><alphaandroid:duration="500"android:fromAlpha="1.0"android:toAlpha="0.1"/></set>

Exit_right_to_left.xmlexit_right_to_left.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"android:shareInterpolator="false"><translate android:fromXDelta="0" android:toXDelta="-100%p"android:duration="500" /><alpha android:duration="500" android:fromAlpha="0.1"android:toAlpha="1.0" /></set>

 

 

 

Step 3: mainactivity. Java

Package CN. roco. animation; import android. app. activity; import android. OS. bundle; import android. view. motionevent; import android. view. window; import android. view. windowmanager; import android. view. animation. animation; import android. view. animation. animationutils; import android. widget. viewflipper; public class mainactivity extends activity {private viewflipper;/** used to record the X coordinate of the time when the screen is pressed */private float startx; /** X coordinates used to record the time when the screen is left */private float endx; private animation enter_left_to_right; private animation exit_left_to_right; private animation enter_right_to_left; private animation lag; /** called when the activity is first created. * // @ overridepublic void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); getwindow (). setflags (windowmanager. layoutparams. flag_fullscreen, windowmanager. layoutparams. flag_fullscreen); // request full screen getwindow (). requestfeature (window. feature_no_title); // the request does not contain the title bar setcontentview (R. layout. main); viewflipper = (viewflipper) This. findviewbyid (R. id. viewfipper);/** two animations from left to right */enter_left_to_right = animationutils. loadanimation (this, R. anim. enter_left_to_right); exit_left_to_right = animationutils. loadanimation (this, R. anim. exit_left_to_right);/** two animations from right to left */enter_right_to_left = animationutils. loadanimation (this, R. anim. enter_right_to_left); exit_right_to_left = animationutils. loadanimation (this, R. anim. exit_right_to_left);} @ overridepublic Boolean ontouchevent (motionevent event) {Switch (event. getaction () {Case motionevent. action_down: {startx = event. getx (); break;} case motionevent. action_up: {endx = event. getx (); If (endx> startx) {// sliding to the right shownextview ();} else if (endx <startx) {// sliding to the left showpreviusview ();} break;} return Super. ontouchevent (event);}/*** display the previous page */private void showpreviusview () {// viewflipper. setinanimation (enter_right_to_left); viewflipper. setoutanimation (exit_right_to_left); viewflipper. showprevious ();}/*** display next page */private void shownextview () {// animation effect viewflipper. setinanimation (enter_left_to_right); viewflipper. setoutanimation (exit_left_to_right); viewflipper. shownext ();}}

Step 4: androidmanifest. xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"package="cn.roco.animation" android:versionCode="1"android:versionName="1.0"><uses-sdk android:minSdkVersion="8" /><application android:icon="@drawable/icon" android:label="@string/app_name"><activity android:name=".MainActivity" android:label="@string/app_name"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application></manifest>

 

Step 5: Running Effect

 

 

Note: use gestures to switch

Package CN. roco. gesture; import android. app. activity; import android. OS. bundle; import android. view. gesturedetector; import android. view. gesturedetector. ongesturelistener; import android. view. animation. animation; import android. view. animation. animationutils; import android. view. motionevent; import android. widget. viewflipper;/*** use gestures to switch between images */public class gestureflipactivity extends activity implements ongesturelistener {private viewflipper; // define the gesturedetector detector of the gesture detector instance; // define the animation private animation enter_left_to_right; private animation placement; private animation enter_right_to_left; private animation placement; // define the minimum final int flip_distance = 50 between two points of a gesture action; @ overrideprotected void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); // create a gesture detector = new gesturedetector (this); // obtain the viewflipper instance viewflipper = (viewflipper) This. findviewbyid (R. id. viewfipper);/** two animations from left to right */enter_left_to_right = animationutils. loadanimation (this, R. anim. enter_left_to_right); exit_left_to_right = animationutils. loadanimation (this, R. anim. exit_left_to_right);/** two animations from right to left */enter_right_to_left = animationutils. loadanimation (this, R. anim. enter_right_to_left); exit_right_to_left = animationutils. loadanimation (this, R. anim. expiration) ;}@ overridepublic Boolean ondown (motionevent e) {return false ;}@ overridepublic void onshowpress (motionevent e) {}@ overridepublic Boolean onsingletapup (motionevent e) {return false ;} @ overridepublic Boolean onscroll (motionevent E1, motionevent E2, float distancex, float events) {return false ;}@ overridepublic void onlongpress (motionevent e) {}@ overridepublic Boolean ontouchevent (motionevent) {// send the touch time of the activity to a gesturedetector to process return detector. ontouchevent (event) ;}@ overridepublic Boolean onfling (motionevent E1, motionevent E2, float velocityx, float velocityy) {/*** if the X coordinate of 1st contact events is greater than the X coordinate of 2nd contact events exceeds flip_distance *, that is, the gesture slides from right to left */If (e1.getx () -e2.getx ()> flip_distance) {showpreviusview (); Return true ;} /*** if the X coordinate of 2nd contact events is greater than the X coordinate of 1st contact events exceeds flip_distance *, that is, the gesture slides from left to right */else if (e2.getx () -e1.getx ()> flip_distance) {shownextview (); Return true;} return false;}/*** display the previous page */private void showpreviusview () {// animation effect viewflipper. setinanimation (enter_right_to_left); viewflipper. setoutanimation (exit_right_to_left); viewflipper. showprevious ();}/*** display next page */private void shownextview () {// animation effect viewflipper. setinanimation (enter_left_to_right); viewflipper. setoutanimation (exit_left_to_right); viewflipper. shownext ();}}

========================================================== ========================================================== ============================

Author: Ouyang Peng: Welcome to repost. sharing with others is the source of progress!

Reprinted Please retain the original address: http://blog.csdn.net/ouyang_peng

========================================================== ========================================================== ============================