控件功能 :
随手指实现自由的缩放
效果图:
首先我们将依据图片的宽高与控件的宽高的关系将图片设置到控件中进行显示操作(具体操作说明 请参考点击打开链接)
将图片进行缩放设置显示到控件中去
点击链接查看
设置实现依据手指进行图片的缩放功能
1.首先让我们的自定义控件实现 ScaleGestureDetector.OnScaleGestureListener接口和OnTouchListener接口,并实现其中的相关方法
public class ScaleImageView extends ImageView implements ViewTreeObserver.OnGlobalLayoutListener,ScaleGestureDetector.OnScaleGestureListener,OnTouchListener {... ...@Overridepublic boolean onScale(ScaleGestureDetector detector) {return true;}@Overridepublic boolean onScaleBegin(ScaleGestureDetector detector) {return true;}@Overridepublic void onScaleEnd(ScaleGestureDetector detector) {}@Overridepublic boolean onTouch(View v, MotionEvent event) {return true;}
在其中的onScale 方法 onScaleBegin方法中处理触摸事件
2.初始化多点触控使用到的对象
声明并在构造方法中进行初始化操作
private ScaleGestureDetector mGestureDetector;mGestureDetector = new ScaleGestureDetector(context, this);//其中第一个参数是上下文对象,第二个参数就是OnScaleGestureListener监听对象,由于我们实现了这个接口,所以可以直接设置this
3.将事件机制传递给ScaleGestureDetector对象进行处理
@Overridepublic boolean onTouch(View v, MotionEvent event) {mGestureDetector.onTouchEvent(event);return true;}
4.接下来就 可以在OnScaleGestureListener接口中的相关方法中进行随手势的缩放而进行图片的缩放了
@Overridepublic boolean onScale(ScaleGestureDetector detector) {//获取将要时行缩放的值final float scaleFactor = detector.getScaleFactor();//判断当前图片是否存在if (getDrawable() == null) {return true;}//设置图片的缩放//其中前两个参数分别是宽度与高度的缩放值//第三个参数是缩放中心的X轴坐标,通过detector.getFocusX(),可以获得触控点X轴的坐标//第四个参数是缩放中心的Y轴坐标,通过detector.getFocusY(),可以获得触控点Y轴的坐标mScaleMatrix.postScale(scaleFactor, scaleFactor, detector.getFocusX(), detector.getFocusY());setImageMatrix(mScaleMatrix);return true;}
当然我们可以在这里进行一些缩放比例的控制判断
那么就 要首先获取到当前的图片的缩放的值,然后获取将要进行缩放的值,进行一定的比较判断就可以控制了大小的缩放
获取图片当前的缩放值
public float getInitScale() {final float[] floats = new float[9];mScaleMatrix.getValues(floats);//获取当前的缩放值return floats[Matrix.MSCALE_X];}
走到这里,我们的图片就可以实现随着手指的缩放而进行缩放
在缩放的过程中。可能会出现图片与控件的边界留下空白的bug,那么也就 是在进行图片缩放的过程中,要时刻进行边界的控制才行 ,关于缩放逻辑的处理,请查看此处的分析查看关于缩放过程中的边界控制分析