样例:
1 主要的Activity 实现
/** * ViewPager 的使用 */ public class ViewPagerActivity extends Activity { private ViewPager mPager; private List<View> listViews; private ImageView cursor; private TextView t1, t2, t3; private int offset = 0;//移动条图片的偏移量 private int currIndex = 0;//当前页面的编号 private int bmpWidth;// 移动条图片的长度 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_pager); initCursorPos(); initView(); } //完成View组件的初始化,并将三个view动态地添加到Adapter对象中 //然后调用setAdapter将view集合与ViewPager绑定,设置进去的页面 //指向第一个页面setCurrentItem(0),最后设置onclick和onPageChange监听器 public void initView() { mPager = (ViewPager) findViewById(R.id.vPager); t1 = (TextView) findViewById(R.id.text1); t2 = (TextView) findViewById(R.id.text2); t3 = (TextView) findViewById(R.id.text3); listViews = new ArrayList<View>(); LayoutInflater mInflater = getLayoutInflater(); listViews.add(mInflater.inflate(R.layout.activity_view_pager2, null)); listViews.add(mInflater.inflate(R.layout.activity_view_pager3, null)); listViews.add(mInflater.inflate(R.layout.activity_view_pager4, null)); mPager.setAdapter(new MyPageAdapter(listViews)); mPager.setCurrentItem(0); t1.setOnClickListener(new MyClickListener(0)); t2.setOnClickListener(new MyClickListener(1)); t3.setOnClickListener(new MyClickListener(2)); mPager.setOnPageChangeListener(new MyOnPageChangeListener()); } //初始化指示器的位置,就是下面那个移动条一开始放的地方 public void initCursorPos() { cursor = (ImageView) findViewById(R.id.cursor); bmpWidth = BitmapFactory.decodeResource(getResources(), R.drawable.gdt) .getWidth();// 获取图片宽度 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenW = dm.widthPixels;// 获取分辨率宽度 offset = (screenW / 3 - bmpWidth) / 2;// 计算偏移量 Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); cursor.setImageMatrix(matrix);// 设置动画初始位置 } //设置点击事件,点击上面文字切换页面的 public class MyClickListener implements OnClickListener { private int index = 0; public MyClickListener(int i) { index = i; } @Override public void onClick(View arg0) { mPager.setCurrentItem(index); } } //监听页面切换时间,主要做的是动画处理,就是移动条的移动 public class MyOnPageChangeListener implements OnPageChangeListener { int one = offset * 2 + bmpWidth;// 移动一页的偏移量,比如1->2,或者2->3 (这个数值等于一个导航条的宽度) int two = one * 2;// 移动两页的偏移量,比如1直接跳3 @Override public void onPageSelected(int index) { Animation animation = null; //index为当前选择的是哪个页面 switch (index) { 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 == 0) { animation = new TranslateAnimation(offset, two, 0, 0); } else if (currIndex == 1) { animation = new TranslateAnimation(one, two, 0, 0); } break; } currIndex = index; animation.setFillAfter(true);// true表示图片停在动画结束位置 animation.setDuration(300); //设置动画时间为300毫秒 cursor.startAnimation(animation);//开始动画 } @Override public void onPageScrollStateChanged(int arg0) {} @Override public void onPageScrolled(int arg0, float arg1, int arg2) {} } }
2 PagerAdapter 类
public class MyPageAdapter extends PagerAdapter { private List<View> viewLists; public MyPageAdapter() {} public MyPageAdapter(List<View> viewLists) { super(); this.viewLists = viewLists; } //获得viewpager中有多少个view @Override public int getCount() { return viewLists.size(); } /** * 通常这么写就可以了 */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } /** * ①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来 * ②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了, */ @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(viewLists.get(position)); return viewLists.get(position); } //移除一个给定位置的页面。 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(viewLists.get(position)); } }
3 xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="60dp" android:background="#FFFFFF" > <TextView android:id="@+id/text1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="红色" /> <TextView android:id="@+id/text2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="蓝色"/> <TextView android:id="@+id/text3" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="黄色" /> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/gdt" /> <android.support.v4.view.ViewPager android:id="@+id/vPager" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_gravity="center" android:layout_weight="1.0" android:flipInterval="30" android:persistentDrawingCache="animation" /> </LinearLayout>
4 每一个pager中的4个xml都差不多一样,只贴一个
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="#FF6666"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第一个Page" /> </LinearLayout>