Android开发之ViewPager实现轮播图（轮播广告）效果的自定义View
最近开发中需要做一个类似京东首页那样的广告轮播效果，于是采用ViewPager自己自定义了一个轮播图效果的View。
主要原理就是利用定时任务器定时切换ViewPager的页面。
效果图如下：
主页面布局实现如下：
xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:padding="5dp"
android:gravity="center"
android:orientation="horizontal">
<View
android:id="@+id/v_dot1"
android:layout_width="8dp"
android:layout_height="8dp"
android:background="@drawable/dot_black" />
<View
android:id="@+id/v_dot2"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
<View
android:id="@+id/v_dot3"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
<View
android:id="@+id/v_dot4"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
<View
android:id="@+id/v_dot5"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
LinearLayout>
RelativeLayout>
轮播效果视图类代码实现如下：
package com.czm.customview; import java.util.ArrayList; import java.util.List; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; import android.content.Context; import android.graphics.drawable.Drawable; import android.os.Handler; import android.os.Message; import android.os.Parcelable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.ImageView.ScaleType; /** * ViewPager实现的轮播图广告自定义视图，如京东首页的广告轮播图效果； * 既支持自动轮播页面也支持手势滑动切换页面 * @author caizhiming * */ public class SlideShowView extends FrameLayout { //轮播图图片数量 private final static int IMAGE_COUNT = 5; //自动轮播的时间间隔 private final static int TIME_INTERVAL = 5; //自动轮播启用开关 private final static boolean isAutoPlay = true; //自定义轮播图的资源ID private int[] imagesResIds; //放轮播图片的ImageView 的list private ListimageViewsList; //放圆点的View的list private List dotViewsList; private ViewPager viewPager; //当前轮播页 private int currentItem = 0; //定时任务 private ScheduledExecutorService scheduledExecutorService; //Handler private Handler handler = new Handler(){ @Override public void handleMessage(Message msg) { // TODO Auto-generated method stub super.handleMessage(msg); viewPager.setCurrentItem(currentItem); } }; public SlideShowView(Context context) { this(context,null); // TODO Auto-generated constructor stub } public SlideShowView(Context context, AttributeSet attrs) { this(context, attrs, 0); // TODO Auto-generated constructor stub } public SlideShowView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub initData(); initUI(context); if(isAutoPlay){ startPlay(); } } /** * 开始轮播图切换 */ private void startPlay(){ scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4, TimeUnit.SECONDS); } /** * 停止轮播图切换 */ private void stopPlay(){ scheduledExecutorService.shutdown(); } /** * 初始化相关Data */ private void initData(){ imagesResIds = new int[]{ R.drawable.pic1, R.drawable.pic2, R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, }; imageViewsList = new ArrayList (); dotViewsList = new ArrayList (); } /** * 初始化Views等UI */ private void initUI(Context context){ LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this, true); for(int imageID : imagesResIds){ ImageView view = new ImageView(context); view.setImageResource(imageID); view.setScaleType(ScaleType.FIT_XY); imageViewsList.add(view); } dotViewsList.add(findViewById(R.id.v_dot1)); dotViewsList.add(findViewById(R.id.v_dot2)); dotViewsList.add(findViewById(R.id.v_dot3)); dotViewsList.add(findViewById(R.id.v_dot4)); dotViewsList.add(findViewById(R.id.v_dot5)); viewPager = (ViewPager) findViewById(R.id.viewPager); viewPager.setFocusable(true); viewPager.setAdapter(new MyPagerAdapter()); viewPager.setOnPageChangeListener(new MyPageChangeListener()); } /** * 填充ViewPager的页面适配器 * @author caizhiming */ private class MyPagerAdapter extends PagerAdapter{ @Override public void destroyItem(View container, int position, Object object) { // TODO Auto-generated method stub //((ViewPag.er)container).removeView((View)object); ((ViewPager)container).removeView(imageViewsList.get(position)); } @Override public Object instantiateItem(View container, int position) { // TODO Auto-generated method stub ((ViewPager)container).addView(imageViewsList.get(position)); return imageViewsList.get(position); } @Override public int getCount() { // TODO Auto-generated method stub return imageViewsList.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { // TODO Auto-generated method stub } @Override public Parcelable saveState() { // TODO Auto-generated method stub return null; } @Override public void startUpdate(View arg0) { // TODO Auto-generated method stub } @Override public void finishUpdate(View arg0) { // TODO Auto-generated method stub } } /** * ViewPager的监听器 * 当ViewPager中页面的状态发生改变时调用 * @author caizhiming */ private class MyPageChangeListener implements OnPageChangeListener{ boolean isAutoPlay = false; @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub switch (arg0) { case 1:// 手势滑动，空闲中 isAutoPlay = false; break; case 2:// 界面切换中 isAutoPlay = true; break; case 0:// 滑动结束，即切换完毕或者加载完毕 // 当前为最后一张，此时从右向左滑，则切换到第一张 if (viewPager.getCurrentItem() == viewPager.getAdapter().getCount() - 1 && !isAutoPlay) { viewPager.setCurrentItem(0); } // 当前为第一张，此时从左向右滑，则切换到最后一张 else if (viewPager.getCurrentItem() == 0 && !isAutoPlay) { viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1); } break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int pos) { // TODO Auto-generated method stub currentItem = pos; for(int i=0;i < dotViewsList.size();i++){ if(i == pos){ ((View)dotViewsList.get(pos)).setBackgroundResource(R.drawable.dot_black); }else { ((View)dotViewsList.get(i)).setBackgroundResource(R.drawable.dot_white); } } } } /** *执行轮播图切换任务 *@author caizhiming */ private class SlideShowTask implements Runnable{ @Override public void run() { // TODO Auto-generated method stub synchronized (viewPager) { currentItem = (currentItem+1)%imageViewsList.size(); handler.obtainMessage().sendToTarget(); } } } /** * 销毁ImageView资源，回收内存 * @author caizhiming */ private void destoryBitmaps() { for (int i = 0; i < IMAGE_COUNT; i++) { ImageView imageView = imageViewsList.get(i); Drawable drawable = imageView.getDrawable(); if (drawable != null) { //解除drawable对view的引用 drawable.setCallback(null); } } } }
如何引用上面自定义的轮播图效果视图View呢？其实很引用普通的View类似，实现如下：
<com.czm.customview.SlideShowView android:id="@+id/slideshowView" android:layout_width="335dp" android:layout_height="120dp" android:layout_centerHorizontal="true" />