仿android案頭滑屏 ViewPage

    相信大家都對android案頭左右劃屏操作很羨慕吧，QQ，新浪weibo，AndroidMarket都有這種操作，而且很多都作為主介面使用，可見其使用者互動性特別好。

    今天就把這種操作親手實現，大家共同學習。ViewPage是Google最近在Compatibilit package發布的，支援android1.6+,可以在SDK安裝目錄下找到

  \android-sdk-windows\extras\android\compatibility\v4，把這個jar包匯入項目就可以了(這個就不用說了吧)

  我們先看一看運行結果吧：如下：

    

   好了 ，上面這就是我們今天要做的，首先我們先進行分析，看到頭部三個頁卡，及白色背景，那是最上層，中間是一個遊標，一個長條圖片，下面滑動的就是ViewPage了。

   我們先將這個布局布好：

  

<?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="頁片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="頁片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="頁片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>

下面滑動的部分就是3個Layout：為了方便我們就用不同的背景色來區分吧

 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>

定義變數

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; 圖片遊標private int offset=0;  //動畫圖片位移量private int currIndex=0; //當前卡片編號private int bmgW; //動畫圖片寬度

    //初始化動畫    private void initAnima(){    cursor = (ImageView)findViewById(R.id.cursor);  //初始化遊標圖片    bmgW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth(); //得到遊標的寬度    DisplayMetrics dm = new DisplayMetrics();     getWindowManager().getDefaultDisplay().getMetrics(dm);    int screenW = dm.widthPixels; //螢幕寬度    offset=(screenW/3-bmgW)/2; //遊標位移量    Matrix matrix=new Matrix();     matrix.postTranslate(offset, 0);     cursor.setImageMatrix(matrix); 遊標初始位置    }

初始化

        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);        page1.setOnClickListener(new MyNavOnClickListener(0));        page2.setOnClickListener(new MyNavOnClickListener(1));        page3.setOnClickListener(new MyNavOnClickListener(2));        mypagetadapter = new MyPagerAdapter(listviews);        myviewpage.setAdapter(mypagetadapter);        myviewpage.setOnPageChangeListener(new OnPageChangeListener() {int one = offset*2+bmgW; //頁片1->頁片2 位移量int two=one*2; //頁片1->頁片3位移量@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, 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(300);cursor.setAnimation(animation);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});

  設定ViewPage適配器  

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