Android 如何实现 焦点图的 无线循环滑动的状态?


参考网址:http://my.oschina.net/xsk/blog/119167

原本的实现原理: 这里是一种模拟方式 实现的 “无线的循环”, 其实并不是 真正意义上的无线循环。 而是 设置的值很大,用于 当做 无线循环。

代码:

package stu.hades;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.example.hadesviewpagerdemo.R;

public class MyViewPager extends ViewPager {

	 protected Context mContext = null;
	 protected ViewPager viewPager = null;

	    //1、定义图片资源数组,有几个就写几个,也可以动态填充
	 public static int[] imageResId = new int[] {R.drawable.aaa,R.drawable.aab, R.drawable.aac,R.drawable.aad};

	    //2、初始化一些参数
	 public MyViewPager(Context context, AttributeSet attrs) {
	        super(context, attrs);
	        this.mContext = context;
	        viewPager = this;
	 }

	//3、视图初始化后配置适配器和监听
	    @Override
	    protected void onFinishInflate() {
	        super.onFinishInflate();
	        viewPager.setAdapter(new MyAdapter(mContext));
	        //设定启示位置,设这么大,以便可以左循环100000次,应该没有人滑动这么频繁吧!
	        viewPager.setCurrentItem(100000 * imageResId.length);
	        viewPager.setOnPageChangeListener(new MyPageChangeListener());
	    }

	    //3、图片更改监听器
	    private class MyPageChangeListener implements OnPageChangeListener {

	        protected int oldPosition = 0;

	        //下面里是显示当前图片位置的圈圈,这里是个参考,大家可以自己写,即便注释不影响滑动
	        public void onPageSelected(int position) {
//	            LinearLayout image_viewpager_circle = (LinearLayout) ((RelativeLayout) viewPager.getParent()).findViewById(R.id.main_image_viewpager_circle);
//	            ((ImageView) image_viewpager_circle.getChildAt(oldPosition)).setImageResource(R.drawable.dot_normal);
//	            ((ImageView) image_viewpager_circle.getChildAt(position% imageResId.length)).setImageResource(R.drawable.dot_focused);
	            oldPosition = position % imageResId.length;
	        }

	        public void onPageScrollStateChanged(int arg0) {

	        }

	        public void onPageScrolled(int arg0, float arg1, int arg2) {

	        }
	    }

	    @Override
	    protected void onMeasure(int arg0, int arg1) {
	        super.onMeasure(arg0, arg1);
	    }

}

2  adapter

package stu.hades;

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;

public class MyAdapter extends PagerAdapter {

	public Context mContext;

	public MyAdapter(Context mContext) {
		this.mContext = mContext;
	}

	// 给适配设定元素数最大值,可以无限右滑动,左滑动不能超过100000次
	@Override
	public int getCount() {
		return Integer.MAX_VALUE;
	}

	@Override
	public int getItemPosition(Object object) {
		// TODO Auto-generated method stub
		return super.getItemPosition(object);
	}

	// 这个大家都懂的,用法可以百度或者OSCHINA一下,我白话文:每次初始化当前视图和左右两侧的视图
	@Override
	public Object instantiateItem(View arg0, int position) {
		// TODO Auto-generated method stub
		int posi = position % MyViewPager.imageResId.length;

		// 每次添加新视图,虽然有点耗资源,但不会有冲突,并且在视图切换过程中,会销毁无用的视图。
		ImageView xImageView = new ImageView(mContext);
		xImageView.setBackgroundResource(MyViewPager.imageResId[posi]);
		android.view.ViewGroup.LayoutParams para = new android.view.ViewGroup.LayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		xImageView.setAdjustViewBounds(true);
		xImageView.setLayoutParams(para);
		((ViewPager) arg0).addView(xImageView, 0);
		return xImageView;
	}

	@Override
	public void destroyItem(View arg0, int position, Object arg2) {
		// 销毁不需要的视图
		((ViewPager) arg0).removeView((View) arg2);
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}

	@Override
	public void restoreState(Parcelable arg0, ClassLoader arg1) {

	}

	@Override
	public Parcelable saveState() {
		return null;
	}

	@Override
	public void startUpdate(View arg0) {

	}

	@Override
	public void finishUpdate(View arg0) {

	}
}

代码网址:http://pan.baidu.com/s/1pJMDVMb

时间: 2024-08-30 07:35:00

Android 如何实现 焦点图的 无线循环滑动的状态?的相关文章

使用 iscroll 实现焦点图无限循环

  现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscroll,仿照iscroll官方文档的demo,迅速做了一个焦点图自动滚动的例子,但……是……问题来了,iscroll的官方文档中没有说怎么实现无限循环,不会吧,应该有吧,我抱着怀疑的心态,找啊找,官方文章找了好几个版本,每个版本都看了1.2遍,没有……真的没有……啊,那怎么办…….看来只能自己想了

8款超绚丽的jQuery焦点图动画

随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的就是一些超绚丽的jQuery焦点图动画插件,有些不仅基于jQuery,还带有CSS3的动画特效,因此显得更加炫酷. 1.jQuery实用图片滑块焦点图 支持移动端滑动 今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用. 在线演示

JS实现焦点图轮播效果

大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到欣慰 ! 好吧,其实说白了就是穷,就是没钱,就是不能好好地任性,所以只能先去慕课网找教程学习把它给做出来! OK,首先将HTML结构搭建好先: <div id="container"> <div id="list" style="left:

一款基于jQuery的图片下滑切换焦点图插件

之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错. 在线预览   源码下载 下面是实现这款jQuery焦点图的过程和代码. HTML代码: <div class="slider-wrap col-width"> <

自制jQuery焦点图切换简易插件

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s

javascript焦点图(暂时不能自动切换)

<!DOCTYPE > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="css.css"/> <title></titl

一个简单的基于jQuery的焦点图(幻灯片)代码

本代码实现的是横向循环滚动, <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery的焦点图(幻灯片)</title> <sc

Android捕获View焦点事件,LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动

 <Android捕获View焦点事件,LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动.> 如图: package zhangphil.tabs; import java.util.ArrayList; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.

一个酷炫的,基于HTML5,Jquery和Css的全屏焦点图特效,兼容各种浏览器

基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/199