Android简单实现无限滚动自动滚动的ViewPager
经常我们会在应用中看到一个可以自动滚动，并且无限滚动的一个ViewPager，百度谷歌上面也有很多关于这方面的教程，但是感觉都略显麻烦，而且封装的都不是很彻底。所以试着封装一个比较好用的ViewPager
效果如下：
简单的说一下实现思路，要实现无限滚动的话就要在PagerAdapter上面做一些手脚，在PagerAdapter的getCount的函数的返回值设置成Integer.MXA_VALUE就可以实现向右无限滚动，但是要实现向左无限滚动呢？就是一开始的时候setCurrentItem的时候设置一个非常大的值（大到你向左滚动了一万年还是有东西）
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
mPager.setCurrentItem(10000 * mDatas.size());//一开始设置成这样的话就可以向左无限滚动了
然后另外一个就是底部的游标了：
底部的游标是用一个自定义视图：无非就是画一个背景，然后在画一个高亮的游标
/**
* 指示游标
*/
private class TipView extends View {
private int mPadding;
private int mCount;
private int mCurPos;
private Paint mNorPaint;//未被选中的颜色
private Paint mSelPaint;//被选中的颜色 白色
private int mHeight;
public TipView(Context context, int count) {
super(context);
mNorPaint = new Paint();
mNorPaint.setAntiAlias(true);
int selHeight = ShowUtils.dip2px(2);
int norHeight = ShowUtils.dip2px(1);
mHeight = ShowUtils.dip2px(2);
mNorPaint.setStrokeWidth(norHeight);
mNorPaint.setColor(Color.argb(80, 255, 255, 255));
mSelPaint = new Paint();
mSelPaint.setAntiAlias(true);
mSelPaint.setStrokeWidth(selHeight);
mSelPaint.setColor(Color.WHITE);
mCount = count;
mPadding = ShowUtils.dip2px(0);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int ow = (getWidth()-2 * mPadding)/ mCount;
int y = getHeight() / 2;
canvas.drawLine(mPadding, y, mCurPos * ow + mPadding, y, mNorPaint);
canvas.drawLine(mCurPos * ow + mPadding, y, (mCurPos + 1) * ow + mPadding, y, mSelPaint);
canvas.drawLine((mCurPos + 1) * ow + mPadding, y, getWidth() - mPadding, y, mNorPaint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
ViewGroup.LayoutParams vp = getLayoutParams();
vp.width = ViewGroup.LayoutParams.MATCH_PARENT;
vp.height = mHeight;
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public void setCurPostion(int pos) {
mCurPos = pos;
invalidate();
}
public void setCount(int count) {
mCount = count;
}
}
R.layout.layout_recommend_item的布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:scaleType="fitXY"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:background="@drawable/recommend"
android:gravity="center">
<TextView
android:id="@+id/tv_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="@dimen/text_normal"
android:maxLines="1"
android:ellipsize="end"
android:shadowColor="#ff333333"
android:shadowDx="2"
android:shadowDy="2"
android:paddingRight="8dp"
android:paddingLeft="8dp"
android:shadowRadius="1" />
</LinearLayout>
</RelativeLayout>
还有一个是实现自动滚动，自动滚动的话就是监听OnPagerChangeListener里面的函数，在ViewPager状态改变的时候利用Handler发送一个切换界面的消息：
@Override
public void onPageScrollStateChanged(int i) {
curState = i;
if(i == ViewPager.SCROLL_STATE_DRAGGING){ //viewpager正在被拖动的时候
stopAnimation();
}else { //没有可执行消息时候添加消息 实现自动滚动
if(!(sHandler.hasMessages(START_SCROLL)&&sHandler.hasMessages(SCROLL_NEXT))){
startAnimation();
}
}
}
@Override
public void onPageSelected(final int i) { //页面跳转后得到调用
sHandler.removeMessages(SCROLL_NEXT);
sHandler.removeMessages(START_SCROLL);
if(curState == ViewPager.SCROLL_STATE_DRAGGING){
return;
}
Message msg = sHandler.obtainMessage(SCROLL_NEXT);
msg.arg1 = i + 1;
msg.obj = mPager;
sHandler.sendMessageDelayed(msg, SHOW_TIME);
mTipView.setCurPostion(i % mDatas.size());
}
整体的代码：
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.papau.show.R;
import com.papau.show.entity.HeadViewEntity;
import com.papau.show.utils.ShowUtils;
import java.util.ArrayList;
import java.util.List;
public class RecommendView extends RelativeLayout implements IRecommend {
private static final int START_SCROLL = 1;
private static final int SCROLL_NEXT = 2;
private static final int SHOW_TIME = 5000;
private List<HeadViewEntity> mDatas = new ArrayList<>();
private ViewPager mPager;
private Context mContext;
private int mWidth, mHeight;
private ImageLoader mLoader;
private DisplayImageOptions mOptions;
private int mTitleHeight;
private TipView mTipView;
private static Handler sHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
int w = msg.what;
ViewPager pager = (ViewPager) msg.obj;
switch (w) {
case START_SCROLL:
pager.setCurrentItem(msg.arg1, true);
break;
case SCROLL_NEXT:
pager.setCurrentItem(msg.arg1, true);
break;
}
}
};
public RecommendView(Context context) {
super(context);
}
public RecommendView(Context context, int w, int h) {
super(context);
mContext = context;
mWidth = w;
mHeight = h;
initView();
// mPager.setAdapter(new RecommendAdapter());
mPager.setOnPageChangeListener(new MOnPagerChangeListener());
mLoader = ImageLoaderManager.getImageLoader(mContext);
mOptions = ImageLoaderManager.getCacheOnDiskOptions(mContext);
init();
// DisplayMetrics dm = mContext.getResources().getDisplayMetrics();
mTitleHeight = ShowUtils.dip2px(48);//设置游标高度
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
ViewGroup.LayoutParams vp = getLayoutParams();
if (vp != null) { //设置视图的宽高
vp.width = mWidth;
vp.height = mHeight;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
private void initView() {
mPager = new ViewPager(mContext);
RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
addView(mPager, rp);
}
/**
* 初始化指示游标
*/
private void initTipView() {
if (mTipView == null) {
RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(10, 10);
rp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);//显示在父控件的底部
rp.bottomMargin = mTitleHeight;//游标的高度
mTipView = new TipView(mContext, mDatas.size());
addView(mTipView, rp);
} else {
mTipView.setCount(mDatas.size());
}
}
@Override
public void upDate() {
getData();
}
@Override
public void init() {
getData();
}
@Override
public void startAnimation() {
if (mDatas.size() == 0) {
return;
}
Message msg = sHandler.obtainMessage(START_SCROLL);
msg.obj = mPager;
msg.arg1 = (mPager.getCurrentItem() + 1);
sHandler.sendMessageDelayed(msg, SHOW_TIME);
}
@Override
public void stopAnimation() {
sHandler.removeMessages(START_SCROLL);
sHandler.removeMessages(SCROLL_NEXT);
}
/**
* 获取viewpager要显示的数据
*/
private void getData() {
String[] imageData = new String[]{"http://f.hiphotos.baidu.com/image/h%3D360/sign=e105b9f1d61b0ef473e89e58edc651a1/b151f8198618367a9f738e022a738bd4b21ce573.jpg",
"http://c.hiphotos.baidu.com/image/h%3D360/sign=b8cea9e92b738bd4db21b437918b876c/f7246b600c3387448982f948540fd9f9d72aa0bb.jpg",
"http://a.hiphotos.baidu.com/image/h%3D360/sign=3da95d01e7dde711f8d245f097eecef4/71cf3bc79f3df8dc39cb6295cf11728b461028c4.jpg",
"http://d.hiphotos.baidu.com/image/h%3D360/sign=410c3c96a60f4bfb93d09852334f788f/10dfa9ec8a136327a1de913a938fa0ec08fac78c.jpg",
"http://e.hiphotos.baidu.com/image/h%3D360/sign=f6600b1613dfa9ece22e501152d1f754/342ac65c10385343ff41ee2b9113b07eca808829.jpg"};
for (int i = 0; i < 5; i++) {
HeadViewEntity info = new HeadViewEntity();
info.setImageUrl(imageData[i]);
info.setTitle("我不做大哥好多年"+i);
info.setUrl("www.baidu.com");
mDatas.add(info);
}
sHandler.postDelayed(new Runnable() {
@Override
public void run() {
stopAnimation();
initTipView();
mPager.setAdapter(new RecommendAdapter());
mPager.setCurrentItem(10000 * mDatas.size());//一开始设置成这样的话就可以向左无限滚动了
}
},2000);
}
/**
* viewpager子项内容
*/
private class RecommendAdapter extends PagerAdapter {
/**
* 填充子项视图的内容
* @param container 父控件 viewpager
* @param position 子项的位置
* @return 返回子项视图
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int curPos = position % mDatas.size();
View view = View.inflate(mContext, R.layout.layout_recommend_item, null);
ViewGroup.LayoutParams vp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
ImageView iv = (ImageView) view.findViewById(R.id.iv_pic);
TextView tv = (TextView) view.findViewById(R.id.tv_desc);
tv.setText(mDatas.get(curPos).getTitle());
mLoader.displayImage(mDatas.get(curPos).getImageUrl(), iv, mOptions);
container.addView(view, vp);
view.setTag(curPos);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
}
});
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
}
private class MOnPagerChangeListener implements ViewPager.OnPageChangeListener {
private int curState;
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageScrollStateChanged(int i) {
curState = i;
if(i == ViewPager.SCROLL_STATE_DRAGGING){ //viewpager正在被拖动的时候
stopAnimation();
}else { //没有可执行消息时候添加消息 实现自动滚动
if(!(sHandler.hasMessages(START_SCROLL)&&sHandler.hasMessages(SCROLL_NEXT))){
startAnimation();
}
}
}
@Override
public void onPageSelected(final int i) { //页面跳转后得到调用
sHandler.removeMessages(SCROLL_NEXT);
sHandler.removeMessages(START_SCROLL);
if(curState == ViewPager.SCROLL_STATE_DRAGGING){
return;
}
Message msg = sHandler.obtainMessage(SCROLL_NEXT);
msg.arg1 = i + 1;
msg.obj = mPager;
sHandler.sendMessageDelayed(msg, SHOW_TIME);
mTipView.setCurPostion(i % mDatas.size());
}
}
/**
* 指示游标
*/
private class TipView extends View {
private int mPadding;
private int mCount;
private int mCurPos;
private Paint mNorPaint;//未被选中的颜色
private Paint mSelPaint;//被选中的颜色 白色
private int mHeight;
public TipView(Context context, int count) {
super(context);
mNorPaint = new Paint();
mNorPaint.setAntiAlias(true);
int selHeight = ShowUtils.dip2px(2);
int norHeight = ShowUtils.dip2px(1);
mHeight = ShowUtils.dip2px(2);
mNorPaint.setStrokeWidth(norHeight);
mNorPaint.setColor(Color.argb(80, 255, 255, 255));
mSelPaint = new Paint();
mSelPaint.setAntiAlias(true);
mSelPaint.setStrokeWidth(selHeight);
mSelPaint.setColor(Color.WHITE);
mCount = count;
mPadding = ShowUtils.dip2px(0);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int ow = (getWidth()-2 * mPadding)/ mCount;
int y = getHeight() / 2;
canvas.drawLine(mPadding, y, mCurPos * ow + mPadding, y, mNorPaint);
canvas.drawLine(mCurPos * ow + mPadding, y, (mCurPos + 1) * ow + mPadding, y, mSelPaint);
canvas.drawLine((mCurPos + 1) * ow + mPadding, y, getWidth() - mPadding, y, mNorPaint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
ViewGroup.LayoutParams vp = getLayoutParams();
vp.width = ViewGroup.LayoutParams.MATCH_PARENT;
vp.height = mHeight;
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public void setCurPostion(int pos) {
mCurPos = pos;
invalidate();
}
public void setCount(int count) {
mCount = count;
}
}
}
然后提供了一个接口调用：
/**
* RecommendView接口
*/
public interface IRecommend {
void upDate();
void init();
void startAnimation();
void stopAnimation();
}
图片的加载用到了ImageLoad库：
import android.content.Context;
import android.graphics.Bitmap;
import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiskCache;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.papau.show.constant.Constants;
import java.io.File;
public class ImageLoaderManager {
/**
* 不带硬盘缓存的options
*
* @param context
* @return
*/
public static synchronized DisplayImageOptions getCacheOnMemoryOptions(Context context) {
DisplayImageOptions options = new DisplayImageOptions.Builder()
.cacheInMemory(true)
.cacheOnDisk(false)
.imageScaleType(ImageScaleType.EXACTLY_STRETCHED)
.bitmapConfig(Bitmap.Config.ARGB_8888)
// .showImageOnLoading(
// context.getResources().getDrawable(
// R.drawable.loading_wait))
// .showImageOnFail(
// context.getResources().getDrawable(
// R.drawable.loading_wait))
.build();
return options;
}
public static synchronized DisplayImageOptions getCircleOptions(Context context) {
DisplayImageOptions options = new DisplayImageOptions.Builder()
.cacheInMemory(true)
.cacheOnDisk(false)
.imageScaleType(ImageScaleType.EXACTLY_STRETCHED)
.bitmapConfig(Bitmap.Config.ARGB_8888)
// .showImageOnLoading(
// context.getResources().getDrawable(
// R.drawable.ic_user_head_hint))
// .showImageOnFail(
// context.getResources().getDrawable(
// R.drawable.ic_user_head_hint))
.build();
return options;
}
/**
* 获取在硬盘中缓存options
*
* @param context
* @return options
*/
public static synchronized DisplayImageOptions getCacheOnDiskOptions(
Context context) {
DisplayImageOptions options = new DisplayImageOptions.Builder()
.cacheInMemory(true)
.cacheOnDisk(true)
.imageScaleType(ImageScaleType.EXACTLY)
.bitmapConfig(Bitmap.Config.ARGB_8888)
// .showImageOnLoading(
// context.getResources().getDrawable(
// R.drawable.loading_wait))
// .showImageOnFail(
// context.getResources().getDrawable(
// R.drawable.loading_wait))
.build();
return options;
}
/**
* 获取imageLoader 单例
*
* @param context
* @return
*/
public static synchronized ImageLoader getImageLoader(Context context) {
ImageLoader imageLoader = ImageLoader.getInstance();
File cacheDir = new File(Constants.sPicCacheLocalPath);
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
context).diskCache(new UnlimitedDiskCache(cacheDir))
.threadPoolSize(3)
.diskCacheExtraOptions(480, 320, null)
.build();
imageLoader.init(config);
return imageLoader;
}
}
使用方法
DisplayMetrics dm = getActivity().getResources().getDisplayMetrics();
RecommendView rv = new RecommendView(getActivity(),dm.widthPixels ,(dm.widthPixels)/2);
headViewPager.addView(rv);
以上所述是小编给大家介绍的Android简单实现无限滚动自动滚动的ViewPager，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
赞 (0)
相关推荐
-
Android ViewPager无限循环实现底部小圆点动态滑动
页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页 同时,底部红色小圆点随着页面的滑动距离比例随时改变位置 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas
-
Android 使用ViewPager自动滚动循环轮播效果
对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情. 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题. 先给大家展示下效果图,喜欢的朋友可以下载源码: 1.实现 没有通过ScheduledExecutorService或Timer定期执行某个任务实现,而是简单的通过handler发送消息去
-
Android ViewPager实现智能无限循环滚动回绕效果
android系统提供的ViewPager标准方式是左右可以自由滑动,但是滑动到最左边的极限位置是第一个page,滑动到最右边的位置是最后一个page,当滑动到最左或者最右时候,就不能再滑动/滚动了,这是Android系统默认的ViewPager实现方式. 但是有些情况下开发者可能希望ViewPager能够智能的无限循环滚动回绕,比如现在总共有编号1, 2, 3, 4, 5的5个Page. (1)当用户手指从右往左滚动到最右边/最后面的页面5时候,如果此时用户继续拖住ViewPager往左边滑动
-
Android viewpager中动态添加view并实现伪无限循环的方法
本文实例讲述了Android viewpager中动态添加view并实现伪无限循环的方法.分享给大家供大家参考,具体如下: viewpager的使用,大家都熟悉,它可以实现页面之间左右滑动的切换,这里有一个需求,就是viewpager里面加载的页数不是确定的,而是根据数据的多少来确定的.常见的应用就是在一个新闻的详细页面中,显示与此新闻有关的图片. 下面我们来看一下代码: activity_main.xml <RelativeLayout xmlns:android="http://sch
-
Android仿开心消消乐大树星星无限循环效果
啥都不说先上效果图,这个是我项目里的效果: 下面的是我抽取出来的 demo 适配啥的我基本上都做好了没做其他的 ok 下面 说一下思路把 首先 说一下原理 我是使用bitmap 创建两张图 一开始的时候 一张在下面记为1号 一张在上面 记为2号 当手指向下滑动时 判断 1号 的起点位置 是否完全超出屏幕 如果超出屏幕的话 那么将2号变为下面 1号变为上面 (移动1号的Y坐标) 大体思路 是这样. 里面还有许多判断 比如 是否能向下滑动 起点位置, 星星的判定 哎呀 好烦 说的东西太多啦 来张我的
-
Android 使用viewpager实现无限循环(定时+手动)
循环轮播的方法有两种,一种是使用定时器另外一种是使用手指拨动,相比较而言,定时器实现循环播放比较容易,只要在定时器的消息里加上简单几段代码即可,下面分别就这两种方法给大家详解,具体详情请看下文吧. int count = adapter.getCount(); if (count > 1) { // 多于1个,才循环 int index = viewPager.getCurrentItem(); index = (index + 1) % count; viewPager.setCurrentI
-
Android实现带指示点的自动轮播无限循环效果
想要实现无限轮播,一直向左滑动,当到最后一个view时,会滑动到第一个,无限- 可以自己写ViewPager然后加handler先实现自动滚动,当然这里我为了项目的进度直接使用了Trinea的Android-auto-scroll-view-pager库,网址:点击进入github 引用库compile('cn.trinea.android.view.autoscrollviewpager:android-auto-scroll-view-pager:1.1.2') { exclude modu
-
Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件
最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version
-
Android实战打飞机游戏之无限循环的背景图(2)
首先分析下游戏界面内的元素: 无限滚动的背景图, 可以操作的主角,主角的子弹, 主角的血量,两种怪物(敌机),一个boss, boss的爆炸效果. 先看效果图 1.首先实现无限滚动的背景图 原理: 定义两个位图对象 当第一个位图到末尾是 第二个位图从第一个位图的末尾跟上. public class GameBg { // 游戏背景的图片资源 // 为了循环播放,这里定义两个位图对象, // 其资源引用的是同一张图片 private Bitmap bmpBackGround1; private B
-
Android ViewPager实现无限循环效果
最近项目里有用到ViewPager来做广告运营位展示,看到现在很多APP的广告运营位都是无限循环的,所以就研究了一下这个功能的实现. 先看看效果 从一个方向上一直滑动,么有滑到尽头的感觉,具体是怎么实现的呢?看下面的思路. 实现思路 此处画了一幅图来表达实现无限循环的思路,即在数据起始位置前插入最后一项数据,在最后一项数据后插入第一项数据,当滑动到此处时,更新页面的索引位置就ok了 . 代码实现 这个方法用于数据处理,其中mediaList是原始数据,newMediaList是处理完的数据,mM