Android ViewPager multi-page slide switching and animation Effects

Android ViewPager multi-page slide switching and animation Effects

I. First, let's take a look at the Tab sliding effect of Sina Weibo. We can slide by gesture, or click the above header to switch. In the same way,

The White horizontal bar moves to the corresponding tab. This is an animated effect. white bars slide slowly. Now, let's implement it.

2. Before we start, we need to know a control called ViewPager. It is a class that comes with an additional package in the google SDk and can be used to switch between screens.

This additional package is android-support-v4.jar, which will be provided to you in the final source code in the libs folder. You can also search for the latest version on the Internet.

After finding it, we need to add it to the Project

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + Csj9oaLO0sPHz8jX9r3nw + ajrDwvcD4KPHA + Cr3nw + critical/bj2zbex6qOstdq2/tDQtq + critical "http://www.bkjia.com/uploads/allimg/150116/0415322491-2.gif" alt = "Copy code">

 

 
  
Xmlns: umadsdk = "http://schemas.android.com/apk/res/com.LoveBus"
  
Android: layout_width = "fill_parent"
  
Android: layout_height = "fill_parent"
  
Android: orientation = "vertical">
  

  
    
  
   
Android: id = "@ + id/linearLayout1"
   
Android: layout_width = "fill_parent"
   
Android: layout_height = "1001_dip"
   
Android: background = "# FFFFFF">
   

   
        
   
    
Android: id = "@ + id/text1"
    
Android: layout_width = "fill_parent"
    
Android: layout_height = "fill_parent"
    
Android: layout_weight = "1.0"
    
Android: gravity = "center"
    
Android: text = "tab card 1"
    
Android: textColor = "#000000"
    
Android: textSize = "22.0dip"/>
    

    
        
    
     
Android: id = "@ + id/text2"
     
Android: layout_width = "fill_parent"
     
Android: layout_height = "fill_parent"
     
Android: layout_weight = "1.0"
     
Android: gravity = "center"
     
Android: text = "Tab 2"
     
Android: textColor = "#000000"
     
Android: textSize = "22.0dip"/>
     

     
        
     
      
Android: id = "@ + id/text3"
      
Android: layout_width = "fill_parent"
      
Android: layout_height = "fill_parent"
      
Android: layout_weight = "1.0"
      
Android: gravity = "center"
      
Android: text = "tab 3"
      
Android: textColor = "#000000"
      
Android: textSize = "22.0dip"/>
      
    
     
    
   
  
 

    
 
  
Android: id = "@ + id/cursor"
  
Android: layout_width = "fill_parent"
  
Android: layout_height = "wrap_content"
  
Android: scaleType = "matrix"
  
Android: src = "@ drawable/a"/>
  

  
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"/>
  

  

 

We want to display three tabs, so we need to design the pages of the three tabs. Here we only set the background color to make a difference.

 

 
      android:layout_width="fill_parent"
  
    android:layout_height="fill_parent"
  
    android:orientation="vertical"
  
    android:background="#158684" >
  

 

4. Code Initialization

(1) definitions of first-come Variables

Private ViewPager mPager; // page card content
Private List
 
  
ListViews; // Tab page list
  
Private ImageView cursor; // Animated Image
  
Private TextView t1, t2, t3; // tab Header
  
Private int offset = 0; // specifies the animation offset.
  
Private int currIndex = 0; // current page card number
  
Private int bmp w; // animation Image Width
 

(2) initialize the header

1 /**
2 * initialize the header
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 );
8
9 t1.setOnClickListener (new MyOnClickListener (0 ));
10 t2.setOnClickListener (new MyOnClickListener (1 ));
11 t3.setOnClickListener (new MyOnClickListener (2 ));
12}

1 /**
2 * Header click listener
3 */
4 public class MyOnClickListener implements View. OnClickListener {
5 private int index = 0;
6
7 public MyOnClickListener (int I ){
8 index = I;
9}
10
11 @ Override
12 public void onClick (View v ){
13 mPager. setCurrentItem (index );
14}
15 };

I believe it's okay after reading it. Click the first few to display the page card content.

(3) initialize the page card content area

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 ));
  
