前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >android 自定义Viewpager实现无限循环

android 自定义Viewpager实现无限循环

作者头像
xiangzhihong
发布2018-02-01 14:40:19
3.3K0
发布2018-02-01 14:40:19
举报
文章被收录于专栏:向治洪向治洪

前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环。本以为单纯的ViewPager就可以实现这些功能。但是蛋疼的事情来了,ViewPager并不支持循环翻页。所以要实现循环还得需要自己去动手。自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用。

  Demo实现的效果图如下:

   Demo代码:

     工程目录如下图:

      废话不多说,上代码。

   1.主Activity代码如下:

代码语言:java
复制
package com.stevenhu.android.phone.ui;  
 
import java.util.ArrayList;  
import java.util.List;  
 
import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;  
import com.nostra13.universalimageloader.core.DisplayImageOptions;  
import com.nostra13.universalimageloader.core.ImageLoader;  
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;  
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;  
import com.stevenhu.android.phone.bean.ADInfo;  
import com.stevenhu.android.phone.utils.ViewFactory;  
 
import android.annotation.SuppressLint;  
import android.app.Activity;  
import android.os.Bundle;  
import android.view.View;  
import android.widget.ImageView;  
import android.widget.Toast;  
import cn.androiddevelop.cycleviewpager.lib.CycleViewPager;  
import cn.androiddevelop.cycleviewpager.lib.CycleViewPager.ImageCycleViewListener;  
/** 
 * 描述:主页 
 * 
 * @author stevenhu 
 * @version 2015年5月8日 上午10:47:37 
 */ 
public class MainActivity extends Activity {  
 
 private List<ImageView> views = new ArrayList<ImageView>();  
 private List<ADInfo> infos = new ArrayList<ADInfo>();  
 private CycleViewPager cycleViewPager;  
 
 private String[] imageUrls = {"http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg",  
 "http://pic30.nipic.com/20130626/8174275_085522448172_2.jpg",  
 "http://pic18.nipic.com/20111215/577405_080531548148_2.jpg",  
 "http://pic15.nipic.com/20110722/2912365_092519919000_2.jpg",  
 "http://pic.58pic.com/58pic/12/64/27/55U58PICrdX.jpg"};  
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) {  
 super.onCreate(savedInstanceState);  
        setContentView(R.layout.ui_main);  
        configImageLoader();  
        initialize();  
    }  
 
 @SuppressLint("NewApi")  
 private void initialize() {  
 
        cycleViewPager = (CycleViewPager) getFragmentManager()  
                .findFragmentById(R.id.fragment_cycle_viewpager_content);  
 
 for(int i = 0; i < imageUrls.length; i ++){  
            ADInfo info = new ADInfo();  
            info.setUrl(imageUrls[i]);  
            info.setContent("图片-->" + i );  
            infos.add(info);  
        }  
 
 // 将最后一个ImageView添加进来 
        views.add(ViewFactory.getImageView(this, infos.get(infos.size() - 1).getUrl()));  
 for (int i = 0; i < infos.size(); i++) {  
            views.add(ViewFactory.getImageView(this, infos.get(i).getUrl()));  
        }  
 // 将第一个ImageView添加进来 
        views.add(ViewFactory.getImageView(this, infos.get(0).getUrl()));  
 
 // 设置循环,在调用setData方法前调用 
        cycleViewPager.setCycle(true);  
 
 // 在加载数据前设置是否循环 
        cycleViewPager.setData(views, infos, mAdCycleViewListener);  
 //设置轮播 
        cycleViewPager.setWheel(true);  
 
 // 设置轮播时间,默认5000ms 
        cycleViewPager.setTime(2000);  
 //设置圆点指示图标组居中显示,默认靠右 
        cycleViewPager.setIndicatorCenter();  
    }  
 
 private ImageCycleViewListener mAdCycleViewListener = new ImageCycleViewListener() {  
 
 @Override 
 public void onImageClick(ADInfo info, int position, View imageView) {  
 if (cycleViewPager.isCycle()) {  
                position = position - 1;  
                Toast.makeText(MainActivity.this,  
 "position-->" + info.getContent(), Toast.LENGTH_SHORT)  
                        .show();  
            }  
 
        }  
 
    };  
 
 /** 
     * 配置ImageLoder 
     */ 
 private void configImageLoader() {  
 // 初始化ImageLoader 
 @SuppressWarnings("deprecation")  
        DisplayImageOptions options = new DisplayImageOptions.Builder().showStubImage(R.drawable.icon_stub) // 设置图片下载期间显示的图片 
                .showImageForEmptyUri(R.drawable.icon_empty) // 设置图片Uri为空或是错误的时候显示的图片 
                .showImageOnFail(R.drawable.icon_error) // 设置图片加载或解码过程中发生错误显示的图片 
                .cacheInMemory(true) // 设置下载的图片是否缓存在内存中 
                .cacheOnDisc(true) // 设置下载的图片是否缓存在SD卡中 
 // .displayer(new RoundedBitmapDisplayer(20)) // 设置成圆角图片 
                .build(); // 创建配置过得DisplayImageOption对象 
 
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext()).defaultDisplayImageOptions(options)  
                .threadPriority(Thread.NORM_PRIORITY - 2).denyCacheImageMultipleSizesInMemory()  
                .discCacheFileNameGenerator(new Md5FileNameGenerator()).tasksProcessingOrder(QueueProcessingType.LIFO).build();  
        ImageLoader.getInstance().init(config);       
    }  
}  

   2.主文件ui_main.xml代码如下:

