ViewPager的使用方法和实现过程

ViewPager的使用方法和实现过程

分类： Android_ 2013-01-18 18:19 2875人阅读 评论(3) 收藏 举报

viewpager Viewpager ViewPager

看图先：

        

页面中填充内容是随机关键词飞入和飞出动画效果，随后会更新，现在请先无视吧

首先是 导入jar包   下载地址： android-support-v4.jar

布局文件里添加viewPager布局

[html] view plain copy

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了，主要写了左右滑动切换页面，还有一个小图片随页面切换 位移的动画效果

[java] view plain copy

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

最后，不能忘了ViewPager的Adapter

[java] view plain copy

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