首页 > 代码库 > ViewPager实现图片轮翻效果

ViewPager实现图片轮翻效果

很多App都有这种效果,特别一些电商类的App,顶部每隔几秒钟会向右翻页显示下张图片,用来作推广或者内容展示用的。今天来简单地模仿一下,还自带一个自动跳动的小功能(底部有几个小点,图片移动的时候,点的状态也在变化),用定时器来实现不难。

[java] view plaincopyprint?

  1. import java.util.ArrayList;  
  1. import java.util.concurrent.Executors;  
  1. import java.util.concurrent.ScheduledExecutorService;  
  1. import java.util.concurrent.TimeUnit;  
  1.   
  1. import android.app.Activity;  
  1. import android.os.Bundle;  
  1. import android.os.Handler;  
  1. import android.os.Message;  
  1. import android.support.v4.view.PagerAdapter;  
  1. import android.support.v4.view.ViewPager;  
  1. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  1. import android.view.View;  
  1. import android.view.ViewGroup;  
  1. import android.widget.ImageView;  
  1. import android.widget.TextView;  
  1.   
  1. public class MainActivity extends Activity {  
  1.     private int imageIds[];  
  1.     private String[] titles;  
  1.     private ArrayList<ImageView> images;  
  1.     private ArrayList<View> dots;  
  1.     private TextView title;  
  1.     private ViewPager mViewPager;  
  1.     private ViewPagerAdapter adapter;  
  1.     private int oldPosition = 0;//记录上一次点的位置  
  1.     private int currentItem; //当前页面  
  1.     private ScheduledExecutorService scheduledExecutorService;  
  1.     @Override  
  1.     public void onCreate(Bundle savedInstanceState) {  
  1.         super.onCreate(savedInstanceState);  
  1.         setContentView(R.layout.activity_main);  
  1.         //图片ID  
  1.         imageIds = new int[]{  
  1.             R.drawable.a,     
  1.             R.drawable.b,     
  1.             R.drawable.c,     
  1.             R.drawable.d,     
  1.             R.drawable.e      
  1.         };  
  1.         //图片标题  
  1.         titles = new String[]{  
  1.             "巩俐不低俗,我就不能低俗",   
  1.             "扑树又回来啦!再唱经典老歌引万人大合唱",    
  1.             "揭秘北京电影如何升级",     
  1.             "乐视网TV版大派送",      
  1.             "热血屌丝的反杀"  
  1.         };  
  1.         //显示的图片  
  1.         images = new ArrayList<ImageView>();  
  1.         for(int i =0; i < imageIds.length; i++){  
  1.             ImageView imageView = new ImageView(this);  
  1.             imageView.setBackgroundResource(imageIds[i]);  
  1.             images.add(imageView);  
  1.         }  
  1.         //显示的点  
  1.         dots = new ArrayList<View>();  
  1.         dots.add(findViewById(R.id.dot_0));  
  1.         dots.add(findViewById(R.id.dot_1));  
  1.         dots.add(findViewById(R.id.dot_2));  
  1.         dots.add(findViewById(R.id.dot_3));  
  1.         dots.add(findViewById(R.id.dot_4));  
  1.         title = (TextView) findViewById(R.id.title);  
  1.         title.setText(titles[0]);  
  1.         mViewPager = (ViewPager) findViewById(R.id.vp);  
  1.         adapter = new ViewPagerAdapter();   
  1.         mViewPager.setAdapter(adapter);  
  1.         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  1.             @Override  
  1.             public void onPageSelected(int position) {  
  1.                 title.setText(titles[position]);  
  1.                 dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);  
  1.                 dots.get(position).setBackgroundResource(R.drawable.dot_focused);  
  1.                 oldPosition = position;  
  1.                 currentItem = position;  
  1.             }  
  1.             @Override  
  1.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  1.             }  
  1.             @Override  
  1.             public void onPageScrollStateChanged(int arg0) {  
  1.             }  
  1.         });  
  1.     }  
  1.     private class ViewPagerAdapter extends PagerAdapter {  
  1.         @Override  
  1.         public int getCount() {  
  1.             return images.size();  
  1.         }  
  1.         //是否是同一张图片  
  1.         @Override  
  1.         public boolean isViewFromObject(View arg0, Object arg1) {  
  1.             return arg0 == arg1;  
  1.         }  
  1.         @Override  
  1.         public void destroyItem(ViewGroup view, int position, Object object) {  
  1.             view.removeView(images.get(position));  
  1.         }  
  1.         @Override  
  1.         public Object instantiateItem(ViewGroup view, int position) {  
  1.             view.addView(images.get(position));  
  1.             return images.get(position);  
  1.         }  
  1.     }  
  1.   
  1.     @Override  
  1.     protected void onStart() {  
  1.         // TODO Auto-generated method stub  
  1.         super.onStart();  
  1.         scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();  
  1.         //每隔2秒钟切换一张图片  
  1.         scheduledExecutorService.scheduleWithFixedDelay(new ViewPagerTask(), 22, TimeUnit.SECONDS);  
  1.     }  
  1.       
  1.     //切换图片  
  1.     private class ViewPagerTask implements Runnable {  
  1.         @Override  
  1.         public void run() {  
  1.             currentItem = (currentItem +1) % imageIds.length;  
  1.             //更新界面  
  1.             handler.obtainMessage().sendToTarget();  
  1.         }  
  1.     }  
  1.     private Handler handler = new Handler(){  
  1.         @Override  
  1.         public void handleMessage(Message msg) {  
  1.             //设置当前页面  
  1.             mViewPager.setCurrentItem(<span style="font-family: Arial, Helvetica, sans-serif;">currentItem</span><span style="font-family: Arial, Helvetica, sans-serif;">);</span>  
  1.         }  
  1.     };  
  1. }  

ViewPager实现图片轮翻效果