"Android UI" case 03 implementation of sliding transition effect (Viewpager)

This example uses Viewpager to achieve the effect of sliding transitions. This example relates to the Viewpager, which is android.support.v4.view.ViewPager. So you need to import Android-support-v4.jar into your Android project.
In this case, Viewpager is the core of the implementation of the sliding effect. Setting Pagechangelistener monitoring Events is the core idea of realizing the sliding effect.

"Reproduced use, please specify the source: http://blog.csdn.net/mahoking "
The first is the main interface layout.xml file, Activity_03_viewpager.xml. The layout of the main interface is the top of the page label, click on the label or sliding page can be implemented to switch the page function.

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "android:orientation=" vertical " > <linearlayout android:layout_width= "match_parent" android:layout_height= "40DP" Android:orientatio             n= "Horizontal" > <textview android:layout_height= "match_parent" android:layout_width= "Match_parent" android:layout_weight= "1" android:gravity= "center" android:text= "tab" Andro Id:id= "@+id/activity_03_viewpager_textview_01"/> <textview android:layout_height= "Match_parent" an Droid:layout_width= "Match_parent" android:layout_weight= "1" android:text= "tab" on Android: gravity= "center" android:id= "@+id/activity_03_viewpager_textview_02"/> <textview android:layout_he Ight= "Match_parent" AndroidOid:layout_width= "Match_parent" android:layout_weight= "1" android:gravity= "center" Androi        d:text= "tab android:id=" @+id/activity_03_viewpager_textview_03 "/> </linearlayout><imageview        Android:id= "@+id/cursor" android:layout_width= "match_parent" android:layout_height= "Wrap_content"        Android:scaletype= "Matrix" android:src= "@drawable/example03_cursor"/><android.support.v4.view.viewpager Android:id= "@+id/activity_03_viewpager_vpager" android:layout_width= "Wrap_content" Android:layout_heig ht= "wrap_content" android:layout_gravity= "Center" android:layout_weight= "1.0" android:background= "#00 0000 "android:flipinterval=" "android:persistentdrawingcache=" animation "/></linearlayout>

The above requires a ImageView component that implements the effect of a dynamically moving label, which allows the reader to choose the bottom rectangular image under its preferred label. You can refer to the effect.
The preparation of the main activity (viewpageractivity). The first is the definition of the global variable:

Private Viewpager mpager;//page card content private list<view> listviews; tab page List private ImageView cursor;//animated picture 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

This example provides three ways to initialize the layout space, namely: Inittextviews (), Initimageview (), Initviewpager ().

Inittextviews ()

private void Inittextviews () {t1 = (TextView) Findviewbyid (r.id.activity_03_viewpager_textview_01); t2 = (TextView) Findviewbyid (r.id.activity_03_viewpager_textview_02); t3 = (TextView) Findviewbyid (r.id.activity_03_viewpager_ TEXTVIEW_03); T1.setonclicklistener (new Myonclicklistener (0)); T2.setonclicklistener (new Myonclicklistener (1)); T3.setonclicklistener (New Myonclicklistener (2));}

Initimageview ()

private void Initviewpager () {Mpager = (Viewpager) Findviewbyid (r.id.activity_03_viewpager_vpager); listviews = new Arraylist<view> (); Layoutinflater minflater = Getlayoutinflater (); Listviews.add (minflater.inflate (r.layout.layout_03_layout01, NULL)) ; Listviews.add (minflater.inflate (r.layout.layout_03_layout02, null)); Listviews.add (Minflater.inflate ( r.layout.layout_03_layout03, null)); Mpager.setadapter (new Viewpageradapter (ListViews)); Mpager.setcurrentitem (0); Mpager.setonpagechangelistener (New Myonpagechangelistener ());}

Initviewpager ()

/** * Initialize animation */private void Initimageview () {cursor = (ImageView) Findviewbyid (r.id.cursor); BMPW = Bitmapfactory.decoderes Ource (Getresources (), r.drawable.example03_cursor). GetWidth ();//Get picture width displaymetrics dm = new Displaymetrics (); Getwindowmanager (). Getdefaultdisplay (). Getmetrics (DM); int screenw = dm.widthpixels;//Get resolution width offset = (SCREENW/3- BMPW)/2;//compute offset Matrix matrix = new Matrix () matrix.posttranslate (offset, 0); Cursor.setimagematrix (matrix);// Set animation initial Position}

The above method can be seen, this example needs two internal classes Myonclicklistener, Myonpagechangelistener, to handle the listener event.
Myonclicklistener

/** * Tap Listener event * */public class Myonclicklistener implements View.onclicklistener {private int index = 0;public Myonclicklis tener (int i) {index = i;} @Overridepublic void OnClick (View v) {mpager.setcurrentitem (index);}};

Myonpagechangelistener

/** * * Page card Toggle Listener */public class Myonpagechangelistener implements onpagechangelistener{int one = offset * 2 + bmpw;//page Card 1-             > page Card 2 offset int-one * 2;//page Card 1-page Card 3 offset @Override public void onpageselected (int arg0) {             Animation Animation = null; Switch (arg0) {case 0:if (currindex = = 1) {animation = new Translateanimat                 Ion (one, 0, 0, 0);                 } else if (Currindex = = 2) {animation = new Translateanimation (0, 0, 0);            } break;                 Case 1:if (Currindex = = 0) {animation = new Translateanimation (offset, one, 0, 0);                 } else if (Currindex = = 2) {animation = new Translateanimation (both, one, 0, 0);            } break; Case 2:if (Currindex = = 0) {animation = new Translateanimation (offset, TWO, 0, 0);                 } else if (Currindex = = 1) {animation = new Translateanimation (one, 0, 0);            } break;             } currindex = arg0;             Animation.setfillafter (TRUE);//true: The picture stops at the end of the animation animation.setduration (300);         Cursor.startanimation (animation);        } @Override public void onpagescrolled (int arg0, float arg1, int arg2) {} @Override public void onpagescrollstatechanged (int arg0) {}}

To Add this, this example needs to show three page cards, so also need three page card content interface design, here we only set the background color, only to play a different role.

Layout_03_layout01.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:layout_width= "Match_ Parent "    android:layout_height=" match_parent "    android:orientation=" vertical "     android:background=" # FF6666 ">    </LinearLayout>

Effect:

"Reproduced use, please specify the source: http://blog.csdn.net/mahoking "

Android UI Case 03 implementation of sliding transition effect (Viewpager)