Android实现一款不错Banner界面广告图片循环轮播

Demo实现的效果图如下：

工程目录如下图：

一个Application,一个实体类，一个Activity,另一个是自定义的AutoPlayingViewPager继承FrameLayout。
首先看一下自定义的AutoPlayingViewPager，功能都在这里实现。采用了第三方图片加载框架：universal_image_loader;

package com.skycracks.autoplayingviewpager;import java.lang.reflect.Field;import java.util.ArrayList;import java.util.List;import java.util.concurrent.Executors;import java.util.concurrent.ScheduledExecutorService;import java.util.concurrent.TimeUnit;import com.nostra13.universalimageloader.core.ImageLoader;import android.content.Context;import android.os.Handler;import android.os.Message;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.text.TextUtils;import android.util.AttributeSet;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.animation.Interpolator;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.Scroller;import android.widget.TextView;/** * 创建时间: 2016年1月10日 下午3:43:22
 * 版本: [v1.0]
 * 类描述: 实现ViewPager轮播图
 * 使用了ImageLoader 对图片进行加载，所以使用前必须初始化ImageLoader
 * stopPlaying() 当轮播所在页面不在顶栈时，有必要停止定时并且释放资源
 * startPlaying() 当再次恢复时调用
 * */public class AutoPlayingViewPager extends FrameLayout {    private final static String TAG = "AutoPlayingViewPager";    /**     * 轮播图图片数量     */    private int IMAGE_COUNT;    /**     * 自动轮播的时间间隔     */    private final static int TIME_INTERVAL = 5;    /**     * 切换图片过度时间     */    private int swapDuration = 1000;    /**     * 默认图片资源(本地图片资源Id)     */    private int [] defaultIds = new int[] {            R.drawable.image01,R.drawable.image02,            R.drawable.image03,R.drawable.image04,R.drawable.image05};    /**     * 默认图片资源(图片URL地址)     */    private String [] defaultUrl = new String[] {            "http://g.hiphotos.baidu.com/imgad/pic/item/a8773912b31bb051be533b24317adab44aede043.jpg",            "http://g.hiphotos.baidu.com/imgad/pic/item/c75c10385343fbf22c362d2fb77eca8065388fa0.jpg",            "http://liaoning.sinaimg.cn/2014/1111/U10435P1195DT20141111220802.jpg",            "http://photocdn.sohu.com/20151124/mp43786429_1448294862260_4.jpeg",            "http://h.hiphotos.baidu.com/image/pic/item/faedab64034f78f0b00507c97e310a55b3191cf9.jpg" };    private String [] defaultTitle = new String [] {        "今晚打老虎","今晚打松鼠","今晚打LOL","今晚打DOTA1","今晚打DOTA2"};    /**     * 自定义轮播图资源     */    private List mAutoPlayInfoList;    /**     * 放圆点的View的list     */    private List dotViewsList;    /**     * 轮播容器     */    private ViewPager mViewPager;    /**     * 当前轮播页     */    private int currentItem = 0;    /**     * 定时器对象     */    private ScheduledExecutorService scheduledExecutorService;    private Context mContext;    private LayoutInflater mInflate;    /**     * ViewPageItem点击回调接口     */    private OnPageItemClickListener onPageItemClickListener;    public void setOnPageItemClickListener(OnPageItemClickListener onPageItemClickListener){        this.onPageItemClickListener = onPageItemClickListener;    }    public interface OnPageItemClickListener{        /**         * ViewPageItem点击事件回调         */        void onPageItemClick(int position, String adLink);    }    /**     * 消息处理器、设置当前显示页     */    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            mViewPager.setCurrentItem(currentItem);        }    };    public AutoPlayingViewPager(Context context) {        this(context, null);    }    public AutoPlayingViewPager(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public AutoPlayingViewPager(Context context, AttributeSet attrs,            int defStyle) {        super(context, attrs, defStyle);        this.mContext = context;        initData();    }    /**     * 通过本地图片资源Id获得默认的数据     */    private List getImageIdAutoPlayInfoList(int [] imageIds){        List autoPlayInfoList = new ArrayList();        for(int i = 0 ; i < imageIds.length ; i ++){            AutoPlayInfo autoPlayInfo = new AutoPlayInfo();            autoPlayInfo.setImageId(imageIds[i]);            autoPlayInfoList.add(autoPlayInfo);        }        return autoPlayInfoList;    }    /**     * 通过图片URL地址获得默认的数据     */    private List getDefaultUrlAutoPlayInfoList(){        List autoPlayInfoList = new ArrayList();        for(int i = 0 ; i < defaultUrl.length ; i ++){            AutoPlayInfo autoPlayInfo = new AutoPlayInfo();            autoPlayInfo.setImageUrl(defaultUrl[i]);            autoPlayInfo.setAdLinks("http://m.baidu.com");            autoPlayInfo.setTitle(defaultTitle[i]);            autoPlayInfoList.add(autoPlayInfo);        }        return autoPlayInfoList;    }    /**     * 初始化     * @param imageIds 需要加载的图片Id，根据传入数量动态创建容器。     * @return     */    public AutoPlayingViewPager initialize(int [] imageIds) {        if (imageIds != null && imageIds.length != 0) {            mAutoPlayInfoList = getImageIdAutoPlayInfoList(imageIds);        } else {//没有数据使用默认的图片资源            mAutoPlayInfoList = getImageIdAutoPlayInfoList(defaultIds);        }        IMAGE_COUNT = mAutoPlayInfoList.size();        return this;    }    /**     * 初始化     *      * @param imageUrls 需要加载的图片地址，根据传入数量动态创建容器。     * @return     */    public AutoPlayingViewPager initialize(List autoPlayInfoList) {        if (autoPlayInfoList != null && !autoPlayInfoList.isEmpty()) {            mAutoPlayInfoList = autoPlayInfoList;        } else {//没有数据使用默认的图片资源            mAutoPlayInfoList = getDefaultUrlAutoPlayInfoList();        }        IMAGE_COUNT = mAutoPlayInfoList.size();        return this;    }    /**     * 设置图片之间自动切换时间     *      * @param duration     *            切换时间     * @return     */    public AutoPlayingViewPager setSwapDuration(int duration) {        this.swapDuration = duration;        return this;    }    /**     * 开始轮播图切换 轮播之前必须调initialize()及build()     */    public void startPlaying() {            scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();            scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1,                TIME_INTERVAL, TimeUnit.SECONDS);    }    /**     * 停止轮播释放资源     */    public void stopPlaying() {        scheduledExecutorService.shutdown();    }    /**     * 初始化相关Data     */    private void initData() {        dotViewsList = new ArrayList();    }    /**     * 初始化Views 及组件UI     */    public void build() {        if (mAutoPlayInfoList == null || mAutoPlayInfoList.isEmpty()) {            Log.d(TAG, "init image fail ");            return;        }        mInflate = LayoutInflater.from(mContext);        mInflate.inflate(R.layout.view_layout_slideshow,this, true);        LinearLayout dotLayout = (LinearLayout) findViewById(R.id.dotLayout);        dotLayout.removeAllViews();// 清除布局中的子视图，下面使用代码动态添加与图片对应的圆点        // 热点个数与图片数量相等        for (int i = 0; i < IMAGE_COUNT; i++) {            ImageView dotView = new ImageView(mContext);            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);            params.leftMargin = 4;            params.rightMargin = 4;            dotLayout.addView(dotView, params);            dotViewsList.add(dotView);        }        mViewPager = (ViewPager) findViewById(R.id.viewPager);        setViewPagerScrollSpeed();        mViewPager.setFocusable(true);        mViewPager.setOffscreenPageLimit(2);// 设置缓存页面，当前页面的相邻N各页面都会被缓存        mViewPager.setAdapter(new AutoPlayingPagerAdapter());        AutoPlayingPageChangeListener mPageChangeListener = new AutoPlayingPageChangeListener();        mViewPager.addOnPageChangeListener(mPageChangeListener);    }    /**     * 填充ViewPager的页面适配器     */    private class AutoPlayingPagerAdapter extends PagerAdapter {        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }        @Override        public Object instantiateItem(ViewGroup container, final int position) {            final AutoPlayInfo autoPlayInfo = mAutoPlayInfoList.get(position % IMAGE_COUNT);            View view = mInflate.inflate(R.layout.item_label_auto_play_viewpager, null);            ImageView imageView = (ImageView) view.findViewById(R.id.img_item_auto_play);            TextView labelTitle = (TextView) view.findViewById(R.id.tv_item_label_title);        /*  if(!TextUtils.isEmpty(autoPlayInfo.getAdLinks())){//有链接时才添加监听            }*/            view.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    onPageItemClickListener.onPageItemClick(position % IMAGE_COUNT,autoPlayInfo.getAdLinks());                }            });            if(!TextUtils.isEmpty(autoPlayInfo.getImageUrl())){//通过URL时使用ImageLoader加载图片                ImageLoader.getInstance().displayImage(autoPlayInfo.getImageUrl(),imageView);            }else if(autoPlayInfo.getImageId() != 0){//本地图片时直接设置                imageView.setImageResource(autoPlayInfo.getImageId());            }            if(!TextUtils.isEmpty(autoPlayInfo.getTitle())){//有标题数据才显示                labelTitle.setText(autoPlayInfo.getTitle());            }else{//没有标题数据不显示文本透明背景                labelTitle.setBackgroundDrawable(null);            }            container.addView(view);            return view;        }        @Override        public int getCount() {            return Integer.MAX_VALUE;        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            return arg0 == arg1;        }    }    /**     * ViewPager的监听器 当ViewPager中页面的状态发生改变时调用     *      */    private class AutoPlayingPageChangeListener implements OnPageChangeListener {        // boolean isChange = false;        @Override        public void onPageScrollStateChanged(int arg0) {            switch (arg0) {            case 1:// 手势滑动，空闲中                // isChange = false;                break;            case 2:// 界面切换中                // isChange = true;                break;            case 0:// 滑动结束，即切换完毕或者加载完毕                break;            }        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {        }        @Override        public void onPageSelected(int pos) {            currentItem = pos;            int p = pos % IMAGE_COUNT;            for (int i = 0; i < dotViewsList.size(); i++) {                if (i == p) {                    dotViewsList.get(p).setBackgroundResource(                            R.drawable.icon_cricle_check);                } else {                    dotViewsList.get(i).setBackgroundResource(                            R.drawable.icon_cricle_uncheck);                }            }        }    }    /**     * 执行轮播图切换任务     *      */    boolean isLR = false;    private class SlideShowTask implements Runnable {        @Override        public void run() {            synchronized (mViewPager) {                currentItem++;                handler.obtainMessage().sendToTarget();            }        }    }    /**     * 使用反射往ViewPager中设置新的Scroller对象 覆盖默认的setCurrentItem切换时间     */    private void setViewPagerScrollSpeed() {        try {            Field mScroller = null;            mScroller = ViewPager.class.getDeclaredField("mScroller");            mScroller.setAccessible(true);            FixedSpeedScroller scroller = new FixedSpeedScroller(                    mViewPager.getContext());            mScroller.set(mViewPager, scroller);        } catch (NoSuchFieldException e) {        } catch (IllegalArgumentException e) {        } catch (IllegalAccessException e) {        }    }    class FixedSpeedScroller extends Scroller {        public FixedSpeedScroller(Context context) {            super(context);        }        public FixedSpeedScroller(Context context, Interpolator interpolator) {            super(context, interpolator);        }        public FixedSpeedScroller(Context context, Interpolator interpolator,                boolean flywheel) {            super(context, interpolator, flywheel);        }        @Override        public void startScroll(int startX, int startY, int dx, int dy,                int duration) {            super.startScroll(startX, startY, dx, dy, swapDuration);        }        @Override        public void startScroll(int startX, int startY, int dx, int dy) {            super.startScroll(startX, startY, dx, dy, swapDuration);        }    }}

当然想用上ImageLoad而必须在Application里面注册一下：

    @Override    public void onCreate() {        super.onCreate();        initImageLoader();    }    /**     * 初始化UIL，这里初始化以后，就不在初始化了     */    public void initImageLoader() {        DisplayImageOptions.Builder options = new DisplayImageOptions.Builder()                .cacheInMemory(true)// 内存缓存                .cacheOnDisk(true)// 磁盘缓存                .showImageOnFail(R.drawable.ic_faile)//加载失败显示的图片                .considerExifParams(true)// 是否考虑EXIF信息，比如拍照方向                .displayer(new FadeInBitmapDisplayer(300));//淡入动画        ImageLoaderConfiguration.Builder config = new ImageLoaderConfiguration.Builder(getApplicationContext());        // 取消缓存多张尺寸不同的同一张图片        config.denyCacheImageMultipleSizesInMemory();        // 设置显示选项        config.defaultDisplayImageOptions(options.build());        // 生成缓存文件的生成器，保证唯一的文件名，可以不设置，默认使用hash算法，也是可以保证不重名的        config.diskCacheFileNameGenerator(new Md5FileNameGenerator());        // 磁盘缓存大小        config.diskCacheSize(100 * 1024 * 1024); // 100 MB        // 内存缓存大小        config.memoryCacheSize((int) (Runtime.getRuntime().freeMemory() / 4));        // 任务处理顺序，默认是FIFO 先进先出， LIFO 后进先出        config.tasksProcessingOrder(QueueProcessingType.LIFO);        // 打印调试日志        config.writeDebugLogs(); // Remove for release app        ImageLoader.getInstance().init(config.build());    }

最关键的就是调用：
布局直接调用自定义的ViewPager:

"http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"   >    <com.skycracks.autoplayingviewpager.AutoPlayingViewPager        android:id="@+id/auto_play_viewpager"       android:layout_width="match_parent"       android:layout_height="200dp" >      com.skycracks.autoplayingviewpager.AutoPlayingViewPager>

主方法中运用很简单，只需把接收的对象集合传到自定义的AutoPlayingViewPager。
看代码：

package com.skycracks.autoplayingviewpager;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.Toast;import com.skycracks.autoplayingviewpager.AutoPlayingViewPager.OnPageItemClickListener;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private AutoPlayingViewPager mAutoPlayingViewPager;    /**     * 模拟网络请求获取的图片URL     */    private String [] imageUrl = new String[] {            "http://g.hiphotos.baidu.com/image/pic/item/d0c8a786c9177f3e117088eb75cf3bc79e3d568b.jpg",            "http://upload.cebnet.com.cn/2014/1217/1418776413348.jpg",            "http://n.sinaimg.cn/transform/20150917/7DDk-fxhytwp5363222.jpg",            "http://n.sinaimg.cn/transform/20151019/YtA_-fxivsce6931363.jpg"            };    private String [] imageTitle = new String [] {            "赵丽颖","高圆圆","王鸥","唐嫣"};    private List mAutoPlayInfoList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mAutoPlayingViewPager = (AutoPlayingViewPager) findViewById(R.id.auto_play_viewpager);        mAutoPlayInfoList=new ArrayList<>();        for(int i = 0 ; i < imageUrl.length ; i ++){        //把模拟的数据添加到集合里面            AutoPlayInfo autoPlayInfo = new AutoPlayInfo();            autoPlayInfo.setImageUrl(imageUrl[i]);            autoPlayInfo.setAdLinks("");            autoPlayInfo.setTitle(imageTitle[i]);            mAutoPlayInfoList.add(autoPlayInfo);        }//通过这个方法把集合传进去，并设置图片的点击事件，可以做跳转        mAutoPlayingViewPager.initialize(mAutoPlayInfoList).build();        mAutoPlayingViewPager.setOnPageItemClickListener(onPageItemClickListener);    }    private OnPageItemClickListener onPageItemClickListener = new OnPageItemClickListener() {        @Override        public void onPageItemClick(int position, String adLink) {            Toast.makeText(MainActivity.this,"第"+position,Toast.LENGTH_LONG).show();        }    };    @Override    public void onStart() {   //当Activity onRestart();还要执行，        //没有数据时不执行startPlaying,避免执行几次导致轮播混乱        if(mAutoPlayInfoList != null && !mAutoPlayInfoList.isEmpty()){            mAutoPlayingViewPager.startPlaying();        }        super.onResume();    }    @Override    public void onPause() {        mAutoPlayingViewPager.stopPlaying();        super.onPause();    }}

最后几个就是实体类：

public class AutoPlayInfo {    //轮播图片URL    private String imageUrl;    //轮播本地图片资源Id    private int imageId;    //链接    private String adLinks;    //图片对应的标题    private String title;    public String getImageUrl() {        return imageUrl;    }    public void setImageUrl(String imageUrl) {        this.imageUrl = imageUrl;    }    public int getImageId() {        return imageId;    }    public void setImageId(int imageId) {        this.imageId = imageId;    }    public String getAdLinks() {        return adLinks;    }    public void setAdLinks(String adLinks) {        this.adLinks = adLinks;    }    public String getTitle() {        return title;    }    public void setTitle(String title) {        this.title = title;    }}

另外，还有一种通过自定义ViewPager实现和本博文相同效果的广告界面Demo，这里就不再贴代码，可以通过如下地址下载：
http://blog.csdn.net/stevenhu_223/article/details/45577781
http://download.csdn.net/detail/stevenhu_223/8697903

更多相关文章

随机推荐