Android ViewPager多页面滑动切换以及动画效果

ViewPager特点，暂列

1.与ListView一样，初始化时需要传入适配器。

2.多见于相片、图片切换，或进入应用时，介绍切换。

使用步骤

1.在布局文件里加入（同样类似与ListView），不过为兼容版本，引入方式有差异

<android.support.v4.view.ViewPager         android:id="@+id/viewpage"         android:layout_width="match_parent"         android:layout_height="match_parent" />

2.加载要显示的选项卡，即封装显示的view数组

1）布局文件引用

LayoutInflater lf = getLayoutInflater().from(this);view1 = lf.inflate(R.layout.layout1, null);view2 = lf.inflate(R.layout.layout2, null);view3 = lf.inflate(R.layout.layout3, null);viewList = new ArrayList<View>();// 将要分页显示的View装入数组中viewList.add(view1);viewList.add(view2);viewList.add(view3);

2）类文件引用

Intent intent = new Intent(context, A.class);
LocalActivityManager manager = new LocalActivityManager(this , true);
---该对象已被标记为过时
manager.startActivity(id, intent).getDecorView();
3.实例化ViewPager组件，并设置它的PagerAdapter

先看布局activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" ><LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content" >    <TextView        android:id="@+id/tab1"        android:gravity="center"        android:layout_weight="1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/tab1" />    <TextView        android:id="@+id/tab2"        android:gravity="center"        android:layout_weight="1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/tab2" />    <TextView        android:id="@+id/tab3"        android:gravity="center"        android:layout_weight="1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/tab3" />    </LinearLayout>        <!-- 用matrix来绘制 -->    <ImageView        android:id="@+id/cursor"        android:src="@drawable/a"        android:scaleType="matrix"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        /><android.support.v4.view.ViewPager         android:id="@+id/viewpage"         android:layout_width="match_parent"         android:layout_height="wrap_content" /></LinearLayout>

然后是java代码，MainActivity

import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;public class MainActivity extends Activity {private List<View> viewList;private List<String> titleList;private View view1,view2,view3;private ViewPager viewPager;private int offset = 0;// 动画图片偏移量      private int currIndex = 0;// 当前页卡编号      private int bmpW;// 动画图片宽度        private ImageView imageView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);view1 = findViewById(R.layout.tab1);          view2 = findViewById(R.layout.tab2);          view3 = findViewById(R.layout.tab3);         //加载要显示的选项卡        /*         * 通俗的说,inflate就相当于将一个xml中定义的布局找出来.　　因为在一个Activity里如果直接用findViewById()的话,对应的是setConentView()的那个layout里的组件.　　因此如果你的Activity里如果用到别的layout,比如对话框上的layout,你还要设置对话框上的layout里的组件(像图片ImageView,文字TextView)上的内容,你就必须用inflate()先将对话框上的layout找出来,然后再用这个layout对象去找到它上面的组件         */LayoutInflater lf = getLayoutInflater().from(this);view1 = lf.inflate(R.layout.tab1, null);view2 = lf.inflate(R.layout.tab2, null);view3 = lf.inflate(R.layout.tab3, null);viewList = new ArrayList<View>();// 将要分页显示的View装入数组中viewList.add(view1);viewList.add(view2);viewList.add(view3);titleList = new ArrayList<String>();// 每个页面的Title数据          titleList.add("tab1");          titleList.add("tab2");          titleList.add("tab3");                 //为TextView注册监听事件        findViewById(R.id.tab1).setOnClickListener(new MyOnClickListener(0));        findViewById(R.id.tab2).setOnClickListener(new MyOnClickListener(1));        findViewById(R.id.tab3).setOnClickListener(new MyOnClickListener(2));                //初始化图片视图        InitImageView();        //获取ViewPager视图对象        viewPager = (ViewPager) findViewById(R.id.viewpage);                PagerAdapter adapter = new PagerAdapter(){@Overridepublic int getCount() {return viewList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup container, int position,Object object) {container.removeView(viewList.get(position));}@Overridepublic int getItemPosition(Object object) {return super.getItemPosition(object);}@Overridepublic CharSequence getPageTitle(int position) {//获取指定位置的标题名称return titleList.get(position);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {//初始化container.addView(viewList.get(position));                  return viewList.get(position); }                };        viewPager.setAdapter(adapter);        //为ViewPager注册切换触发事件        viewPager.setOnPageChangeListener(new MyOnPageChangeListener());}private class MyOnClickListener implements OnClickListener {private int index = 0;public MyOnClickListener(int index){this.index = index;}@Overridepublic void onClick(View v) {//支持点击视图切换viewPager.setCurrentItem(index);}}private class MyOnPageChangeListener implements OnPageChangeListener{int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量          int two = one * 2;// 页卡1 -> 页卡3 偏移量  @Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) { Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//显然这个比较简洁，只有一行代码。              currIndex = arg0;              animation.setFillAfter(true);// True:图片停在动画结束位置              animation.setDuration(300);             //添加动画            imageView.startAnimation(animation); }}private void InitImageView() {          imageView= (ImageView) findViewById(R.id.cursor);          bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();// 获取图片宽度          DisplayMetrics dm = new DisplayMetrics();          getWindowManager().getDefaultDisplay().getMetrics(dm);          int screenW = dm.widthPixels;// 获取分辨率宽度          offset = (screenW / 3 - bmpW) / 2;// 计算偏移量          Matrix matrix = new Matrix();          matrix.postTranslate(offset, 0);          imageView.setImageMatrix(matrix);// 设置动画初始位置      }}

运行后界面如图，样式较粗糙，重在切换效果

部分代码源自网友，细节处理还需改进学习。