Examples of android viewpaper

1. First of all, let's take a look at the 1 effect drawing, which is the Tab sliding effect of sina weibo. We can swipe by hand or switch by clicking on the header above. In the same way, the white bar is moved to the corresponding header. This is an animation effect, the white bar is slowly sliding past. Okay, so let's do that.

2. Before we begin, we need to recognize a control, ViewPager. It is a class of one additional package that comes with google SDk and can be used to switch between screens. The add-on package is android-support-v4. jar, which will be provided to you in the final source code, is in the libs folder. Of course, you can also search for the latest version from the Internet. Once we find it, we need to add it to the project

3. Let's make the interface first. The interface design is very simple.

 
<?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=" Pp 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=" Pp 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=" Pp 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 need to display 3 page CARDS, so we need to design the interface of the contents of 3 page CARDS. Here we only set the background color, which can make the difference.

 
<?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> 

4. The initialization of the code part (1) starts with the definition of the variable

 
private ViewPager mPager ; // Pp card content  
private List<View> listViews ;  // Tab Page lists  
private ImageView cursor ; //  Animation image  
private TextView t1 .  t2 .  t3 ; //  The header page card  
private int offset = 0 ; //  Animated image offset  
private int currIndex = 0 ; //  Current page card number  
private int bmpW ; //  Animated picture width  

(2) initialize the header

 
/** 
*  Initializes the header  
*/ 
private void InitTextView (a)  { 
t1 =  ( TextView )  findViewById ( R.id.text1 );  
t2 =  ( TextView )  findViewById ( R.id.text2 );  
t3 =  ( TextView )  findViewById ( R.id.text3 );  
t1.setOnClickListener ( new MyOnClickListener ( 0 ));  
t2.setOnClickListener ( new MyOnClickListener ( 1 ));  
t3.setOnClickListener ( new MyOnClickListener ( 2 ));  
} 
/** 
*  Header click listen  
*/ 
public class MyOnClickListener implements View.OnClickListener { 
private int index = 0 ;  
public MyOnClickListener ( int i )  { 
index = i ;  
} 
@Override 
public void onClick ( View v )  { 
mPager.setCurrentItem ( index );  
} 
} ;  

(3) initialize the page card content area

 
<font color="#008000"><font color="black">　　/** 
　　* ViewPager The adapter  
　　*/ 
　　public class MyPagerAdapter extends PagerAdapter { 
　　public List<View> mListViews ;  
　　public MyPagerAdapter ( List<View> mListViews )  { 
　　this.mListViews = mListViews ;  
　　} 
　　@Override 
　　public void destroyItem ( View arg0 .  int arg1 .  Object arg2 )  { 
 (( ViewPager )  arg0 ) .removeView ( mListViews.get ( arg1 ));  
　　} 
　　@Override 
　　public void finishUpdate ( View arg0 )  { 
　　} 
　　@Override 
　　public int getCount (a)  { 
　　return mListViews.size (a);  
　　} 
　　@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 );  
　　} 
　　@Override 
　　public void restoreState ( Parcelable arg0 .  ClassLoader arg1 )  { 
　　} 
　　@Override 
　　public Parcelable saveState (a)  { 
　　return null ;  
　　} 
　　@Override 
　　public void startUpdate ( View arg0 )  { 
　　} 
　　} 
</font></font> 
 Here we have realized the loading and unloading of each page card  (4)  Initialization animation  
/** 
*  Initialization animation  
*/ 
private void InitImageView (a)  { 
cursor =  ( ImageView )  findViewById ( R.id.cursor );  
bmpW = BitmapFactory.decodeResource ( getResources (),  R.drawable.a )  
.getWidth (a); //  Get image width  
DisplayMetrics dm = new DisplayMetrics (a);  
getWindowManager (a) .getDefaultDisplay (a) .getMetrics ( dm );  
int screenW = dm.widthPixels ; //  Get resolution width  
offset =  ( screenW / 3 - bmpW )  / 2 ; //  Calculated offset  
Matrix matrix = new Matrix (a);  
matrix.postTranslate ( offset .  0 );  
cursor.setImageMatrix ( matrix ); //  Sets the initial position of the animation  
} 

Calculate the offset of the motion based on the resolution of the screen and the width of the picture

 
/** 　　*  Page card switch monitor  　　*/ 　　 
public class MyOnPageChangeListener implements OnPageChangeListener { 　　 
int one = offset * 2 + bmpW ; //  Pp card 1 ->  Pp card 2  The offset  　　 
int two = one * 2 ; //  Pp card 1 ->  Pp card 3  The offset  　　 
@Override 　　 
public void onPageSelected ( int arg0 )  { 　　 
Animation animation = null ;  　　 
switch  ( arg0 )  { 　　 
case 0 :  　　 
if  ( currIndex == 1 )  { 　　 
animation = new TranslateAnimation ( one .  0 .  0 .  0 );  　　} 
else if  ( currIndex == 2 )  { 　　 
animation = new TranslateAnimation ( two .  0 .  0 .  0 );  　　} 　　 
break ;  　　case 1 :  　　if  ( currIndex == 0 )  { 　　 
animation = new TranslateAnimation ( offset .  one .  0 .  0 );  　　 
} else if  ( currIndex == 2 )  { 　　 
animation = new TranslateAnimation ( two .  one .  0 .  0 );  　　} 　　 
break ;  　　case 2 :  　　if  ( currIndex == 0 )  { 　　 
animation = new TranslateAnimation ( offset .  two .  0 .  0 );  　　} 
else if  ( currIndex == 1 )  { 　　animation = new TranslateAnimation ( one .  two .  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 )  { 　　} 　　} 

5. Call it a day and look at your work