ViewPager的使用方法和实现过程

布局文件里添加viewPager布局

1. <android.support.v4.view.ViewPager
2. android:id=”@+id/search_viewpager”
3. android:layout_width=”wrap_content”
4. android:layout_height=”wrap_content”
5. android:layout_gravity=”center” >
6. </android.support.v4.view.ViewPager>

再创建两个item布局用于填充在ViewPager里

然后就是Activity了，主要写了左右滑动切换页面，还有一个小图片随页面切换 位移的动画效果

1. public class SearchAllcityActivity extends Activity {
2. private KeywordsFlow keywordsFlow;
3. private ViewPager viewPager;
4. private ImageView imageView;
5. private List<View> lists = new ArrayList<View>();
6. private ViewPagerAdapter adapter;
7. private Bitmap cursor;
8. private int offSet;
9. private int currentItem;
10. private Matrix matrix = new Matrix();
11. private int bmWidth;
12. private Animation animation;
13. private Button shuaxin_sq, shuaxin_fl;
14. public void onCreate(Bundle savedInstanceState) {
15. super.onCreate(savedInstanceState);
16. setContentView(R.layout.search_allcity);
17. // 随页面滑动图片
18. imageView = (ImageView) findViewById(R.id.viewpaget_img);
19. // 热门商圈和热门分类 页面添加到viewPager集合
20. lists.add(getLayoutInflater().inflate(R.layout.search_hot_shangqu, null));
21. lists.add(getLayoutInflater().inflate(R.layout.search_hot_fenlei, null));
22. // 初始化滑动图片位置
23. initeCursor();
24. adapter = new ViewPagerAdapter(lists);
25. viewPager = (ViewPager) findViewById(R.id.search_viewpager);
26. viewPager.setAdapter(adapter);
27. // ViewPager滑动监听器
28. viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
29. @Override
30. public void onPageSelected(int arg0) {
31. // TODO Auto-generated method stub
32. // 当滑动时，顶部的imageView是通过animation缓慢的滑动
33. switch (arg0) {
34. case 0:
35. if (currentItem == 1) {
36. animation = new TranslateAnimation(offSet * 2 + bmWidth, 0, 0,0);
37. } else if (currentItem == 2) {
38. animation = new TranslateAnimation(offSet * 4 + 2 * bmWidth, 0,0, 0);
39. }
40. break;
41. case 1:
42. if (currentItem == 0) {
43. animation = new TranslateAnimation(0, offSet * 2 + bmWidth, 0,0);
44. } else if (currentItem == 2) {
45. animation = new TranslateAnimation(4 * offSet + 2 * bmWidth,offSet * 2 + bmWidth, 0, 0);
46. }
47. break;
48. }
49. currentItem = arg0;
50. animation.setDuration(500);
51. animation.setFillAfter(true);
52. imageView.startAnimation(animation);
53. }
54. @Override
55. public void onPageScrolled(int arg0, float arg1, int arg2) {
56. // TODO Auto-generated method stub
57. }
58. @Override
59. public void onPageScrollStateChanged(int arg0) {
60. // TODO Auto-generated method stub
61. }
62. });
63. }
64. /**
65. * 计算滑动的图片的位置
66. */
67. private void initeCursor() {
68. cursor = BitmapFactory.decodeResource(getResources(),R.drawable.viewpager_img);
69. bmWidth = cursor.getWidth();
70. DisplayMetrics dm;
71. dm = getResources().getDisplayMetrics();
72. offSet = (dm.widthPixels – 2 * bmWidth) / 4;
73. matrix.setTranslate(offSet, 0);
74. imageView.setImageMatrix(matrix); // 需要iamgeView的scaleType为matrix
75. currentItem = 0;
76. }
77. }

最后，不能忘了ViewPager的Adapter

1. public class ViewPagerAdapter extends PagerAdapter{
2. List<View> viewLists;
3. public ViewPagerAdapter(List<View> lists)
4. {
5. viewLists = lists;
6. }
7. @Override
8. public int getCount() {                                                                 //获得size
9. // TODO Auto-generated method stub
10. return viewLists.size();
11. }
12. @Override
13. public boolean isViewFromObject(View arg0, Object arg1) {
14. // TODO Auto-generated method stub
15. return arg0 == arg1;
16. }
17. @Override
18. public void destroyItem(View view, int position, Object object)                       //销毁Item
19. {
20. ((ViewPager) view).removeView(viewLists.get(position));
21. }
22. @Override
23. public Object instantiateItem(View view, int position)                                //实例化Item
24. {
25. ((ViewPager) view).addView(viewLists.get(position), 0);
26. return viewLists.get(position);
27. }
28. }