Android viewpaper instance Discussion

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 is moved to the corresponding tab header. 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

3. Let's first make the interface. The interface design is very simple. The first line is marked with three heads, the second line is animated, and the third line is displayed on the page.

Copy codeThe Code is as follows: <? 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 = "1001_dip"
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 = "tab 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 = "Tab 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 = "tab 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 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.Copy codeThe Code is as follows: <? 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. Initialization of code (1) first-come variable definitionCopy codeCode: private ViewPager mPager; // page card content
Private List <View> 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 headerCopy codeThe Code is as follows :/**
* Initialize the header
*/
Private void InitTextView (){
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 listening
*/
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 areaCopy codeThe Code is as follows: <font color = "#008000"> <font color = "black"> /**
* ViewPager 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 (){
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 );
}
@ Override
Public void restoreState (Parcelable arg0, ClassLoader arg1 ){
}
@ Override
Public Parcelable saveState (){
Return null;
}
@ Override
Public void startUpdate (View arg0 ){
}
}
</Font>
Here we have implemented loading and unloading of each page card (4) initialization Animation
/**
* Initialize the animation.
*/
Private void InitImageView (){
Cursor = (ImageView) findViewById (R. id. cursor );
Bmp w = BitmapFactory. decodeResource (getResources (), R. drawable.)
. GetWidth (); // obtain the image width.
DisplayMetrics dm = new DisplayMetrics ();
GetWindowManager (). getDefaultDisplay (). getMetrics (dm );
Int screenW = dm. widthPixels; // gets the resolution width.
Offset = (screenW/3-bmp w)/2; // calculates the offset.
Matrix matrix = new Matrix ();
Matrix. postTranslate (offset, 0 );
Cursor. setImageMatrix (matrix); // you can specify the initial animation position.
}

Calculate the offset of animation movement based on the screen resolution and image width.Copy codeThe Code is as follows:/*** page card switch listener */
Public class MyOnPageChangeListener implements OnPageChangeListener {
Int one = offset * 2 + bmp w; // page Card 1-> page Card 2 offset
Int two = 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 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 image stops at the animation end position.
Animation. setDuration (300 );
Cursor. startAnimation (animation );}
@ Override
Public void onPageScrolled (int arg0, float arg1, int arg2 ){}
@ Override
Public void onPageScrollStateChanged (int arg0 ){}}

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