`
250367976
  • 浏览: 26713 次
社区版块
存档分类
最新评论

自定义ImageView手势缩放加ViewPager翻页

阅读更多

网上整理的自定义ImageView控件,因为对Android的内核不是太了解,,,做出来的这个还有点小问题,,,不过可以用皱眉;唉,很多方法的执行都跟我想的不太一样啊,郁闷,,,在这里备忘了。

ZoomImageView类

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.AsyncTask;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.widget.ImageView;

/**
 * 手势缩放
 * 
 * @Title: ZoomImageView.java
 * @Depict: TODO
 * @Author: objectX
 * @Data: 2014-3-6
 * @Version V1.0
 * 
 */
public class ZoomImageView extends ImageView {
	private Activity mActivity;

	private int screen_W, screen_H;// 屏幕宽高

	private int bitmap_W, bitmap_H;// 图片宽高

	private int MAX_W, MAX_H, MIN_W, MIN_H;// 图片可以的最大最小宽高

	private int current_Top, current_Right, current_Bottom, current_Left;// 图片要缩放的各个坐标

	private int start_Top = -1, start_Right = -1, start_Bottom = -1, start_Left = -1;// 开始图片的位置离边框的各个距离

	private int start_x, start_y, current_x, current_y;
	private float beforeLenght, afterLenght;// beforeLenght之前的长度
											// afterLenght之后的长度 ——两指之间的距离
	private int before = 0;
	private int after = 0;

	private float scale_temp;// 缩放的比例

	private enum MODE {
		NONE, DRAG, ZOOM

	};

	private MODE mode = MODE.NONE;

	private boolean isControl_V = false;// 垂直监控

	private boolean isControl_H = false;// 水平监控

	private boolean isScaleAnim = false;// 是否执行回缩放

	private MyAsyncTask myAsyncTask;

	private MyImageViewPager viewPager;
	
	public ZoomImageView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public void setViewPager(MyImageViewPager viewPager) {
		this.viewPager = viewPager;
	}

	public boolean isControl_H() {
		return isControl_H;
	}

	public void setmActivity(Activity mActivity) {
		this.mActivity = mActivity;
	}

	public void setScreen_W(int screen_W) {
		this.screen_W = screen_W;
	}

	public void setScreen_H(int screen_H) {
		this.screen_H = screen_H;
	}

	public ZoomImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	/***
	 * 设置显示图片
	 */
	@Override
	public void setImageBitmap(Bitmap bm) {
		super.setImageBitmap(bm);
		/** 获取图片宽高 **/
		bitmap_W = bm.getWidth();
		bitmap_H = bm.getHeight();

		MAX_W = bitmap_W * 3;
		MAX_H = bitmap_H * 3;

		MIN_W = bitmap_W / 2;
		MIN_H = bitmap_H / 2;
		after++;
	}

	@Override
	protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
		super.onLayout(changed, left, top, right, bottom);
		if (start_Top == -1 || before != after) {
			// before!=after: 为了确保初始化的l,t,r,b的值的正确性,因为第三方图片插件第一次插入的图片并不是我们要显示的图片
			before = after;
			start_Top = top;
			start_Left = left;
			start_Bottom = bottom;
			start_Right = right;
		}
		// 返回时重载数据
		if (viewPager != null) {
			viewPager.setZoomImageView(this);
		}
		if (isControl_H) {
			if (left >= 0) {
				viewPager.setPagerLeft(true);// viewpager可以左滑动
			} else {
				viewPager.setPagerLeft(false);
			}
			if (right <= screen_W) {
				viewPager.setPagerRight(true);// viewpager可以右滑动
			} else {
				viewPager.setPagerRight(false);
			}
		} else {
			viewPager.setPagerRight(true);// viewpager可以右滑动
			viewPager.setPagerLeft(true);// viewpager可以左滑动
		}
	}

	/***
	 * touch 事件
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		/** 处理单点、多点触摸 **/
		switch (event.getAction() & MotionEvent.ACTION_MASK) {
		case MotionEvent.ACTION_DOWN:
			onTouchDown(event);
			break;
		// 多点触摸
		case MotionEvent.ACTION_POINTER_DOWN:
			onPointerDown(event);
			break;

		case MotionEvent.ACTION_MOVE:
			// 拖动
			onTouchMove(event);
			break;
		case MotionEvent.ACTION_UP:
			mode = MODE.NONE;
			break;

		// 多点松开
		case MotionEvent.ACTION_POINTER_UP:
			mode = MODE.NONE;
			/** 执行缩放还原 **/
			if (isScaleAnim) {
				doScaleAnim();
			}
			break;
		}

		return true;
	}

	public void doScaleAnim() {
		myAsyncTask = new MyAsyncTask(screen_W, this.getWidth(), this.getHeight());
		myAsyncTask.setLTRB(this.getLeft(), this.getTop(), this.getRight(), this.getBottom());
		myAsyncTask.execute();
		isScaleAnim = false;
	}

	/** 按下,可能会执行拖动 **/
	void onTouchDown(MotionEvent event) {
		mode = MODE.DRAG;
		// 相对于屏幕位置坐标
		current_x = (int) event.getRawX();
		current_y = (int) event.getRawY();
		// 相对于容器位置坐标
		start_x = (int) event.getX();
		start_y = current_y - this.getTop();
	}

	/** 两个手指 只能放大缩小 **/
	void onPointerDown(MotionEvent event) {
		if (event.getPointerCount() == 2) {
			mode = MODE.ZOOM;
			beforeLenght = getDistance(event);// 获取两点开始的距离
		}
	}

	float getDistance(MotionEvent event) {
		float x = event.getX(0) - event.getX(1);
		float y = event.getY(0) - event.getY(1);

		return FloatMath.sqrt(x * x + y * y);
	}

	/** 移动的处理 **/
	void onTouchMove(MotionEvent event) {
		int left = 0, top = 0, right = 0, bottom = 0;
		/** 处理拖动 **/
		if (mode == MODE.DRAG) {

			/** 在这里要进行判断处理,防止在drag时候越界 **/

			/** 获取相应的l,t,r ,b **/
			left = current_x - start_x;
			right = current_x + this.getWidth() - start_x;
			top = current_y - start_y;
			bottom = current_y - start_y + this.getHeight();
			direction();
			/** 水平进行判断 **/
			if (isControl_H) {
				if (left >= 0) {
					left = 0;
					right = this.getWidth();
				}
				if (right <= screen_W) {
					left = screen_W - this.getWidth();
					right = screen_W;
				}
			} else {
				left = this.getLeft();
				right = this.getRight();
			}
			/** 垂直判断 **/
			if (isControl_V) {
				if (top >= 0) {
					top = 0;
					bottom = this.getHeight();
				}

				if (bottom <= screen_H) {
					top = screen_H - this.getHeight();
					bottom = screen_H;
				}
			} else {
				top = this.getTop();
				bottom = this.getBottom();
			}

			if (isControl_H || isControl_V) this.setPosition(left, top, right, bottom);
			current_x = (int) event.getRawX();
			current_y = (int) event.getRawY();

		}
		/** 处理缩放 **/
		else if (mode == MODE.ZOOM) {

			afterLenght = getDistance(event);// 获取两点的距离

			float gapLenght = afterLenght - beforeLenght;// 变化的长度

			if (Math.abs(gapLenght) > 5f) {
				scale_temp = afterLenght / beforeLenght;// 求的缩放的比例

				this.setScale(scale_temp);

				beforeLenght = afterLenght;
			}
		}

	}

	public void direction() {
		if (current_x > start_x) {
			// 手指向右滑
			viewPager.setRight(true);
			viewPager.setLeft(false);
		} else {
			// 手指向左滑
			viewPager.setRight(false);
			viewPager.setLeft(true);
		}		
	}

	private void setPosition(int left, int top, int right, int bottom) {
		this.layout(left, top, right, bottom);
	}

	/** 处理缩放 **/
	void setScale(float scale) {
		int disX = (int) (this.getWidth() * Math.abs(1 - scale)) / 4;// 获取缩放水平距离
		int disY = (int) (this.getHeight() * Math.abs(1 - scale)) / 4;// 获取缩放垂直距离

		// 放大
		if (scale > 1 && this.getWidth() <= MAX_W) {
			current_Left = this.getLeft() - disX;
			current_Top = this.getTop() - disY;
			current_Right = this.getRight() + disX;
			current_Bottom = this.getBottom() + disY;

			this.setFrame(current_Left, current_Top, current_Right, current_Bottom);
			/***
			 * 此时因为考虑到对称,所以只做一遍判断就可以了。
			 */
			if (current_Top <= 0 && current_Bottom >= screen_H) {
				isControl_V = true;// 开启垂直监控
			} else {
				isControl_V = false;
			}
			if (current_Left <= 0 && current_Right >= screen_W) {
				isControl_H = true;// 开启水平监控
			} else {
				isControl_H = false;
			}

		}
		// 缩小
		else if (scale < 1 && this.getWidth() >= MIN_W) {
			current_Left = this.getLeft() + disX;
			current_Top = this.getTop() + disY;
			current_Right = this.getRight() - disX;
			current_Bottom = this.getBottom() - disY;
			/***
			 * 在这里要进行缩放处理
			 */
			// 上边越界
			if (isControl_V && current_Top > 0) {
				current_Top = 0;
				current_Bottom = this.getBottom() - 2 * disY;
				if (current_Bottom < screen_H) {
					current_Bottom = screen_H;
					isControl_V = false;// 关闭垂直监听
				}
			}
			// 下边越界
			if (isControl_V && current_Bottom < screen_H) {
				current_Bottom = screen_H;
				current_Top = this.getTop() + 2 * disY;
				if (current_Top > 0) {
					current_Top = 0;
					isControl_V = false;// 关闭垂直监听
				}
			}

			// 左边越界
			if (isControl_H && current_Left >= 0) {
				current_Left = 0;
				current_Right = this.getRight() - 2 * disX;
				if (current_Right <= screen_W) {
					current_Right = screen_W;
					isControl_H = false;// 关闭
					viewPager.setPagerRight(true);// viewpager可以右滑动
					viewPager.setPagerLeft(true);// viewpager可以左滑动
				}
			}
			// 右边越界
			if (isControl_H && current_Right <= screen_W) {
				current_Right = screen_W;
				current_Left = this.getLeft() + 2 * disX;
				if (current_Left >= 0) {
					current_Left = 0;
					isControl_H = false;// 关闭
					viewPager.setPagerRight(true);// viewpager可以右滑动
					viewPager.setPagerLeft(true);// viewpager可以左滑动
				}
			}
			if(!isControl_H){
				viewPager.setPagerRight(true);// viewpager可以右滑动
				viewPager.setPagerLeft(true);// viewpager可以左滑动
			}
			if (isControl_H || isControl_V) {
				this.setFrame(current_Left, current_Top, current_Right, current_Bottom);
			} else {
				this.setFrame(current_Left, current_Top, current_Right, current_Bottom);
				isScaleAnim = true;// 开启缩放动画
			}

		}

	}

	/**
	 * 还原image
	 */
	public void initImage() {
		this.setFrame(start_Left, start_Top, start_Right, start_Bottom);
		// 复原关闭监控
		isControl_V = false;
		isControl_H = false;
	}

	/***
	 * 回缩动画執行
	 */
	class MyAsyncTask extends AsyncTask<Void, Integer, Void> {
		private int screen_W, current_Width, current_Height;

		private int left, top, right, bottom;

		private float scale_WH;// 宽高的比例

		/** 当前的位置属性 **/
		public void setLTRB(int left, int top, int right, int bottom) {
			this.left = left;
			this.top = top;
			this.right = right;
			this.bottom = bottom;
		}

		private float STEP = 5f;// 步伐

		private float step_H, step_V;// 水平步伐,垂直步伐

		public MyAsyncTask(int screen_W, int current_Width, int current_Height) {
			super();
			this.screen_W = screen_W;
			this.current_Width = current_Width;
			this.current_Height = current_Height;
			scale_WH = (float) current_Height / current_Width;
			step_H = STEP;
			step_V = scale_WH * STEP;
		}

		@Override
		protected Void doInBackground(Void... params) {

			while (current_Width <= screen_W) {

				left -= step_H;
				top -= step_V;
				right += step_H;
				bottom += step_V;

				current_Width += 2 * step_H;

				left = Math.max(left, start_Left);
				top = Math.max(top, start_Top);
				right = Math.min(right, start_Right);
				bottom = Math.min(bottom, start_Bottom);
				// 有可能current_Width>screen_W时,bottom取得的值小于start_Bottom,step_V为浮点型转成int类型时会有些差异
				if (left == start_Left) {
					bottom = start_Bottom;
					top = start_Top;
				}

				onProgressUpdate(new Integer[] { left, top, right, bottom });
				try {
					Thread.sleep(10);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			}

			return null;
		}

		@Override
		protected void onProgressUpdate(final Integer... values) {
			super.onProgressUpdate(values);
			mActivity.runOnUiThread(new Runnable() {
				@Override
				public void run() {
					setFrame(values[0], values[1], values[2], values[3]);
				}
			});

		}

	}
}

 MyImageViewPager类

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;

public class MyImageViewPager extends ViewPager {

	public MyImageViewPager(Context context) {
		super(context);
	}

	public MyImageViewPager(Context context, AttributeSet attrs) {
		super(context, attrs);		
	}
	private ZoomImageView zoomImageView;
	private boolean isLeft = false;// 是否手指向左右滑动
	private boolean isRight = false;// 是否手指向右左滑动
	private boolean isPagerLeft = true;// 是否可以执行viewPager的左滑动
	private boolean isPagerRight = true;// 是否可以执行viewPager的右滑动
	private boolean isCanScroll = true;// 是否可以翻页

	public boolean isLeft() {
		return isLeft;
	}

	public ZoomImageView getZoomImageView() {
		return zoomImageView;
	}

	public void setZoomImageView(ZoomImageView zoomImageView) {
		this.zoomImageView = zoomImageView;
	}

	public void setLeft(boolean isLeft) {
		this.isLeft = isLeft;
	}

	public boolean isRight() {
		return isRight;
	}

	public void setRight(boolean isRight) {
		this.isRight = isRight;
	}

	public boolean isPagerLeft() {
		return isPagerLeft;
	}

	public void setPagerLeft(boolean isPagerLeft) {
		this.isPagerLeft = isPagerLeft;
	}

	public boolean isPagerRight() {
		return isPagerRight;
	}

	public void setPagerRight(boolean isPagerRight) {
		this.isPagerRight = isPagerRight;
	}

	public boolean isCanScroll() {
		return isCanScroll;
	}

	public void setCanScroll(boolean isCanScroll) {
		this.isCanScroll = isCanScroll;
	}
	
	// 不重写这个方法,会有诡异现象
	@Override
	public boolean onTouchEvent(MotionEvent ev) {

		if (isCanScroll == false) {
			return false;
		} else {
			return super.onTouchEvent(ev);
		}

	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		
		if(isLeft){
			if(isPagerRight){
				// 是否可以执行viewPager的右滑动
				isCanScroll = true;
			}else {
				isCanScroll = false;
			}
		}else if(isRight){
			if(isPagerLeft){
				// 是否可以执行viewPager的左滑动
				isCanScroll = true;
			}else {
				isCanScroll = false;
			}
		}
		if (isCanScroll == false) {
			return false;
		} else {
			return super.onInterceptTouchEvent(ev);
		}
	}
	
	/**
	 * 还原image
	 */
	public void initImage() {
		zoomImageView.initImage();
	}
}

 使用:Adapter:

WindowManager manager = activity.getWindowManager();
			window_width = manager.getDefaultDisplay().getWidth();
			window_height = manager.getDefaultDisplay().getHeight();
			holder.zoomImg.setmActivity(activity);
			holder.zoomImg.setViewPager(viewPager);
			//	state_height状态栏高度

			holder.zoomImg.setScreen_H(window_height - state_height);
			holder.zoomImg.setScreen_W(window_width);			
			loader.displayImage(mImageUrl[position], holder.zoomImg);

 Activity:

viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				viewPager.initImage();
				tvPage.setText(arg0+1+"/"+imageUrl.length);
				
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

 特别的:获取有效的状态栏高度

/** 
     * 获取状态栏高度 
     *  
     * @return 
     */  
    public int getStatusBarHeight()  
    {  
        Class<?> c = null;  
        Object obj = null;  
        java.lang.reflect.Field field = null;  
        int x = 0;  
        int statusBarHeight = 0;  
        try  
        {  
            c = Class.forName("com.android.internal.R$dimen");  
            obj = c.newInstance();  
            field = c.getField("status_bar_height");  
            x = Integer.parseInt(field.get(obj).toString());  
            statusBarHeight = getResources().getDimensionPixelSize(x);  
            return statusBarHeight;  
        }  
        catch (Exception e)  
        {  
            e.printStackTrace();  
        }  
        return statusBarHeight;  
    }  

 希望能有更好的建议!

分享到:
评论

相关推荐

    自定义View 之利用ViewPager 实现画廊效果(滑动放大缩小)

    在自定义画廊效果中,我们通常将ViewPager作为基础框架,通过修改其默认行为来实现特定效果。 为了实现滑动放大缩小的画廊效果,我们需要对ViewPager进行扩展。创建一个新的类,例如`CustomViewPager`,继承自`...

    photoView+viewpager图片双击+手势缩放+可左右滑动翻页

    这个项目"photoView+viewpager图片双击+手势缩放+可左右滑动翻页"就是一个很好的示例,它结合了两个核心组件:PhotoView和ViewPager,以创建一个功能丰富的图片查看器。下面我们将详细探讨这两个组件以及如何实现...

    Viewpager图片预览,支持图片缩放移动

    3. **ImageView**:通常,我们会使用`ImageView`来显示图片,并设置其`scaleType`属性为`Matrix`,这样可以允许我们自定义图片的缩放和平移行为。在`onTouchEvent()` 方法中,我们需要调用`ScaleGestureDetector` 和...

    Android照片墙加强版,使用ViewPager实现画廊效果Demo

    3. **图片适配器**:为了将图片与ViewPager结合,开发者需要创建一个适配器,该适配器通常会包含一个图片列表,并为每个图片创建一个ImageView,然后在ViewPager中显示。适配器还需要实现ViewPager的`getCount()`和`...

    自定义照片墙

    接下来,是自定义ImageView的部分。在标准的ImageView中,虽然可以使用`android:scaleType`属性来控制图片的缩放方式,但要实现手指拖动和双指捏合等交互操作,我们需要创建一个自定义的ImageView类。在这个类中,...

    仿网易新闻点击图片放大效果支持viewpager

    这种效果通常是通过实现图片查看器来达成的,图片查看器可以让用户点击小图后看到大图,并且支持手势缩放、平移等操作。在Android中,我们可以使用诸如PhotoView、Glide或Picasso等库来辅助实现这个功能。这些库提供...

    基于viewpager实现的画廊效果

    【基于ViewPager实现的画廊效果】是一种在Android应用中创建滑动浏览图片或内容的常见设计模式,通常用于实现类似相册或...同时,还可以根据需求进行扩展,如添加手势识别支持翻页、添加动画效果等,以增强用户体验。

    photoView与ViewPager

    `photoView` 是一个可以支持手势缩放、旋转等操作的图片查看器,而 `ViewPager` 则是用于创建滑动页面效果的控件,常用于实现轮播图或者类似应用内翻页的效果。现在我们来详细探讨这两个组件的使用方法以及它们如何...

    漂亮的画廊viewpager

    例如,`PageTransformer`中的`transformPage`方法可以接受当前可见页面和即将显示的页面的`View`对象,从而实现滑动翻页时的缩放、旋转等特效。 为了提升用户体验,这个`BtViewPager`可能还集成了手势检测,比如...

    图片缩放Demo

    【图片缩放Demo】是一个...综上所述,【图片缩放Demo】是一个集成了手势识别、自定义View、ViewPager滑动和图片加载优化等多个技术点的Android应用示例,对于学习和实践Android图形界面和用户交互有着重要的参考价值。

    左右翻,中间扩大,以及点击翻页

    这种效果可以通过动态调整ImageView的ScaleType或者使用自定义布局来实现。例如,我们可以监听滑动事件,当图片处于中心位置时,将其缩放比例增大,离开中心位置时恢复原状。这种方式能够增加用户的沉浸感,提升应用...

    安卓图片轮播广告轮播自动滚屏相关-基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView.rar

    我们可以使用ImageView或者自定义View来实现这些小圆点,根据ViewPager的当前页面改变指示器的状态。 4. **适配器(Adapter)**:ViewPager需要一个适配器来提供页面内容。在本项目中,开发者可能创建了一个自定义...

    轮播图SildeView

    自定义一个Transformer类,重写`transformPage(View page, float position)`方法,通过修改页面的透明度、缩放或其他属性来实现翻页动画。 最后,将自定义的Adapter和Transformer应用到ViewPager上,设置好数据源,...

    Android高级应用源码-图片浏览器+缓存+viewpager.zip

    此源码可能使用了自定义的ImageView来处理图片,可能包括手势缩放、平移等交互功能。此外,图片加载库,如Glide或Picasso,通常被用来加载网络图片并缓存到本地,以减少网络请求,提高性能。 2. 缓存机制: 缓存是...

    Android源码——滑动翻页源码_new_54.zip

    在实际开发中,滑动翻页还可以结合PageTransformer实现更复杂的过渡效果,例如淡入淡出、缩放等。PageTransformer接口提供了`transformPage()`方法,允许开发者自定义页面间的转换动画。 总的来说,这份"Android...

    android图片查看源码,打开本地图库选择图片,图片支持左右翻页

    在Android开发中,图片查看和管理是一个常见的需求。本文将基于标题"android图片...同时,对于图片查看,可能还需要添加缩放、平移、旋转等手势操作。以上就是基于给定标题和描述的Android图片查看和管理的核心知识点。

    Android 图片浏览功能简单实现(画廊效果实现,支持放大缩小)

    这个类可以检测用户的缩放手势,然后根据手势改变ImageView的缩放比例。同时,为了防止图片过度缩放导致超出边界,需要处理好ImageView的`scaleType`属性。 5. **动画效果**: 为了让用户体验更加流畅,可以添加...

    Android图片查看器

    在这个项目中,可能需要自定义ImageView以实现更复杂的功能,如平滑滚动和手势识别。 3. **ViewPager**: 实现翻页效果通常会用到ViewPager组件,它可以创建一个可以左右滑动的页面容器,非常适合于图片浏览的场景。...

    Android阅读器翻页

    此外,支持图片手势缩放和拖动也是必不可少的功能,这需要实现`GestureDetector`和`ScaleGestureDetector`。 当涉及到视频播放时,Android提供了`VideoView`或`ExoPlayer`组件。`VideoView`可以直接在布局中嵌入,...

    墨迹天气动画

    - 使用`ImageView`或`ViewPager`来展示不同的引导页。 - `ImageView`可以用于简单的静态图片展示,而`ViewPager`则支持滑动交互,更适合多页的动态引导。 - 通过`PagerAdapter`自定义视图的切换,实现滑动效果。 ...

Global site tag (gtag.js) - Google Analytics