Android App中用Handler實(shí)現(xiàn)ViewPager頁面的自動(dòng)切換

更新時(shí)間：2016年05月17日 18:52:43 作者：風(fēng)荷舉

這篇文章主要介紹了Android App中用Handler實(shí)現(xiàn)ViewPager頁面的自動(dòng)切換的方法,類似于相冊(cè)自動(dòng)播放,主要是切換后要提示當(dāng)前頁面所在的位置,需要的朋友可以參考下

在很多電商網(wǎng)頁及app上都有自動(dòng)切換的商品的推廣快，感覺體驗(yàn)挺不錯(cuò)的，正好今天學(xué)習(xí)使用ViewPager，因此也實(shí)現(xiàn)了一個(gè)功能類似的demo。

下面是其中的兩個(gè)截圖：

2016517184555197.jpg (241×383) 2016517184629006.jpg (241×382)

實(shí)現(xiàn)一個(gè)自動(dòng)播放功能的ViewPager，要做的主要有以下的幾個(gè)部分：

實(shí)現(xiàn)一個(gè)ViewPagerAdapter，用于為ViewPager提供展示內(nèi)容（例如上面的兩張小貓圖片）

 public class ViewPagerAdapter extends PagerAdapter {
    private List<View> mData;
    public ViewPagerAdapter(List<View> mData) {
      this.mData = mData;
    }

    @Override
    public int getCount() {
      return mData.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
      return arg0 == arg1;
    }
    
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      View v = mData.get(position);
      container.addView(v);
      return v;
    }
    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
//  super.destroyItem(container, position, object);
      container.removeView(mData.get(position));
    }
    
  }

實(shí)現(xiàn)一個(gè)OnPageChangeListener，這樣在頁面切換后可以提示當(dāng)前頁面所在的位置（例如上圖中，左下角的3個(gè)圓點(diǎn)，紅色表示當(dāng)前頁面）

 private class ViewPageChangeListener implements OnPageChangeListener {

    @Override
    public void onPageScrollStateChanged(int arg0) {
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }

    //監(jiān)聽頁面改變事件來改變viewIndicator中的指示圖片
    @Override
    public void onPageSelected(int arg0) {
      int len = viewIndicator.getChildCount();
      for(int i = 0; i < len; ++i)
        viewIndicator.getChildAt(i).setBackgroundResource(R.drawable.tip_normal);
      viewIndicator.getChildAt(arg0).setBackgroundResource(R.drawable.tip_select);
    }
    
  }

實(shí)現(xiàn)一個(gè)Handler，用于在一定的時(shí)間間隔后修改UI（將當(dāng)前顯示的圖片切換到下一個(gè)）

private Handler mHandler = new Handler() {
    public void handleMessage(android.os.Message msg) {
      switch(msg.what) {
      case 1:
        int totalcount = pagers.size();//autoChangeViewPager.getChildCount();
        int currentItem = autoChangeViewPager.getCurrentItem();
        
        int toItem = currentItem + 1 == totalcount ? 0 : currentItem + 1;
        
        Log.i(TAG, "totalcount: " + totalcount + "  currentItem: " + currentItem + "  toItem: " + toItem);
        
        autoChangeViewPager.setCurrentItem(toItem, true);
        
        //每?jī)擅腌姲l(fā)送一個(gè)message，用于切換viewPager中的圖片
        this.sendEmptyMessageDelayed(1, 2000);
      }
    }
  };

上面這3段就是主要的代碼，除此之外，還需要在onResume()中發(fā)送一個(gè)起始message以及在onStop()中停止ViewPager頁面的自動(dòng)切換等內(nèi)容。
完整的代碼如下：

public class MainActivity extends Activity {
  private static final String TAG = MainActivity.class.getSimpleName();
  private ViewPager autoChangeViewPager;
  
  //用來指示當(dāng)前顯示圖片所在位置
  private LinearLayout viewIndicator;
  
  //包含要在ViewPager中顯示的圖片
  private List<View> pagers;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    autoChangeViewPager = (ViewPager) findViewById(R.id.autoVP);
    viewIndicator = (LinearLayout) findViewById(R.id.vpindicator);
    
    initAdapter();
    
