ViewPager的使用方法和实现过程

看图先：

        

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

 

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

 

 

布局文件里添加viewPager布局

 

[html] view plaincopyprint?
  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 plaincopyprint?
  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. }  
public class SearchAllcityActivity extends Activity {

	private KeywordsFlow keywordsFlow;
	private ViewPager viewPager;
	private ImageView imageView;
	private List<View> lists = new ArrayList<View>();
	private ViewPagerAdapter adapter;
	private Bitmap cursor;
	private int offSet;
	private int currentItem;
	private Matrix matrix = new Matrix();
	private int bmWidth;
	private Animation animation;
	private Button shuaxin_sq, shuaxin_fl;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.search_allcity);

		// 随页面滑动图片
		imageView = (ImageView) findViewById(R.id.viewpaget_img);
		// 热门商圈和热门分类 页面添加到viewPager集合
		lists.add(getLayoutInflater().inflate(R.layout.search_hot_shangqu, null));
		lists.add(getLayoutInflater().inflate(R.layout.search_hot_fenlei, null));
		// 初始化滑动图片位置
		initeCursor();
		adapter = new ViewPagerAdapter(lists);
		viewPager = (ViewPager) findViewById(R.id.search_viewpager);
		viewPager.setAdapter(adapter);
		// ViewPager滑动监听器
		viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				// 当滑动时，顶部的imageView是通过animation缓慢的滑动
				switch (arg0) {
				case 0:
					if (currentItem == 1) {
						animation = new TranslateAnimation(offSet * 2 + bmWidth, 0, 0,0);
					} else if (currentItem == 2) {
						animation = new TranslateAnimation(offSet * 4 + 2 * bmWidth, 0,0, 0);
					}
					
					break;
				case 1:
					if (currentItem == 0) {
						animation = new TranslateAnimation(0, offSet * 2 + bmWidth, 0,0);
					} else if (currentItem == 2) {
						animation = new TranslateAnimation(4 * offSet + 2 * bmWidth,offSet * 2 + bmWidth, 0, 0);
					}
					
					
					break;
				}
				currentItem = arg0;
				animation.setDuration(500);
				animation.setFillAfter(true);
				imageView.startAnimation(animation);

			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
		
	}

	
	/**
	 * 计算滑动的图片的位置
	 */
	private void initeCursor() {
		cursor = BitmapFactory.decodeResource(getResources(),R.drawable.viewpager_img);
		bmWidth = cursor.getWidth();
		DisplayMetrics dm;
		dm = getResources().getDisplayMetrics();
		offSet = (dm.widthPixels - 2 * bmWidth) / 4;
		matrix.setTranslate(offSet, 0);
		imageView.setImageMatrix(matrix); // 需要iamgeView的scaleType为matrix
		currentItem = 0;
	}

}

 

最后，不能忘了ViewPager的Adapter

 

 

[java] view plaincopyprint?
  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. }  
posted @ 2013-10-27 23:46  brave-sailor  阅读(560)  评论(0)  编辑  收藏  举报