ViewPager实现页面滑动的学习与使用

app里面的ViewPager滑动页面的效果应该是非常常见的用户与app交互的效果，滑动页面是的app更加灵活也更加利于用户单手时操作手机上的事务。

今天就学习一下ViewPager的用法。

首先观察一下项目里面的Android-Private-Library里面有个Android自带的包android-support-v4.jar，里面有个包名是下图画出红线的名字，里面点开就会发现ViewPager这个类，就是我们这次使用的类，用来实现页面滑动切换。





下面先上代码：

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:id="@+id/linearlayout"

        android:layout_width="match_parent"

        android:layout_height="60dp"

        android:orientation="horizontal" >

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="60dp"

            android:layout_weight="1"

            android:gravity="center"

            android:text="One"

            android:textSize="30sp" />

        <TextView

            android:id="@+id/textView2"

            android:layout_width="wrap_content"

            android:layout_height="60dp"

            android:layout_weight="1"

            android:gravity="center"

            android:text="Two"

            android:textSize="30sp" />

        <TextView

            android:id="@+id/textView3"

            android:layout_width="wrap_content"

            android:layout_height="60dp"

            android:layout_weight="1"

            android:gravity="center"

            android:text="Three"

            android:textSize="30sp" />

    </LinearLayout>

    <ImageView

        android:id="@+id/cursor"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#ffffff"

        android:scaleType="matrix"

        android:src="@drawable/a" />

    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_gravity="center"

        android:layout_weight="1"

        android:flipInterval="30"

        android:persistentDrawingCache="animation" />

</LinearLayout>

布局是头上一列三个tab，然后下面一条横线的Image实现滑动动画的效果，下面就是Viewpager。其他的布局就是简单的三个空白的布局用于滑动显示，自己随意写。

Java：

//初始化TextView，并绑定监听器，并监听点击事件

public void initTextView() {

textView1 = (TextView) findViewById(R.id.textView1);
textView2 = (TextView) findViewById(R.id.textView2);
textView3 = (TextView) findViewById(R.id.textView3);
textView1.setOnClickListener(new MyClickListener(0));
textView2.setOnClickListener(new MyClickListener(1));
textView3.setOnClickListener(new MyClickListener(2));
}

自己的点击类实现OnClickListener接口，当点击哪个TextView就显示哪个界面

public class MyClickListener implements OnClickListener {
int index = 0;
public MyClickListener(int i) {

index = i;

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

接下来是初始化Viewpager布局：

public void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
listView = new ArrayList<View>();
LayoutInflater inflater = LayoutInflater.from(getApplicationContext());
listView.add(inflater.inflate(R.layout.viewpager1, null));
listView.add(inflater.inflate(R.layout.viewpager2, null));
listView.add(inflater.inflate(R.layout.viewpager3, null));
viewPager.setAdapter(new MyPagerAdapter(listView));
viewPager.setCurrentItem(0);// 设置当前默认的是第一个view
viewPager.setOnPageChangeListener(new MyPageChangeListener());
}

把自己设计的布局一个个加载到listView里面，并且设置ViewPager的适配器以及滑动的监听器

public class MyPagerAdapter extends PagerAdapter {
List<View> list;
public MyPagerAdapter(List<View> list) {
this.list = list;

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

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

                  //添加选项卡
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
((ViewPager) container).addView(list.get(position), 0);
return list.get(position);
}

             // 移除选项卡
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager) container).removeView(list.get(position));
}
}

public class MyPageChangeListener implements OnPageChangeListener {

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
Animation animation = new TranslateAnimation(tabWidth
* currentIndex + offset, tabWidth * arg0 + offset, 0, 0);
currentIndex = arg0;
animation.setFillAfter(true);
animation.setDuration(350);
cursor.startAnimation(animation);
}
}

tabWidth是这里的三个Tab的每个宽度，offset是下图标的X方向的移动位移。整个tab栏的具体表示情况是这样的：

  offset  | bitmapW | offset | offset | bitmapW | offset | offset | bitmapW | offset 

            一个图片宽度加上两个offset就是一个TabWidth。

TranslationAnimation的参数第一二个表示从X的方向上的起始位置到末尾位置，三四参数表示的是Y方向上的移动距离，因为这里只是水平滑动，所以不需要Y方向上的平移。

还有就是初始化各种距离，具体表示的意思上面都解释清楚了：

public void initImageView() {

                //获得屏幕宽度

              DisplayMetrics display = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(display);
int screenWidth = display.widthPixels;
cursor = (ImageView) findViewById(R.id.cursor);

                //得到图片的宽度
cursorWidth = BitmapFactory
.decodeResource(getResources(), R.drawable.a).getWidth();

              //得到每个tab的宽度
tabWidth = screenWidth / listView.size();

               //如果图片的宽度大于每个tab的宽度，就让图片的宽度变为tab的宽度
if (tabWidth < cursorWidth) {
cursor.getLayoutParams().width = tabWidth;
cursorWidth = tabWidth;

}

                 //除以2，让图片两边的宽度一样大小，左右协调
offset = (tabWidth - cursorWidth) / 2;
}

最后上效果图：





好了，一个完整的ViewPager就这么出来了，虽然很简单但很实用！

源码地址：http://download.csdn.net/detail/u011388551/8777311