代码语言:html
复制
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical" > 
 
 
 <fragment 
 android:id="@+id/fragment_cycle_viewpager_content" 
 android:name="cn.androiddevelop.cycleviewpager.lib.CycleViewPager" 
 android:layout_width="match_parent" 
 android:layout_height="180dip" /> 
 
 
 <RelativeLayout 
 android:layout_width="fill_parent" 
 android:layout_height="0dip" 
 android:layout_weight="1"> 
 
 <TextView 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_centerInParent="true" 
 android:text="content"/> 
 </RelativeLayout> 
 
</LinearLayout> 

   3.CycleViewPager类代码如下:

代码语言:java
复制
package cn.androiddevelop.cycleviewpager.lib;  
 
import java.util.ArrayList;  
import java.util.List;  
 
import android.annotation.SuppressLint;  
import android.app.Fragment;  
import android.os.Bundle;  
import android.os.Message;  
import android.support.v4.view.PagerAdapter;  
import android.support.v4.view.ViewPager.OnPageChangeListener;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.ViewGroup;  
import android.widget.FrameLayout;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.RelativeLayout;  
 
import com.stevenhu.android.phone.bean.ADInfo;  
import com.stevenhu.android.phone.ui.R;  
 
/** 
 * 实现可循环,可轮播的viewpager 
 */ 
@SuppressLint("NewApi")  
public class CycleViewPager extends Fragment implements OnPageChangeListener {  
 
 private List<ImageView> imageViews = new ArrayList<ImageView>();  
 private ImageView[] indicators;  
 private FrameLayout viewPagerFragmentLayout;  
 private LinearLayout indicatorLayout; // 指示器 
 private BaseViewPager viewPager;  
 private BaseViewPager parentViewPager;  
 private ViewPagerAdapter adapter;  
 private CycleViewPagerHandler handler;  
 private int time = 5000; // 默认轮播时间 
 private int currentPosition = 0; // 轮播当前位置 
 private boolean isScrolling = false; // 滚动框是否滚动着 
 private boolean isCycle = false; // 是否循环 
 private boolean isWheel = false; // 是否轮播 
 private long releaseTime = 0; // 手指松开、页面不滚动时间,防止手机松开后短时间进行切换 
 private int WHEEL = 100; // 转动 
 private int WHEEL_WAIT = 101; // 等待 
 private ImageCycleViewListener mImageCycleViewListener;  
 private List<ADInfo> infos;  
 
 @Override 
 public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
        View view = LayoutInflater.from(getActivity()).inflate(  
                R.layout.view_cycle_viewpager_contet, null);  
 
        viewPager = (BaseViewPager) view.findViewById(R.id.viewPager);  
        indicatorLayout = (LinearLayout) view  
                .findViewById(R.id.layout_viewpager_indicator);  
 
        viewPagerFragmentLayout = (FrameLayout) view  
                .findViewById(R.id.layout_viewager_content);  
 
        handler = new CycleViewPagerHandler(getActivity()) {  
 
 @Override 
 public void handleMessage(Message msg) {  
 super.handleMessage(msg);  
 if (msg.what == WHEEL && imageViews.size() != 0) {  
 if (!isScrolling) {  
 int max = imageViews.size() + 1;  
 int position = (currentPosition + 1) % imageViews.size();  
                        viewPager.setCurrentItem(position, true);  
 if (position == max) { // 最后一页时回到第一页 
                            viewPager.setCurrentItem(1, false);  
                        }  
                    }  
 
                    releaseTime = System.currentTimeMillis();  
                    handler.removeCallbacks(runnable);  
                    handler.postDelayed(runnable, time);  
 return;  
                }  
 if (msg.what == WHEEL_WAIT && imageViews.size() != 0) {  
                    handler.removeCallbacks(runnable);  
                    handler.postDelayed(runnable, time);  
                }  
            }  
        };  
 
