Android Viewpager Multi-page swipe toggle and animation effects

First, let's take a look, this is the Sina Weibo tab slide effect. We can swipe the gesture or click on the header above to toggle it. In this same way, the white bar is moved to the corresponding tab header. This is an animated effect, and the white stripes are slowly sliding past. Well, then we'll do it. Second, before we begin, we must first know a control, Viewpager. It is a class of an add-on package that comes with the Google SDK and can be used for switching between screens. This add-on package is Android-support-v4.jar, in the final source will be provided to everyone, in the Libs folder. Of course you can also search the latest version from the Internet yourself. After finding it, we need to add three in the project, we first do the interface, the interface design is very simple, the first row of three headers, the second action picture, the third row of page card content display. Copy Code

Copy the code we want to show three page cards, so also need three page card content interface design, here we only set the background color, can play a different role. Copy Code

Copy code four, the code part to initialize the work (1) First to define the variable copy code private viewpager mpager;//page card content private List

ListViews; tab page List    private ImageView cursor;//animated pictures    private TextView t1, T2, t3;//page header    PRI vate int offset = 0;//animated picture offset    private int currindex = 0;//Current page card number    private int bmpw;//animated picture width copy Code (2) Initialize header copy Code 1    /** 2      * Initialization Header 3 */4     private void Inittextview () {5 & nbsp       T1 = (TextView) Findviewbyid (R.ID.TEXT1); 6         t2 = (TextView) Findviewbyid (R.ID.TEXT2); 7         t3 = (TextView) Findviewbyid (R.ID.TEXT3); 8 9         T1.setonclicklistener (new Myonclicklistener (0));         T2.setonclicklistener (new Myonclicklistener (1));         T3.setonclicklistener (new Myonclicklistener (2));     Copy Code copy code 1    /** 2      * head punctuation Tap 3 */4     public class Myonclic Klistener implements View.onclicklistener {5 &nbsp       private int index = 0; 6 7         public myonclicklistener (int i) {8             index = i; 9           @Override         public void Oncl Ick (View v) {            Mpager.setcurrentitem (index),        }    }; Copy the code I believe you look after the problem, click on the first few pages to show the contents of the page. (3) Initialize the page card content area copy Code 1    /** 2      * Initialize viewpager 3 */4     private void Initviewpager () {5         Mpager = (Viewpager) Findviewbyid (R.id.vpager), 6         ListViews = new ArrayList (); 7         Layoutinflater minflater = Getlayoutinflater (); 8         Listviews.add (minflater.inflate (r.layout.lay1, null)); 9         Listviews.add (minflater.inflate (r.layout.lay2, null)); Ten         Listviews.add (minflater.inflate (r.layout.lay3, null));         Mpager.setadapter (new Mypageradapter (listviews));         Mpager.setcurrentitem (0);         Mpager.setonpagechangelistener (new Myonpagechangelistener ());     Copy Code we loaded the three page card interface, and the first page card was displayed by default. Here we also need to implement an adapter. Copy Code 1/** 2      * Viewpager Adapter 3 */4     public class Mypageradapter extends Pageradapter {5         public listmlistviews; 6 7         public Mypageradapter (listmlistviews) {8             THIS.M ListViews = Mlistviews; 9        } Ten         @Override         public void des Troyitem (View arg0, int arg1, Object arg2) {            ((Viewpager) arg0). Removeview (ML Istviews.get (arg1));        } &nbsp  ;     @Override         public void finishupdate (View arg0) {$       &NBSP ; }         @Override,         public int getcount () {&nbs     P       return mlistviews.size ();           @Override         public Object Instantiateitem (View arg0, int arg1) {            ((Viewpager) arg0). AddView (mlistviews. Get (Arg1), 0);             return mlistviews.get (ARG1);        }  /      @Override +         public boolean Isviewfromobject (View arg0, Object arg1) {            return arg0 = = (arg1);      } restorestate         @Override PNS         public void (PaRcelable arg0, ClassLoader arg1) {       } [ ]       @Override       Public parcelable saveState () {$             return null;   & nbsp    } startupdate         @Override the         public void (View ar) G0) {       },    } copy code here we implement the loading and unloading of each page card (3) initialize the animation copy Code 1    /** 2 &nbsp ;    * Initialization Animation 3 */4     private void Initimageview () {5         cursor = (ImageView ) Findviewbyid (r.id.cursor); 6         BMPW = Bitmapfactory.decoderesource (Getresources (), R.drawable.a) 7       &NB Sp         getwidth ();//Get Image width 8         displaymetrics dm = new Displaymetrics (); 9         Getwindowmanager (). Getdefaultdisplay (). Getmetrics (DM);     &NBSp   int screenw = dm.widthpixels;//Get resolution width         offset = (SCREENW/3-BMPW)/2;//calculate offset 1 2         Matrix matrix = new Matrix ();         matrix.posttranslate (offset, 0);         Cursor.setimagematrix (matrix);//Set the initial position of the animation    } Copy the code to calculate the offset of the animation movement based on the screen resolution and the width of the picture Implement page-card switching listening replication Code 1/** 2      * tab Toggle Monitor 3 */4     public class Myonpagechangelistener implements OnP Agechangelistener {5 6         INT one = offset * 2 + bmpw;//page 1 page Card 2 offset 7     &NBSP ;   INT-One * 2;//page Card 1-page Card 3 Offset 8 9         @Override         Pub LIC void onpageselected (int arg0) {            Animation Animation = null;   &NB Sp         switch (arg0) {$             case 0:14       & nbsp         if (currindex = = 1) {+                     Anima tion = new Translateanimation (one, 0, 0, 0);                } else if (Currindex = = 2) {+         &NB Sp           animation = new Translateanimation (0, 0, 0);                           BR Eak             case 1:21                 if (Currin Dex = = 0) {                    animation = new Translateanimation (of Fset, one, 0, 0);                } else if (Currindex = = 2) {$         &NB Sp           animation = new Translateanimation (both, one, 0, 0);     &NBSp          } +                 break;             case 2:28                 if (Currin Dex = = 0) {                    animation = new Translateanimation (of Fset, 0, 0);                } else if (Currindex = = 1) {+         &NB Sp           animation = new Translateanimation (one, 0, 0);                }                 BR Eak            } +             currindex = arg0;             Animation.setfillafter (TRUE);//true: Picture stops at end of animation       &NBSP ;     Animation.setduration (300);             cursor.startanimation (animation);         {+/        @Override         public void on pagescrolled (int arg0, float arg1, int arg2) {       } @Overrid         E         public void onpagescrollstatechanged (int arg0) {+        } &nbs P   Copy code Five, finish the work, come to see the fruits of their own labor! Source code sharing: HTTP://115.COM/FILE/DPI0UNYG

Android viewpager Multi-page swipe toggle and animation effects