10 listViews. add (mInflater. inflate (R. layout. lay3, null ));
  
11 mPager. setAdapter (new MyPagerAdapter (listViews ));
  
12 mPager. setCurrentItem (0 );
  
13 mPager. setOnPageChangeListener (new MyOnPageChangeListener ());
  
14}
 

We load the three page cards into it. 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
 
  
MListViews;
  
6
  
7 public MyPagerAdapter (List
  
   
MListViews ){
   
8 this. mListViews = mListViews;
   
9}
   
10
   
11 @ Override
   
12 public void destroyItem (View arg0, int arg1, Object arg2 ){
   
13 (ViewPager) arg0). removeView (mListViews. get (arg1 ));
   
14}
   
15
   
16 @ Override
   
17 public void finishUpdate (View arg0 ){
   
18}
   
19
   
20 @ Override
   
21 public int getCount (){
   
22 return mListViews. size ();
   
23}
   
24
   
25 @ Override
   
26 public Object instantiateItem (View arg0, int arg1 ){
   
27 (ViewPager) arg0). addView (mListViews. get (arg1), 0 );
   
28 return mListViews. get (arg1 );
   
29}
   
30
   
31 @ Override
   
32 public boolean isViewFromObject (View arg0, Object arg1 ){
   
33 return arg0 = (arg1 );
   
34}
   
35
   
36 @ Override
   
37 public void restoreState (Parcelable arg0, ClassLoader arg1 ){
   
38}
   
39
   
40 @ Override
   
41 public Parcelable saveState (){
   
42 return null;
   
43}
   
44
   
45 @ Override
   
46 public void startUpdate (View arg0 ){
   
47}
   
48}
  
 

Here we have implemented the loading and uninstallation of each page card.

(3) initialize the animation

1 /**
2 * initialize the animation
3 */
4 private void InitImageView (){
5 cursor = (ImageView) findViewById (R. id. cursor );
6 bmp w = BitmapFactory. decodeResource (getResources (), R. drawable.)
7. getWidth (); // get the Image Width
8 DisplayMetrics dm = new DisplayMetrics ();
9 getWindowManager (). getDefaultDisplay (). getMetrics (dm );
10 int screenW = dm. widthPixels; // gets the resolution width.
11 offset = (screenW/3-bmp w)/2; // calculate the offset.
12 Matrix matrix = new Matrix ();
13 matrix. postTranslate (offset, 0 );
14 cursor. setImageMatrix (matrix); // you can specify the initial animation position.
15}

Calculate the offset of animation movement based on the screen resolution and image width.

Implement page Card Switching listener

1 /**
2 * Page card switch listener
3 */
4 public class MyOnPageChangeListener implements OnPageChangeListener {
5
6 int one = offset * 2 + bmp w; // page Card 1-> page Card 2 offset
7 int two = one * 2; // page Card 1-> page card 3 offset
8
9 @ Override
10 public void onPageSelected (int arg0 ){
11 Animation animation = null;
12 switch (arg0 ){
13 case 0:
14 if (currIndex = 1 ){
15 animation = new TranslateAnimation (one, 0, 0, 0 );
16} else if (currIndex = 2 ){
17 animation = new TranslateAnimation (two, 0, 0, 0 );
18}
19 break;
20 case 1:
21 if (currIndex = 0 ){
22 animation = new TranslateAnimation (offset, one, 0, 0 );
23} else if (currIndex = 2 ){
24 animation = new TranslateAnimation (two, one, 0, 0 );
25}
26 break;
27 case 2:
28 if (currIndex = 0 ){
29 animation = new TranslateAnimation (offset, two, 0, 0 );
30} else if (currIndex = 1 ){
31 animation = new TranslateAnimation (one, two, 0, 0 );
32}
33 break;
34}
35 currIndex = arg0;
36 animation. setFillAfter (true); // True: the image stops at the animation end position.
37 animation. setDuration (300 );
38 cursor. startAnimation (animation );
39}
40
41 @ Override
42 public void onPageScrolled (int arg0, float arg1, int arg2 ){
43}
44
45 @ Override
46 public void onPageScrollStateChanged (int arg0 ){
47}
48}

5. After finishing the work, let's take a look at your labor achievements.