Android借助Handler，實現ViewPager中頁面的自動切換
在很多電商網頁及app上都有自動切換的商品的推廣快，感覺體驗挺不錯的，正好今天學習使用ViewPager，因此也實現了一個功能類似的demo。
下面是其中的兩個截圖：
實現一個自動播放功能的ViewPager，要做的主要有以下的幾個部分：
- 實現一個ViewPagerAdapter，用于為ViewPager提供展示內容（例如上面的兩張小貓圖片）
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));
}
}
- 實現一個OnPageChangeListener，這樣在頁面切換后可以提示當前頁面所在的位置（例如上圖中，左下角的3個圓點，紅色表示當前頁面）
private class ViewPageChangeListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
//監聽頁面改變事件來改變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);
}
}
- 實現一個Handler，用于在一定的時間間隔后修改UI（將當前顯示的圖片切換到下一個）
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);
//每兩秒鐘發送一個message，用于切換viewPager中的圖片
this.sendEmptyMessageDelayed(1, 2000);
}
}
};
完整的代碼如下：
public class MainActivity extends Activity {
private static final String TAG = MainActivity.class.getSimpleName();
private ViewPager autoChangeViewPager;
//用來指示當前顯示圖片所在位置
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();
//監聽頁面改變事件來改變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() {
//當viewPager中的圖片被點擊后，跳轉到新的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啟動兩秒鐘后，發送一個message，用來將viewPager中的圖片切換到下一個
mHandler.sendEmptyMessageDelayed(1, 2000);
}
@Override
protected void onStop() {
super.onStop();
//停止viewPager中圖片的自動切換
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) {
}
//監聽頁面改變事件來改變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);
//每兩秒鐘發送一個message，用于切換viewPager中的圖片
this.sendEmptyMessageDelayed(1, 2000);
}
}
};
}
布局文件如下：（上面代碼中的InvokedActivity非常簡單，此處就省略了）
<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>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！