`
zsnlovewl
  • 浏览: 176518 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Gallery自动循环滚动,手动滚动的平滑切换及存在问题

 
阅读更多

来自:http://blog.csdn.net/lenghun00/article/details/7635374

 

 

@Gallery配合dot使用时,如果放在RelativeLayout中,则手动滑动有反弹现象,其他layout没问题,现在还没弄清原因。
首先继承Gallery重写OnFling函数,去除gallery的滚动惯性

  1. public class MyGallery extends Gallery {  
  2.   
  3.     public MyGallery(Context context, AttributeSet attrs) {  
  4.         super(context, attrs);  
  5.         // TODO Auto-generated constructor stub   
  6.     }  
  7.   
  8.     private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {  
  9.   
  10.         return e2.getX() > e1.getX();  
  11.   
  12.     }  
  13.       
  14.     @Override  
  15.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  16.             float velocityY) {  
  17.         int keyCode;  
  18.   
  19.         if (isScrollingLeft(e1, e2)) {  
  20.   
  21.             keyCode = KeyEvent.KEYCODE_DPAD_LEFT;  
  22.   
  23.         } else {  
  24.   
  25.             keyCode = KeyEvent.KEYCODE_DPAD_RIGHT;  
  26.   
  27.         }  
  28.   
  29.         onKeyDown(keyCode, null);  
  30.   
  31.         return true;  
  32.     }  
  33.   
  34. }  
public class MyGallery extends Gallery {

	public MyGallery(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {

		return e2.getX() > e1.getX();

	}
	
	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		int keyCode;

		if (isScrollingLeft(e1, e2)) {

			keyCode = KeyEvent.KEYCODE_DPAD_LEFT;

		} else {

			keyCode = KeyEvent.KEYCODE_DPAD_RIGHT;

		}

		onKeyDown(keyCode, null);

		return true;
	}

}

 

@OnFling直接返回false也能实现类似效果,但那样需要滑动很大距离,图片才会切换,用户体验不好

第二步,构造adapter

要想平滑的实现循环滚动,可以让getCount返回一个很大的值,这样gallery就认为是有多个item,item之间的切换动画是平滑的

  1. public class GalleryAdapter extends BaseAdapter {  
  2.   
  3.     private LayoutInflater mInflater;  
  4.     private Context mContext;  
  5.     private int width;  
  6.     private int count;  
  7.     private int[] mImageIds;  
  8.   
  9.     public GalleryAdapter(Context context, int[] ids) {  
  10.         mContext = context;  
  11.         mImageIds = ids;  
  12.         mInflater = LayoutInflater.from(mContext);  
  13.         DisplayMetrics dm = mContext.getApplicationContext().getResources()  
  14.                 .getDisplayMetrics();  
  15.         width = dm.widthPixels;  
  16.         count = mImageIds.length;  
  17.     }  
  18.   
  19.     @Override  
  20.     public int getCount() {  
  21.         return Integer.MAX_VALUE;//用于循环滚动  
  22.     }  
  23.   
  24.     @Override  
  25.     public Object getItem(int position) {  
  26.         return position;  
  27.     }  
  28.   
  29.     @Override  
  30.     public long getItemId(int position) {  
  31.         return position;  
  32.     }  
  33.   
  34.     @Override  
  35.     public View getView(int position, View convertView, ViewGroup parent) {  
  36.         position = position % count;  
  37.         if (convertView == null) {  
  38.             convertView = mInflater.inflate(R.layout.gallery_item, null);  
  39.         }  
  40.         ImageView v = (ImageView) convertView.findViewById(R.id.img);  
  41.         v.setLayoutParams(new Gallery.LayoutParams(width, 200));  
  42.         v.setScaleType(ImageView.ScaleType.FIT_XY);  
  43.         v.setBackgroundResource(mImageIds[position]);  
  44.         return v;  
  45.     }  
  46.   
  47. }  
public class GalleryAdapter extends BaseAdapter {

	private LayoutInflater mInflater;
	private Context mContext;
	private int width;
	private int count;
	private int[] mImageIds;

	public GalleryAdapter(Context context, int[] ids) {
		mContext = context;
		mImageIds = ids;
		mInflater = LayoutInflater.from(mContext);
		DisplayMetrics dm = mContext.getApplicationContext().getResources()
				.getDisplayMetrics();
		width = dm.widthPixels;
		count = mImageIds.length;
	}

	@Override
	public int getCount() {
		return Integer.MAX_VALUE;//用于循环滚动
	}

	@Override
	public Object getItem(int position) {
		return position;
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		position = position % count;
		if (convertView == null) {
			convertView = mInflater.inflate(R.layout.gallery_item, null);
		}
		ImageView v = (ImageView) convertView.findViewById(R.id.img);
		v.setLayoutParams(new Gallery.LayoutParams(width, 200));
		v.setScaleType(ImageView.ScaleType.FIT_XY);
		v.setBackgroundResource(mImageIds[position]);
		return v;
	}

}

 

第三,实现自动滚动

由于我们还要手动滚动,所以自动滚动用单独一个进程来实现

  1. private void startAutoScroll() {  
  2.         new Thread() {  
  3.             @Override  
  4.             public void run() {  
  5.                 int count = 0;  
  6.                 while (mAutoScroll) {  
  7.                     count = 0;  
  8.                     while (count < 30) {  
  9.                         count++;  
  10.                         try {  
  11.                             Thread.sleep(100);  
  12.                         } catch (InterruptedException e) {  
  13.                             e.printStackTrace();  
  14.                         }  
  15.                         if (mOnTouch) {// 用戶手动滑动时,停止自动滚动  
  16.                             count = 0;  
  17.                         }  
  18.                     }  
  19.                     mPosition++;  
  20.                     Message msg = mHandler.obtainMessage(SCROLL, mPosition, 0);  
  21.                     mHandler.sendMessage(msg);  
  22.                 }  
  23.             }  
  24.   
  25.         }.start();  
  26.     }  
  27.   
  28.     private Handler mHandler = new Handler() {  
  29.   
  30.         @Override  
  31.         public void handleMessage(Message msg) {  
  32.             switch (msg.what) {  
  33.             case SCROLL:  
  34.                 mGallery.setSelection(msg.arg1);  
  35.                 break;  
  36.             }  
  37.         }  
  38.   
  39.     };  
private void startAutoScroll() {
		new Thread() {
			@Override
			public void run() {
				int count = 0;
				while (mAutoScroll) {
					count = 0;
					while (count < 30) {
						count++;
						try {
							Thread.sleep(100);
						} catch (InterruptedException e) {
							e.printStackTrace();
						}
						if (mOnTouch) {// 用戶手动滑动时,停止自动滚动
							count = 0;
						}
					}
					mPosition++;
					Message msg = mHandler.obtainMessage(SCROLL, mPosition, 0);
					mHandler.sendMessage(msg);
				}
			}

		}.start();
	}

	private Handler mHandler = new Handler() {

		@Override
		public void handleMessage(Message msg) {
			switch (msg.what) {
			case SCROLL:
				mGallery.setSelection(msg.arg1);
				break;
			}
		}

	};

 

第四实现手动滚动

手动滚动时,要停止自动滚动,监听gallery的onTouch事件,DOWN时mOnTouch置为true,UPmOnTouch置为false即可

  1. mGallery.setOnTouchListener(new OnTouchListener() {  
  2.   
  3.             @Override  
  4.             public boolean onTouch(View v, MotionEvent event) {  
  5.                 int action = event.getAction();  
  6.                 if (action == MotionEvent.ACTION_DOWN) {  
  7.                     mOnTouch = true;  
  8.                 } else if (action == MotionEvent.ACTION_UP) {  
  9.                     mOnTouch = false;  
  10.                 }  
  11.                 return false;  
  12.             }  
  13.   
  14.         });  
mGallery.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				int action = event.getAction();
				if (action == MotionEvent.ACTION_DOWN) {
					mOnTouch = true;
				} else if (action == MotionEvent.ACTION_UP) {
					mOnTouch = false;
				}
				return false;
			}

		});


到现在我们已经可以自动滚动,手动滚动时自动滚动也会停止。

我们也许还需要加上dot提示图片滚动的位置

  1. LinearLayout layout = (LinearLayout) findViewById(R.id.dot);  
  2.         if (mDots == null) {  
  3.             mDots = new ImageView[ids.length];  
  4.             for (int i = 0; i < ids.length; i++) {  
  5.                 if (mDots[i] == null)  
  6.                     mDots[i] = new ImageView(this);  
  7.   
  8.                 mDots[i].setBackgroundResource(R.drawable.banner_tab_unselected);  
  9.                 layout.addView(mDots[i], new LinearLayout.LayoutParams(mWidth  
  10.                         / ids.length + 1, LayoutParams.WRAP_CONTENT));  
  11.             }  
  12.             mDots[0].setBackgroundResource(R.drawable.banner_tab_selected);  
  13.         }  
LinearLayout layout = (LinearLayout) findViewById(R.id.dot);
		if (mDots == null) {
			mDots = new ImageView[ids.length];
			for (int i = 0; i < ids.length; i++) {
				if (mDots[i] == null)
					mDots[i] = new ImageView(this);

				mDots[i].setBackgroundResource(R.drawable.banner_tab_unselected);
				layout.addView(mDots[i], new LinearLayout.LayoutParams(mWidth
						/ ids.length + 1, LayoutParams.WRAP_CONTENT));
			}
			mDots[0].setBackgroundResource(R.drawable.banner_tab_selected);
		}

 

  1. mGallery.setOnItemSelectedListener(new OnItemSelectedListener() {  
  2.   
  3.             @Override  
  4.             public void onItemSelected(AdapterView<?> arg0, View view,  
  5.                     int position, long arg3) {  
  6.                 mDotPosition = position % ids.length;  
  7.                 mDots[mDotPosition]  
  8.                         .setBackgroundResource(R.drawable.banner_tab_selected);  
  9.                 if (mDotPosition != mPreDotPosition)  
  10.                     mDots[mPreDotPosition]  
  11.                             .setBackgroundResource(R.drawable.banner_tab_unselected);  
  12.                 mPreDotPosition = mDotPosition;  
  13.             }  
  14.   
  15.             @Override  
  16.             public void onNothingSelected(AdapterView<?> arg0) {  
  17.                                   
  18.             }  
  19.               
  20.         });  
分享到:
评论

相关推荐

    android 自动滚动图片效果源码

    2. **触摸反馈**:用户可以通过轻触屏幕并滑动来手动滚动,同时`Gallery`会提供适当的滚动反馈。 3. **自动滚动**:通过定时器或者动画实现自动在项目间切换,即图片轮播效果。 4. **焦点管理**:`Gallery`会管理...

    Gallery和imageSwitcher循环显示切换图像组件

    在Android开发中,展示图像的方式多种多样,其中`Gallery`和`ImageSwitcher`是两种常用的组件,尤其适用于实现图片的循环显示切换效果。这里,我们将深入探讨这两个组件的使用方法及其背后的原理。 首先,`Gallery`...

    gallery无限循环

    在Android开发中,`Gallery`是一个非常有用的控件,它允许用户...无论是手动还是自动循环,都需要关注焦点的切换时机以及相应的事件处理。在实际项目中,还可以根据需求进一步优化,例如添加过渡动画、设置滚动速度等。

    android滚动插件

    8. **用户体验**:设置适当的自动滚动间隔,确保用户能跟上图片切换的速度,同时添加手势控制,让用户可以根据需要手动滑动。 总结起来,实现"android滚动插件"涉及到的主要知识点包括:使用ViewPager或Gallery组件...

    不间断无接缝图片滚动

    "不间断无接缝图片滚动"是一种常见的网页设计技术,它为用户提供了一种流畅且连续的视觉体验,使得图片在页面上以无缝的方式自动或手动滚动。这种效果在展示产品图库、摄影集或者画廊等场景中非常常见,能够吸引用户...

    图片循环播放

    同时,通过设置PagerAdapter的`setOffscreenPageLimit()`方法,可以控制缓存的页面数量,确保图片的平滑切换。 2. **Adapter**:为了将图片数据绑定到ViewPager,我们需要创建一个适配器(Adapter),比如`...

    Android高级应用源码-ViewFlowTest 完美实现gallry轮训效果!!!.zip

    ViewFlow是一个开源的Android库,它提供了类似Gallery的无限循环滚动功能,同时具有更好的性能和自定义性。ViewFlow允许开发者轻松地创建水平滚动视图,适用于展示一系列图片或按钮,实现平滑的用户体验。在这个项目...

    jquery图片滚动

    图片轮播通常基于定时器(如`setInterval`)实现,每隔一定时间自动切换显示的图片。jQuery提供了一组方便的动画方法,如`fadeIn`和`fadeOut`,可以用于平滑地淡入淡出图片,实现无缝过渡效果。 **二、jQuery选择器...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色简洁风格横向三级网站导航菜单 15.jquery简洁动感支持三级的黑色导航菜单 16.jquery类似TAB一样的动感菜单下载 17.jquery绿色动感滑动下拉多级导航...

    凡客诚品 商品详情中 图片循环

    1. **自定义View**:开发者可以创建一个继承自HorizontalScrollView或者ViewPager的自定义View,然后在此基础上实现图片的循环滚动。这通常涉及以下步骤: - 实现滑动手势的监听,处理用户的滑动事件。 - 编写布局...

    recycleView实现的循环banner效果

    本文将深入探讨如何使用RecyclerView实现一个循环滚动的Banner效果,类似于Gallery组件的功能。 首先,我们需要理解RecyclerView的基本架构。RecyclerView由Adapter、ViewHolder和LayoutManager三个主要部分组成。...

    基于JS实现大图淡入淡出图片切换特效代码.zip

    这个项目利用JavaScript(可能是jQuery库)来创建一个平滑的图片切换效果,其中图片会淡入淡出,为用户带来流畅的视觉体验。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    jQuery手机触摸滑动切换图片特效代码

    通过这些API,我们可以根据需求实现更复杂的功能,如自动播放、无限循环等。 最后,为了确保在不同屏幕尺寸上的良好表现,我们需要根据屏幕宽度应用适当的CSS媒体查询,调整图片的大小和布局。这可以通过使用CSS预...

    android图片浏览器 android音乐播放器

    2. 图片滑动效果:平滑的图片滑动过渡,可以使用ViewPager或RecyclerView实现,配合PageTransformer实现酷炫的切换动画。 3. 图片缩放:支持手势缩放,可以利用Android的ScaleGestureDetector实现。 4. 图片预加载:...

Global site tag (gtag.js) - Google Analytics