android 自定义ImageView实现图片缩放边界回弹和缩小回弹
2015-06-04 12:19
986 查看
此代码只适合无title的界面,所以在AndroidManifest.xml文件中作如下修改:
话不多说上代码
<activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
话不多说上代码
XML布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/ll_viewArea"> </LinearLayout> </RelativeLayout>
自定义容器 package com.example.ichimatsuou.zoomimage; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.util.DisplayMetrics; import android.widget.FrameLayout; public class ViewArea extends FrameLayout { //前面说了ViewArea是一个布局, 所以这里当然要继承一个布局了。LinearLayout也可以 private int imgDisplayW; private int imgDisplayH; private int imgW; private int imgH; private ZoomImageView touchView; private DisplayMetrics dm; //resId为图片资源id public ViewArea(Context context,int resId) { //第二个参数是图片的资源ID,当然也可以用别的方式获取图片 /* dm = new DisplayMetrics(); ((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(dm); imgDisplayW = dm.widthPixels; imgDisplayH = dm.heightPixels;*///这种方式获取的屏幕大小和下面的方式结果是一样的,都是480x800(i9000分辨率) super(context); imgDisplayW = ((Activity)context).getWindowManager().getDefaultDisplay().getWidth();//这里的宽高要和xml中的LinearLayout大小一致,如果要指定大小。xml中 LinearLayout的宽高一定要用px像素单位,因为这里的宽高是像素,用dp会有误差! imgDisplayH = ((Activity)context).getWindowManager().getDefaultDisplay().getHeight(); touchView = new ZoomImageView(context,imgDisplayW,imgDisplayH);//这句就是我们的自定义ImageView touchView.setImageResource(resId);//给我们的自定义imageView设置要显示的图片 Bitmap img = BitmapFactory.decodeResource(context.getResources(), resId); imgW = img.getWidth(); imgH = img.getHeight(); //图片第一次加载进来,判断图片大小从而确定第一次图片的显示方式。 int layout_w = imgW>imgDisplayW?imgDisplayW:imgW; int layout_h = imgH>imgDisplayH?imgDisplayH:imgH; //下面的代码是判断图片初始显示样式的,当然可以根据你的想法随意显示,我这里是将宽大于高的图片按照宽缩小的比例把高压缩,前提必须是宽度超出了屏幕大小,相反,如果高大于宽,我将图片按照高缩小的比例把宽压缩,前提必须是高度超出了屏幕大小 if(imgW>=imgH) { if(layout_w==imgDisplayW){ layout_h = (int) (imgH*((float)imgDisplayW/imgW)); } }else { if(layout_h==imgDisplayH){ layout_w = (int) (imgW*((float)imgDisplayH/imgH)); } } //这里需要注意的是,采用FreamLayout或者LinearLayout的好处是,如果压缩后的图片扔有一个边大于屏幕,那么只显示在屏幕内的部分,可以通过移动后看见外部(不会裁剪掉图片),如果采用RelativeLayout布局,图片会始终完整显示在屏幕内部,不会有超出屏幕的现象。如果图片不是完全占满屏幕,那么在屏幕上没有图片的地方拖动,图片也会移动,这样的体验不太好,建议用FreamLayout或者LinearLayout。 touchView.setLayoutParams(new FrameLayout.LayoutParams(layout_w,layout_h));//这是自定义imageView的大小,也就是触摸范围 this.addView(touchView); } }
<pre name="code" class="java">/** * ACTION_DOWN is for the first finger that touches the screen. This starts the gesture. The pointer data for this finger is always at index 0 in the MotionEvent. * ACTION_POINTER_DOWN is for extra fingers that enter the screen beyond the first. The pointer data for this finger is at the index returned by getActionIndex(). * ACTION_POINTER_UP is sent when a finger leaves the screen but at least one finger is still touching it. The last data sample about the finger that went up is at the index returned by getActionIndex(). * ACTION_UP is sent when the last finger leaves the screen. The last data sample about the finger that went up is at index 0. This ends the gesture. * ACTION_CANCEL means the entire gesture was aborted for some reason. This ends the gesture. */
自定义ImageView package com.example.ichimatsuou.zoomimage; import android.content.Context; import android.util.FloatMath; import android.view.MotionEvent; import android.view.animation.TranslateAnimation; import android.widget.ImageView; public class ZoomImageView extends ImageView { static final int NONE = 0;//表示当前没有状态 static final int DRAG = 1; //表示当前处于移动状态 static final int ZOOM = 2; //表示当前处于缩放状态 static final int BIGGER = 3; //表示放大图片 static final int SMALLER = 4; //表示缩小图片 private int mode = NONE; //mode用于标示当前处于什么状态 private float beforeLenght; //第一次触摸两点的距离 private float afterLenght; //移动后两点的距离 private float scale = 0.04f; //缩放因子 private int screenW;//下面两句图片的移动范围,及ViewArea的范围,也就是linearLayout的范围,也就是屏幕方位(都是填满父控件属性) private int screenH; private int start_x;//开始触摸点 private int start_y; private int stop_x ;//结束触摸点 private int stop_y ; private TranslateAnimation trans; //回弹动画 public ZoomImageView(Context context,int w,int h)//这里传进来的w,h就是图片的移动范围 { super(context); this.setPadding(0, 0, 0, 0); screenW = w; screenH = h; } //用来计算2个触摸点的距离 private float spacing(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); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction() & MotionEvent.ACTION_MASK) {//MotionEvent.ACTION_MASK表示多点触控事件 case MotionEvent.ACTION_DOWN: mode = DRAG; stop_x = (int) event.getRawX();//表示相对于屏幕左上角为原点的坐标 stop_y = (int) event.getRawY();//同上 start_x = stop_x - this.getLeft();//用(int) event.getX();一样,表示相对于当前点击Widget(控件)左上角的坐标,这里就是相对于自定义imageView左上角的坐标.建议用前者,如果不是全屏拖动,而是指定范围内,一样适用! start_y = stop_y - this.getTop();////用(int) event.getY();一样,this.getTop()表示其顶部相对于父控件的距离 if(event.getPointerCount()==2) beforeLenght = spacing(event); break; case MotionEvent.ACTION_POINTER_DOWN: if (spacing(event) > 10f) { mode = ZOOM; beforeLenght = spacing(event); } break; case MotionEvent.ACTION_UP: int disX = 0; int disY = 0; if(getHeight()<= 4000 screenH )// { if(this.getTop()<0 ) { disY = getTop(); //layout(left , top, right,bottom)函数表示设置view的位置。 this.layout(this.getLeft(), 0, this.getRight(), 0 + this.getHeight()); } else if(this.getBottom()>=screenH) { disY = getHeight()- screenH+getTop(); this.layout(this.getLeft(), screenH-getHeight(), this.getRight(), screenH); } }else{ int Y1 = getTop(); int Y2 = getHeight()- screenH+getTop(); if(Y1>0) { disY= Y1; this.layout(this.getLeft(), 0, this.getRight(), 0 + this.getHeight()); }else if(Y2<0){ disY = Y2; this.layout(this.getLeft(), screenH-getHeight(), this.getRight(), screenH); } } if(getWidth()<=screenW) { if(this.getLeft()<0) { disX = getLeft(); this.layout(0, this.getTop(), 0+getWidth(), this.getBottom()); } else if(this.getRight()>screenW) { disX = getWidth()-screenW+getLeft(); this.layout(screenW-getWidth(), this.getTop(), screenW, this.getBottom()); } }else { int X1 = getLeft(); int X2 = getWidth()-screenW+getLeft(); if(X1>0) { disX = X1; this.layout(0, this.getTop(), 0+getWidth(), this.getBottom()); }else if(X2<0) { disX = X2; this.layout(screenW-getWidth(), this.getTop(), screenW, this.getBottom()); } } //如果图片缩放到宽小于屏幕的宽,那么自动放大. while(getWidth()<screenW) { setScale(scale,BIGGER); } //根据disX和disY的偏移量采用移动动画回弹归位,动画时间为500毫秒。 if(disX!=0 || disY!=0) { trans = new TranslateAnimation(disX, 0, disY, 0); trans.setDuration(500); this.startAnimation(trans); } mode = NONE; break; case MotionEvent.ACTION_POINTER_UP: mode = NONE; break; case MotionEvent.ACTION_MOVE: if (mode == DRAG) { //执行拖动事件的时,不断变换自定义imageView的位置从而达到拖动效果 this.setPosition(stop_x - start_x, stop_y - start_y, stop_x + this.getWidth() - start_x, stop_y - start_y + this.getHeight()); stop_x = (int) event.getRawX(); stop_y = (int) event.getRawY(); } else if (mode == ZOOM) { if(spacing(event)>10f) { afterLenght = spacing(event); float gapLenght = afterLenght - beforeLenght; if(gapLenght == 0) { break; } //图片宽度(也就是自定义imageView)必须大于70才可以缩放 else if(Math.abs(gapLenght)>5f&&getWidth()>70) { if(gapLenght>0) { this.setScale(scale,BIGGER); }else { this.setScale(scale,SMALLER); } beforeLenght = afterLenght; //这句不能少。 } } } break; } return true; } private void setScale(float temp,int flag) { if(flag==BIGGER) { //setFrame(left , top, right,bottom)函数表示改变当前view的框架,也就是大小。 this.setFrame(this.getLeft()-(int)(temp*this.getWidth()), this.getTop()-(int)(temp*this.getHeight()), this.getRight()+(int)(temp*this.getWidth()), this.getBottom()+(int)(temp*this.getHeight())); }else if(flag==SMALLER){ this.setFrame(this.getLeft()+(int)(temp*this.getWidth()), this.getTop()+(int)(temp*this.getHeight()), this.getRight()-(int)(temp*this.getWidth()), this.getBottom()-(int)(temp*this.getHeight())); } } private void setPosition(int left,int top,int right,int bottom) { this.layout(left,top,right,bottom); } }
package com.example.ichimatsuou.zoomimage; import android.app.Activity; import android.os.Bundle; import android.widget.LinearLayout; public class MainActivity extends Activity { private LinearLayout ll_viewArea; private LinearLayout.LayoutParams parm; private ViewArea viewArea; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ll_viewArea = (LinearLayout) findViewById(R.id.ll_viewArea); parm = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); viewArea = new ViewArea(MainActivity.this,R.drawable.thumb1); //自定义布局控件,用来初始化并存放自定义imageView ll_viewArea.addView(viewArea,parm); } }
相关文章推荐
- Android 读取手机某个文件夹目录及子文件夹中所有的txt文件
- Android ListView 分类显示(一)单布局显示
- Android Studio学习笔记
- Android handler的警告Handler Class Should be Static or Leaks Occur
- AndroidManifest.xml——文件详解(三)
- 扫描二维码自动识别手机系统(Android/IOS)
- Android再按一次后退键退出应用程序
- Android 广告轮播效果(伪无限循环)
- Android应用测试总结
- Android插屏动画效果
- CSDN博文精选:Android系列开发博客资源汇总
- Android Studio(AS)-->drawable与mipmap (官网解释)
- Android的ViewFlipper-android学习之旅(三十五)
- Android的ViewFlipper-android学习之旅(三十五)
- Android的ViewFlipper-android学习之旅(三十五)
- Android 随机变化图片
- Android底层开发(二)之JNI层 第三步
- 亲测可用的更新Android SDK Manager方法
- Android签名
- 带你走进Android Afinal框架的世界