使用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;
}
}

根据屏幕的分辨率和图片的宽度计算偏移量（这部分是个重点）



效果图如下：