使用ViewPager實作頁面滑動(點選)跳轉效果(類似于微信頁面)

仿微信頁面，實作滑動跳轉的效果，點選也可以，使用到ViewPager的知識和動畫的效果，動畫圖檔主要用來标志目前頁面，顯示滑動軌迹。

主Activity代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#222222" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView 
            android:id="@+id/textView1"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="#999999"
            android:gravity="center"
            android:text="頁面1"
            android:textColor="#222222"
            />
        <TextView 
            android:id="@+id/textView2"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="#999999"
            android:gravity="center"
            android:text="頁面2"
            android:textColor="#222222"
            />
        <TextView
            android:id="@+id/textView3"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="#999999"
            android:gravity="center"
            android:text="頁面3"
            android:textColor="#222222"
            />
    </LinearLayout>
    <ImageView 
        android:id="@+id/cursor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/cursor"
        android:background="#222222"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
    
</LinearLayout>
           

Layout1.xml的代碼(其他兩個省略不寫了，原理都一樣)：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ff0000" >
</LinearLayout>
           

重寫一個PagerAdapter

package com.example.pager;


import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.support.v4.view.ViewPager;

public class MyAdapter extends PagerAdapter{

    List<View> viewLists;
    
    public MyAdapter(List<View> lists)
    {
        viewLists = lists;
    }

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

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {                         
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }
    
    @Override
    public void destroyItem(View view, int position, Object object)                       //銷毀Item
    {
        ((ViewPager) view).removeView(viewLists.get(position));
    }
    
    @Override
    public Object instantiateItem(View view, int position)                                //執行個體化Item
    {
        ((ViewPager) view).addView(viewLists.get(position), 0);
        return viewLists.get(position);
    }
    
}
           

主Activity的頁面代碼如下：

package com.example.pager;

import java.util.List;
import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.TextView;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.DisplayMetrics;
import android.graphics.Matrix;
import android.widget.ImageView;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;

public class MainActivity extends Activity {

	private ViewPager viewPager;
	private ImageView imageView;
	private List<View> lists = new ArrayList<View>();
	private MyAdapter myAdapter;
	private Bitmap cursor;
	private int offSet;
	private int currentItem;
	private Matrix matrix = new Matrix();// 矩陣
	private int bmWidth;
	private Animation animation;//動畫效果
	private TextView textView1;
	private TextView textView2;
	private TextView textView3;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		imageView = (ImageView) findViewById(R.id.cursor);
		textView1 = (TextView) findViewById(R.id.textView1);
		textView2 = (TextView) findViewById(R.id.textView2);
		textView3 = (TextView) findViewById(R.id.textView3);

		lists.add(getLayoutInflater().inflate(R.layout.layout1, null));
		lists.add(getLayoutInflater().inflate(R.layout.layout2, null));
		lists.add(getLayoutInflater().inflate(R.layout.layout3, null));

		initeCursor();

		myAdapter = new MyAdapter(lists);

		viewPager = (ViewPager) findViewById(R.id.viewPager);
		viewPager.setAdapter(myAdapter);
		viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {// 當滑動式，頂部的imageView是通過animation緩慢的滑動
				/*
				 * TranslateAnimation(float formXDelta,float toXDelta,float
				 * fromYDelta,float toYDelta)前兩個參數的意思分别代表是動畫開始點(結束點)距離起始位置的X坐标內插補點
				 * 後兩個參數就是帶便動畫開始點
				 * (結束點)距離起始位置的Y坐标內插補點，動畫最開始的XY坐标分别為(0,0),以上四個值是相對值，不是絕對值
				 */
				switch (arg0) {
				case 0://要選擇的頁面是0
					if (currentItem == 1) {//目前頁面是1的時候
						animation = new TranslateAnimation(
								offSet * 2 + bmWidth, 0, 0, 0);
					} else if (currentItem == 2) {//目前頁面時2的時候
						animation = new TranslateAnimation(offSet * 4 + 2
								* bmWidth, 0, 0, 0);
					}
					break;
				case 1:
					if (currentItem == 0) {
						animation = new TranslateAnimation(0, offSet * 2
								+ bmWidth, 0, 0);
					} else if (currentItem == 2) {
						animation = new TranslateAnimation(offSet * 4 + bmWidth
								* 2, offSet * 2 + bmWidth, 0, 0);
					}
					break;
				case 2:
					if (currentItem == 0) {
						animation = new TranslateAnimation(0, 4 * offSet + 2
								* bmWidth, 0, 0);
					} else if (currentItem == 1) {
						animation = new TranslateAnimation(
								offSet * 2 + bmWidth, 4 * offSet + 2 * bmWidth,
								0, 0);
					}
				}
				currentItem = arg0;

				animation.setDuration(500);// 設定動畫持續時間
				animation.setFillAfter(true);// 動畫終止時停留在最後一幀，不然會回到沒有執行之前的狀态
				imageView.startAnimation(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

			}
		});
		// ==========點選tevtView跳轉事件
		textView1.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				viewPager.setCurrentItem(0);
			}
		});

		textView2.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				viewPager.setCurrentItem(1);
			}
		});

		textView3.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				viewPager.setCurrentItem(2);
			}
		});
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	private void initeCursor() {
		cursor = BitmapFactory
				.decodeResource(getResources(), R.drawable.cursor);
		bmWidth = cursor.getWidth();

		DisplayMetrics dm;
		dm = getResources().getDisplayMetrics();

		offSet = (dm.widthPixels - 3 * bmWidth) / 6;// dm.widthPixels的意思是擷取螢幕分辨率的寬度
		matrix.setTranslate(offSet, 0);// 是圖檔移動到某一個位置
		imageView.setImageMatrix(matrix);// 需要iamgeView的scaleType為matrix
		currentItem = 0;
	}
}
           

根據螢幕的分辨率和圖檔的寬度計算偏移量（這部分是個重點）

效果圖如下：