First, let's take a look at the effect chart, which is the tab sliding effect of Sina Weibo. We can slide the gesture, or we can click on the top header to toggle. In the same way, the white bars will be moved to the corresponding page card header. This is an animated effect, the White stripes are slowly sliding past. Well, then we're going to implement it.
Second, before we begin, we should first recognize a control, Viewpager. It is a class of add-on packages in the Google SDK that can be used to switch between screens. This add-on package is android-support-v4. The jar, in the final source code will be provided to you in the Libs folder. Of course, you can also search the latest version from the Internet. Once we find it, we need to add it to the project.
Third, we first do the interface, the interface design is very simple, the first line three headers, the second action picture, the third line of page card content display.
Copy Code code 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= "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.
Copy Code code 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>
Four, the code part to initialize the work (1) first to the definition of the variable
Copy Code code as follows:
Private Viewpager mpager;//Page card content
Private list<view> listviews//tab page List
Private ImageView cursor;//Animated picture
Private TextView T1, T2, t3;//page card header
private int offset = 0;//animation picture offset
private int currindex = 0;//Current Page card number
private int bmpw;//animation picture width
(2) Initialization header
Copy Code code as follows:
/**
* Initialize 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));
}
/**
* Head Punctuation Tapping
*/
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 content area of the page card
Copy Code code 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></font>
Here we implement the loading and unloading of each page card (4) Initialize animation
/**
* Initialize Animation
*/
private void Initimageview () {
cursor = (ImageView) Findviewbyid (r.id.cursor);
BMPW = Bitmapfactory.decoderesource (Getresources (), R.DRAWABLE.A)
. 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 offsets
Matrix matrix = new Matrix ();
Matrix.posttranslate (offset, 0);
Cursor.setimagematrix (matrix);//Set the initial position of the animation
}
Calculates the offset of an animation movement based on the resolution of the screen and the width of the picture
Copy Code code as follows:
/** * Page Card switching monitor * *
public class Myonpagechangelistener implements Onpagechangelistener {
int one = offset * 2 + bmpw;//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 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) {}}
After the end of the call, come and see the fruits of their labor