 return view;  
    }  
 
 public void setData(List<ImageView> views, List<ADInfo> list, ImageCycleViewListener listener) {  
        setData(views, list, listener, 0);  
    }  
 
 /** 
     * 初始化viewpager 
     *  
     * @param views 
     *            要显示的views 
     * @param showPosition 
     *            默认显示位置 
     */ 
 public void setData(List<ImageView> views, List<ADInfo> list, ImageCycleViewListener listener, int showPosition) {  
        mImageCycleViewListener = listener;  
        infos = list;  
 this.imageViews.clear();  
 
 if (views.size() == 0) {  
            viewPagerFragmentLayout.setVisibility(View.GONE);  
 return;  
        }  
 
 for (ImageView item : views) {  
 this.imageViews.add(item);  
        }  
 
 int ivSize = views.size();  
 
 // 设置指示器 
        indicators = new ImageView[ivSize];  
 if (isCycle)  
            indicators = new ImageView[ivSize - 2];  
        indicatorLayout.removeAllViews();  
 for (int i = 0; i < indicators.length; i++) {  
            View view = LayoutInflater.from(getActivity()).inflate(  
                    R.layout.view_cycle_viewpager_indicator, null);  
            indicators[i] = (ImageView) view.findViewById(R.id.image_indicator);  
            indicatorLayout.addView(view);  
        }  
 
        adapter = new ViewPagerAdapter();  
 
 // 默认指向第一项,下方viewPager.setCurrentItem将触发重新计算指示器指向 
        setIndicator(0);  
 
        viewPager.setOffscreenPageLimit(3);  
        viewPager.setOnPageChangeListener(this);  
        viewPager.setAdapter(adapter);  
 if (showPosition < 0 || showPosition >= views.size())  
            showPosition = 0;  
 if (isCycle) {  
            showPosition = showPosition + 1;  
        }  
        viewPager.setCurrentItem(showPosition);  
 
    }  
 
 /** 
     * 设置指示器居中,默认指示器在右方 
     */ 
 public void setIndicatorCenter() {  
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(  
                RelativeLayout.LayoutParams.WRAP_CONTENT,  
                RelativeLayout.LayoutParams.WRAP_CONTENT);  
        params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);  
        params.addRule(RelativeLayout.CENTER_HORIZONTAL);  
        indicatorLayout.setLayoutParams(params);  
    }  
 
 /** 
     * 是否循环,默认不开启,开启前,请将views的最前面与最后面各加入一个视图,用于循环 
     *  
     * @param isCycle 
     *            是否循环 
     */ 
 public void setCycle(boolean isCycle) {  
 this.isCycle = isCycle;  
    }  
 
 /** 
     * 是否处于循环状态 
     *  
     * @return 
     */ 
 public boolean isCycle() {  
 return isCycle;  
    }  
 
 /** 
     * 设置是否轮播,默认不轮播,轮播一定是循环的 
     *  
     * @param isWheel 
     */ 
 public void setWheel(boolean isWheel) {  
 this.isWheel = isWheel;  
        isCycle = true;  
 if (isWheel) {  
            handler.postDelayed(runnable, time);  
        }  
    }  
 
 /** 
     * 是否处于轮播状态 
     *  
     * @return 
     */ 
 public boolean isWheel() {  
 return isWheel;  
    }  
 
 final Runnable runnable = new Runnable() {  
 
 @Override 
 public void run() {  
 if (getActivity() != null && !getActivity().isFinishing()  
                    && isWheel) {  
 long now = System.currentTimeMillis();  
 // 检测上一次滑动时间与本次之间是否有触击(手滑动)操作,有的话等待下次轮播 
 if (now - releaseTime > time - 500) {  
                    handler.sendEmptyMessage(WHEEL);  
                } else {  
                    handler.sendEmptyMessage(WHEEL_WAIT);  
                }  
            }  
        }  
    };  
 
 /** 
     * 释放指示器高度,可能由于之前指示器被限制了高度,此处释放 
     */ 
 public void releaseHeight() {  
        getView().getLayoutParams().height = RelativeLayout.LayoutParams.MATCH_PARENT;  
        refreshData();  
    }  
 
 /** 
     * 设置轮播暂停时间,即没多少秒切换到下一张视图.默认5000ms 
     *  
     * @param time 
     *            毫秒为单位 
     */ 
 public void setTime(int time) {  
 this.time = time;  
    }  
 
 /** 
     * 刷新数据,当外部视图更新后,通知刷新数据 
     */ 
 public void refreshData() {  
 if (adapter != null)  
            adapter.notifyDataSetChanged();  
    }  
 
 /** 
     * 隐藏CycleViewPager 
     */ 
 public void hide() {  
        viewPagerFragmentLayout.setVisibility(View.GONE);  
    }  
 
 /** 
     * 返回内置的viewpager 
     *  
     * @return viewPager 
     */ 
 public BaseViewPager getViewPager() {  
 return viewPager;  
    }  
 
 /** 
     * 页面适配器 返回对应的view 
     *  
     * @author Yuedong Li 
     *  
     */ 
 private class ViewPagerAdapter extends PagerAdapter {  
 
 @Override 
 public int getCount() {  
 return imageViews.size();  
        }  
 
 @Override 
 public boolean isViewFromObject(View arg0, Object arg1) {  
 return arg0 == arg1;  
        }  
 
 @Override 
 public void destroyItem(ViewGroup container, int position, Object object) {  
            container.removeView((View) object);  
        }  
 
 @Override 
 public View instantiateItem(ViewGroup container, final int position) {  
            ImageView v = imageViews.get(position);  
 if (mImageCycleViewListener != null) {  
                v.setOnClickListener(new OnClickListener() {  
 
 @Override 
 public void onClick(View v) {  
                        mImageCycleViewListener.onImageClick(infos.get(currentPosition - 1), currentPosition, v);  
                    }  
                });  
            }  
            container.addView(v);  
 return v;  
        }  
 
 @Override 
 public int getItemPosition(Object object) {  
 return POSITION_NONE;  
        }  
    }  
 
 @Override 
 public void onPageScrollStateChanged(int arg0) {  
 if (arg0 == 1) { // viewPager在滚动 
            isScrolling = true;  
 return;  
        } else if (arg0 == 0) { // viewPager滚动结束 
 if (parentViewPager != null)  
                parentViewPager.setScrollable(true);  
 
            releaseTime = System.currentTimeMillis();  
 
            viewPager.setCurrentItem(currentPosition, false);  
 
        }  
        isScrolling = false;  
    }  
 
 @Override 
 public void onPageScrolled(int arg0, float arg1, int arg2) {  
    }  
 
 @Override 
 public void onPageSelected(int arg0) {  
 int max = imageViews.size() - 1;  
 int position = arg0;  
        currentPosition = arg0;  
 if (isCycle) {  
 if (arg0 == 0) {  
                currentPosition = max - 1;  
            } else if (arg0 == max) {  
                currentPosition = 1;  
            }  
            position = currentPosition - 1;  
        }  
        setIndicator(position);  
    }  
 
 /** 
     * 设置viewpager是否可以滚动 
     *  
     * @param enable 
     */ 
 public void setScrollable(boolean enable) {  
        viewPager.setScrollable(enable);  
    }  
 
 /** 
     * 返回当前位置,循环时需要注意返回的position包含之前在views最前方与最后方加入的视图,即当前页面试图在views集合的位置 
     *  
     * @return 
     */ 
 public int getCurrentPostion() {  
 return currentPosition;  
    }  
 
 /** 
     * 设置指示器 
     *  
     * @param selectedPosition 
     *            默认指示器位置 
     */ 
 private void setIndicator(int selectedPosition) {  
 for (int i = 0; i < indicators.length; i++) {  
            indicators[i]  
                    .setBackgroundResource(R.drawable.icon_point);  
        }  
 if (indicators.length > selectedPosition)  
            indicators[selectedPosition]  
                    .setBackgroundResource(R.drawable.icon_point_pre);  
    }  
 
 /** 
     * 如果当前页面嵌套在另一个viewPager中,为了在进行滚动时阻断父ViewPager滚动,可以 阻止父ViewPager滑动事件 
     * 父ViewPager需要实现ParentViewPager中的setScrollable方法 
     */ 
 public void disableParentViewPagerTouchEvent(BaseViewPager parentViewPager) {  
 if (parentViewPager != null)  
            parentViewPager.setScrollable(false);  
    }  
 
 
 /** 
     * 轮播控件的监听事件 
     *  
     * @author minking 
     */ 
 public static interface ImageCycleViewListener {  
 
 /** 
         * 单击图片事件 
         *  
         * @param position 
         * @param imageView 
         */ 
 public void onImageClick(ADInfo info, int postion, View imageView);  
    }  
}  

 CycleViewPager类为实现可循环,可轮播的ViewPager的核心类,继承自Fragment,具体实现原理就不多说了,代码中都有相关的注释。

  ok,接下来的其他类就不多说了。自己下载Demo学习吧。

  本博文Demo下载链接地址如下:

http://download.csdn.net/detail/stevenhu_223/8675717

   另外,还有一种通过自定义ViewPager实现和本博文相同效果的广告界面Demo,这里就不再贴代码,可以通过如下地址下载:

http://download.csdn.net/detail/stevenhu_223/8697903

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-02-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档