仿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偏移量
			@Override
			public void onPageSelected(int pos) {
				// TODO Auto-generated method stub
				Animation 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);
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public 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;
		}

		@Override
		public void destroyItem(View v, int pos, Object arg2) {
			// TODO Auto-generated method stub
			((ViewPager) v).removeView(views.get(pos));
		}

		@Override
		public void finishUpdate(View arg0) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return views.size();
		}

		@Override
		public Object instantiateItem(View v, int pos) {
			// TODO Auto-generated method stub
			((ViewPager) v).addView(views.get(pos));
			return views.get(pos);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0==arg1;
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public Parcelable saveState() {
			// TODO Auto-generated method stub
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
			// TODO Auto-generated method stub
			
		}
    	
    }