Android desktop Sliding Screen viewpage

I believe everyone is very envious of the operations on screen drawing on the left and right sides of the android desktop. QQ, Sina Weibo, and androidmarket all have such operations, and many of them are used as the main interface. It can be seen that their user interaction is particularly good.

Today, we will implement this operation with hands-on experience. Viewpage was recently released by Google in compatibilit package. It supports android1.6 + and can be found in the SDK installation directory.

\ Android-SDK-Windows \ extras \ Android \ Compatibility \ V4: import the jar package to the project (this is not necessary)

Let's take a look at the running results:

Well, the above is what we want to do today. First, we will analyze it and see the three tabs in the header and the white background. It is the top layer, a cursor in the middle, and a long image, the following slide is the viewpage.

We will first deploy the layout:

<? 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"> <linearlayout Android: id = "@ + ID/nav" Android: layout_width = "fill_parent" Android: layout_height = "50dp" Android: Background = "# efefef"> <textview Android: id = "@ + ID/tab1" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1.0" Android: gravity = "center" Android: textcolor = "#000000" Android: text = "Page 1"/> <textview Android: Id = "@ + ID/tab2" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1.0" Android: gravity = "center" Android: textcolor = "#000000" Android: TEXT = "Page 2"/> <textview Android: Id = "@ + ID/tab3" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1.0" Android: gravity = "center" Android: textcolor = "#000000" Android: text = "Page 3"/> </linearlayout> <imageview Android: id = "@ + ID/cursor" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: scaletype = "matrix" Android: src = "@ drawable/cursor"/> <android. support. v4.view. viewpager Android: Id = "@ + ID/page" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> </android. support. v4.view. viewpager> </linearlayout>

The sliding part below is three layout: We can use different background colors for convenience.

Layout1:

<?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="#565656">   </LinearLayout>

Layout2:

<?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="#abab00"></LinearLayout>

Layout3:

<?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="#00abcd"></LinearLayout>

Define Variables

Private viewpager myviewpage; private mypageradapter mypagetadapter; private layoutinflater Inflater; private list <View> listviews; private view layout1 = NULL, layout2 = NULL, layout3 = NULL; private textview page1, page2, page3; private imageview cursor; image cursor private int offset = 0; // animation image offset private int currindex = 0; // current card number private int bmgw; // animation Image Width

// Initialize the animation private void initanima () {cursor = (imageview) findviewbyid (R. id. cursor); // initialize the Cursor Image bmgw = bitmapfactory. decoderesource (getresources (), R. drawable. cursor ). getwidth (); // obtain the width of the cursor displaymetrics dm = new displaymetrics (); getwindowmanager (). getdefadisplay display (). getmetrics (DM); int screenw = DM. widthpixels; // screen width offset = (screenw/3-bmgw)/2; // cursor offset matrix = new matrix (); matrix. posttranslate (offset, 0); cursor. setimagematrix (matrix); cursor initial position}

Initialization

Initanima (); myviewpage = (viewpager) findviewbyid (R. id. page); listviews = new arraylist <View> (); Inflater = getlayoutinflater (); layout1 = Inflater. inflate (R. layout. layout1, null); layout2 = Inflater. inflate (R. layout. layout2, null); layout3 = Inflater. inflate (R. layout. layout3, null); listviews. add (layout1); listviews. add (layout2); listviews. add (layout3); page1 = (textview) findviewbyid (R. id. tab1); page2 = (textview) findviewbyid (R. id. tab2); page3 = (textview) findviewbyid (R. id. tab3); listener (New mynavonclicklistener (0); listener (New mynavonclicklistener (1); listener (New mynavonclicklistener (2); mypagetadapter = new mypageradapter (listviews); myviewpage. setadapter (mypagetadapter); myviewpage. setonpagechangelistener (New onpagechangelistener () {int one = offset * 2 + bmgw; // page 1-> page 2 offset int two = one * 2; // page 1-> page 3 offset @ overridepublic void onpageselected (int pos) {// todo auto-generated method stubanimation animation = NULL; Switch (POS) {Case 0: if (currindex = 1) {animation = new translateanimation (one, 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 = 1) {animation = new translateanimation (ONE, TWO, 0, 0);} else if (currindex = 0) {animation = new translateanimation (offset, two, 0, 0 );} break; default: break;} currindex = Pos; animation. setfillafter (true); animation. setduration (1, 300); cursor. setanimation (animation);} @ overridepublic void onpagescrolled (INT arg0, float arg1, int arg2) {// todo auto-generated method stub} @ overridepublic void merge (INT arg0) {// todo auto-generated method stub }});

Set viewpage Adapter

    class MyPagerAdapter extends PagerAdapter{    List<View> views;public MyPagerAdapter(List<View> v) {super();// TODO Auto-generated constructor stub    views = v;}@Overridepublic void destroyItem(View v, int pos, Object arg2) {// TODO Auto-generated method stub((ViewPager) v).removeView(views.get(pos));}@Overridepublic void finishUpdate(View arg0) {// TODO Auto-generated method stub}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn views.size();}@Overridepublic Object instantiateItem(View v, int pos) {// TODO Auto-generated method stub((ViewPager) v).addView(views.get(pos));return views.get(pos);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0==arg1;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method stub}@Overridepublic Parcelable saveState() {// TODO Auto-generated method stubreturn null;}@Overridepublic void startUpdate(View arg0) {// TODO Auto-generated method stub}        }