    //監(jiān)聽頁面改變事件來改變viewIndicator中的指示圖片
    autoChangeViewPager.setOnPageChangeListener(new ViewPageChangeListener());
    
  }
  
  private void initAdapter() {
    //即將在viewPager中展示的圖片資源
    int[] imgs = {R.drawable.i1, R.drawable.i2, R.drawable.i3};
    
    //init pagers;
    pagers = new ArrayList<View>();
    LinearLayout.LayoutParams img_params = new LayoutParams(
        LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT
        );
    for(int i = 0; i < imgs.length; ++i) {
      ImageView iv = new ImageView(this);
      iv.setBackgroundResource(imgs[i]);
      iv.setLayoutParams(img_params);
      final int index = i;
      iv.setOnClickListener(new OnClickListener() {
        //當(dāng)viewPager中的圖片被點(diǎn)擊后，跳轉(zhuǎn)到新的activity
        @Override
        public void onClick(View v) {
          Intent i = new Intent(MainActivity.this, InvokedActivity.class);
          i.putExtra("name", "cat " + index);
          MainActivity.this.startActivity(i);
        }
      });
      pagers.add(iv);
    }
    autoChangeViewPager.setAdapter(new ViewPagerAdapter(pagers));
    
    //init indicator
    LinearLayout.LayoutParams ind_params = new LayoutParams(
        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT
        );
    for(int i = 0; i < imgs.length; ++i) {
      ImageView iv = new ImageView(this);
      if(i == 0)
        iv.setBackgroundResource(R.drawable.tip_select);
      else
        iv.setBackgroundResource(R.drawable.tip_normal);
      iv.setLayoutParams(ind_params);
      viewIndicator.addView(iv);
    }
  }
  
  @Override
  protected void onResume() {
    super.onResume();
    //activity啟動(dòng)兩秒鐘后，發(fā)送一個(gè)message，用來將viewPager中的圖片切換到下一個(gè)
    mHandler.sendEmptyMessageDelayed(1, 2000);
  }
  
  @Override
  protected void onStop() {
    super.onStop();
    //停止viewPager中圖片的自動(dòng)切換
    mHandler.removeMessages(1);
  }

  public class ViewPagerAdapter extends PagerAdapter {
    private List<View> mData;
    public ViewPagerAdapter(List<View> mData) {
      this.mData = mData;
    }

    @Override
    public int getCount() {
      return mData.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
      return arg0 == arg1;
    }
    
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      View v = mData.get(position);
      container.addView(v);
      return v;
    }
    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
//  super.destroyItem(container, position, object);
      container.removeView(mData.get(position));
    }
    
  }
  
  private class ViewPageChangeListener implements OnPageChangeListener {

    @Override
    public void onPageScrollStateChanged(int arg0) {
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }

    //監(jiān)聽頁面改變事件來改變viewIndicator中的指示圖片
    @Override
    public void onPageSelected(int arg0) {
      int len = viewIndicator.getChildCount();
      for(int i = 0; i < len; ++i)
        viewIndicator.getChildAt(i).setBackgroundResource(R.drawable.tip_normal);
      viewIndicator.getChildAt(arg0).setBackgroundResource(R.drawable.tip_select);
    }
    
  }
  
  private Handler mHandler = new Handler() {
    public void handleMessage(android.os.Message msg) {
      switch(msg.what) {
      case 1:
        int totalcount = pagers.size();//autoChangeViewPager.getChildCount();
        int currentItem = autoChangeViewPager.getCurrentItem();
        
        int toItem = currentItem + 1 == totalcount ? 0 : currentItem + 1;
        
        Log.i(TAG, "totalcount: " + totalcount + "  currentItem: " + currentItem + "  toItem: " + toItem);
        
        autoChangeViewPager.setCurrentItem(toItem, true);
        
        //每?jī)擅腌姲l(fā)送一個(gè)message，用于切換viewPager中的圖片
        this.sendEmptyMessageDelayed(1, 2000);
      }
    }
  };
}

布局文件如下：（上面代碼中的InvokedActivity非常簡(jiǎn)單，此處就省略了）

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <android.support.v4.view.ViewPager
    android:id="@+id/autoVP"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  <LinearLayout
    android:id="@+id/vpindicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:orientation="horizontal" />

</FrameLayout>

您可能感興趣的文章: