Android Viewpager Multi-page swipe toggle and animation effects

extends:http://www.cnblogs.com/dwinter/archive/2012/02/27/androidviewpager%e5%a4%9a%e9%a1%b5%e9%9d%a2%e6%bb%91 %e5%8a%a8%e5%88%87%e6%8d%a2%e4%bb%a5%e5%8f%8a%e5%8a%a8%e7%94%bb%e6%95%88%e6%9e%9c.html

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 the same way,

The white bars are 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.

Once we find it, we need to add it to the project.

Third, we first do the interface,

Interface design is simple, the first line of three headers, the second action to draw pictures, the third row of page card content display.

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
xmlns:umadsdk= "Http://schemas.android.com/apk/res/com.LoveBus"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
android:orientation= "Vertical" >

<linearlayout
Android:id= "@+id/linearlayout1"
Android:layout_width= "Fill_parent"
android:layout_height= "100.0dip"
android:background= "#FFFFFF" >

<textview
Android:id= "@+id/text1"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
Android:layout_weight= "1.0"
android:gravity= "Center"
android:text= "page Card 1"
Android:textcolor= "#000000"
Android:textsize= "22.0dip"/>

<textview
Android:id= "@+id/text2"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
Android:layout_weight= "1.0"
android:gravity= "Center"
android:text= "page Card 2"
Android:textcolor= "#000000"
Android:textsize= "22.0dip"/>

<textview
Android:id= "@+id/text3"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
Android:layout_weight= "1.0"
android:gravity= "Center"
android:text= "page Card 3"
Android:textcolor= "#000000"
Android:textsize= "22.0dip"/>
</LinearLayout>

<imageview
Android:id= "@+id/cursor"
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
Android:scaletype= "Matrix"
Android:src= "@drawable/A"/>

<android.support.v4.view.viewpager
Android:id= "@+id/vpager"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:layout_gravity= "Center"
Android:layout_weight= "1.0"
Android:background= "#000000"
Android:flipinterval= "30"
android:persistentdrawingcache= "Animation"/>

</LinearLayout>

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

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
    Android:layout_width= "Fill_parent"
    android:layout_height= "Fill_parent"
    android:orientation= "Vertical"
    android:background= "#158684" >
</LinearLayout>

Four, the code part of the work to be initialized

(1) Define the variable first

    Private Viewpager mpager;//Page card content
    Private list<view> listviews; tab page List
    Private ImageView cursor;//Animated pictures
    Private TextView T1, T2, t3;//page Header
    private int offset = 0;//animated picture offset
    private int currindex = 0;//Current Page card number
    private int bmpw;//animated picture width

(2) Initialization of the header

1     /**
2      * Initialization of headers
3 */
4     private void Inittextview () {
5         t1 = (TextView) Findviewbyid (R.ID.TEXT1);
6         t2 = (TextView) Findviewbyid (R.ID.TEXT2);
7         t3 = (TextView) Findviewbyid (R.ID.TEXT3);

9         T1.setonclicklistener (new Myonclicklistener (0));
Ten         T2.setonclicklistener (new Myonclicklistener (1));
         T3.setonclicklistener (New Myonclicklistener (2));
--     }

1     /**
2      * Head punctuation tapping
3 */
4 Public     class Myonclicklistener implements View.onclicklistener {
5         private int index = 0;

7 public         Myonclicklistener (int i) {
8             index = i;
9         }

         @Override
Public         void OnClick (View v) {
             Mpager.setcurrentitem (index);
+         }
     ;

I believe you have no problem after the view, click on the first few pages to show the contents of the page.

(3) Initialize the content area of the page card

1     /**
2      * Initialize Viewpager
3 */
4     private void Initviewpager () {
5         Mpager = (viewpager) Findviewbyid (R.id.vpager);
6         listviews = new arraylist<view> ();
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 ());
+     }

We loaded the three page card interface, the first page card is displayed by default. Here we also need to implement an adapter.

1/**
2 * Viewpager Adapter
3 */
4 public class Mypageradapter extends Pageradapter {
5 public list<view> Mlistviews;
6
7 Public Mypageradapter (list<view> mlistviews) {
8 this.mlistviews = mlistviews;
9}
10
@Override
public void Destroyitem (View arg0, int arg1, Object arg2) {
((Viewpager) arg0). Removeview (Mlistviews.get (arg1));
14}
15
@Override
+ public void Finishupdate (View arg0) {
18}
19
@Override
+ public int GetCount () {
return Mlistviews.size ();
23}
24
@Override
Public Object Instantiateitem (View arg0, int arg1) {
((Viewpager) arg0). AddView (Mlistviews.get (arg1), 0);
Mlistviews.get return (ARG1);
29}
30
@Override
public boolean isviewfromobject (View arg0, Object arg1) {
return arg0 = = (arg1);
34}
35
@Override
PNs public void Restorestate (parcelable arg0, ClassLoader arg1) {
38}
39
@Override
Parcelable public saveState () {
return null;
43}
44
@Override
Startupdate public void (View arg0) {
47}
48}

Here we implement the loading and unloading of each page card

(3) Initializing animations

1     /**
2      * Initializing animations
3 */
4     private void Initimageview () {
5         cursor = (ImageView) Findviewbyid (r.id.cursor);
6         BMPW = Bitmapfactory.decoderesource (Getresources (), R.DRAWABLE.A)
7                 . getwidth ();//Get Picture width
8         displaymetrics dm = new Displaymetrics ();
9         Getwindowmanager (). Getdefaultdisplay (). Getmetrics (DM);
Ten         int screenw = dm.widthpixels;//Get resolution width
         offset = (SCREENW/3-bmpw)/2;//calculated offsets
Matrix         matrix = new Matrix ();
         matrix.posttranslate (offset, 0);
         Cursor.setimagematrix (matrix);//Set the initial position of the animation
     }

Calculates the offset of the animation movement based on the resolution of the screen and the width of the picture

Implement page-card switching monitoring

1/**
2 * Page Card Toggle Monitoring
3 */
4 public class Myonpagechangelistener implements Onpagechangelistener {
5
6 int one = offset * 2 + bmpw;//page Card 1-page Card 2 offset
7 INT-One * 2;//page Card 1-page Card 3 offset
8
9 @Override
Ten public void onpageselected (int arg0) {
One Animation Animation = null;
Switch (arg0) {
Case 0:
if (Currindex = = 1) {
Animation = new Translateanimation (one, 0, 0, 0);
+ Else if (Currindex = = 2) {
Animation = new Translateanimation (0, 0, 0);
18}
break;
Case 1:
if (Currindex = = 0) {
Animation = new Translateanimation (offset, one, 0, 0);
+ Else if (Currindex = = 2) {
Animation = new Translateanimation (both, one, 0, 0);
25}
break;
Case 2:
if (Currindex = = 0) {
Animation = new Translateanimation (offset, 0, 0);
+ Else if (Currindex = = 1) {
Animation = new Translateanimation (one, 0, 0);
32}
a break;
34}
Currindex = arg0;
Animation.setfillafter (TRUE);//true: The picture stops at the end of the animation
Panax Notoginseng animation.setduration (300);
Cursor.startanimation (animation);
39}
40
@Override
public void onpagescrolled (int arg0, float arg1, int arg2) {
43}
44
@Override
onpagescrollstatechanged public void (int arg0) {
47}
48}

After finishing the work, take a look at the fruits of your labor.

source sharing : HTTP://115.COM/FILE/DPI0UNYG

Android Viewpager Multi-page swipe toggle and animation effects