android imageview 多点触碰(MultiTouch)实现图片拖拽移动缩放

刚用android手机 发现手机自带的图片浏览器挺酷 可以用手指移动 缩放 还有动画效果

       Intent intent = new Intent(Intent.ACTION_VIEW);     
       intent.setDataAndType(Uri.fromFile(recentFile), "image/*");     
       startActivity(intent);

就可以调用系统的图片浏览器查看手机上的图片了

于是想仿照着写一个

到网上看了不少资料 大概分为两种实现方式

 http://download.csdn.net/source/3318880  ->源码

一种是利用Matrix的postTranslate和postScale方法分别进行移动和缩放

这种方式实质是对ImageView中的drawable进行缩放和移动

imageview组件本身并没有移动和缩放 这种方法实现起来比较简单 但是不知道如何获得经过移动后的drawable的坐标和大小 比较郁闷 因为调用imageview的各种方法拿到的都是其本身的大小和坐标

 

而另一种是直接对imageview进行操作,直接移动和改变组件本身的大小从而实现移动和缩放

 

核心类 继承->ImageView 并加入了一些动画效果

[java]view plaincopyprint?

1. import android.content.Context;  
2. import android.util.FloatMath;  
3. import android.view.MotionEvent;  
4. import android.view.animation.TranslateAnimation;  
5. import android.widget.ImageView;  
6. /** 
7.  * 继承ImageView 实现了多点触碰的拖动和缩放 
8.  * @author Administrator 
9.  * 
10.  */  
11. public class TouchView extends ImageView  
12. {  
13.     static final int NONE = 0;  
14.     static final int DRAG = 1;     //拖动中  
15.     static final int ZOOM = 2;     //缩放中  
16.     static final int BIGGER = 3;   //放大ing  
17.     static final int SMALLER = 4;  //缩小ing  
18.     private int mode = NONE;       //当前的事件   
19.   
20.     private float beforeLenght;   //两触点距离  
21.     private float afterLenght;    //两触点距离  
22.     private float scale = 0.04f;  //缩放的比例 X Y方向都是这个值 越大缩放的越快  
23.      
24.     private int screenW;  
25.     private int screenH;  
26.       
27.     /*处理拖动 变量 */  
28.     private int start_x;  
29.     private int start_y;  
30.     private int stop_x ;  
31.     private int stop_y ;  
32.       
33.     private TranslateAnimation trans; //处理超出边界的动画  
34.       
35.     public TouchView(Context context,int w,int h)  
36.     {  
37.         super(context);  
38.         this.setPadding(0, 0, 0, 0);  
39.         screenW = w;  
40.         screenH = h;  
41.     }  
42.       
43.     /** 
44.      * 就算两点间的距离 
45.      */  
46.     private float spacing(MotionEvent event) {  
47.         float x = event.getX(0) - event.getX(1);  
48.         float y = event.getY(0) - event.getY(1);  
49.         return FloatMath.sqrt(x * x + y * y);  
50.     }  
51.       
52.     /** 
53.      * 处理触碰.. 
54.      */  
55.     @Override  
56.     public boolean onTouchEvent(MotionEvent event)  
57.     {     
58.         switch (event.getAction() & MotionEvent.ACTION_MASK) {  
59.         case MotionEvent.ACTION_DOWN:  
60.                 mode = DRAG;  
61.                 stop_x = (int) event.getRawX();  
62.                 stop_y = (int) event.getRawY();  
63.                 start_x = (int) event.getX();  
64.                 start_y = stop_y - this.getTop();  
65.                 if(event.getPointerCount()==2)  
66.                     beforeLenght = spacing(event);  
67.                 break;  
68.         case MotionEvent.ACTION_POINTER_DOWN:  
69.                 if (spacing(event) > 10f) {  
70.                         mode = ZOOM;  
71.                         beforeLenght = spacing(event);  
72.                 }  
73.                 break;  
74.         case MotionEvent.ACTION_UP:  
75.             /*判断是否超出范围     并处理*/  
76.                 int disX = 0;  
77.                 int disY = 0;  
78.                 if(getHeight()<=screenH || this.getTop()<0)  
79.                 {  
80.                     if(this.getTop()<0 )  
81.                     {  
82.                         int dis = getTop();  
83.                         this.layout(this.getLeft(), 0, this.getRight(), 0 + this.getHeight());  
84.                         disY = dis - getTop();  
85.                     }  
86.                     else if(this.getBottom()>screenH)  
87.                     {  
88.                         disY = getHeight()- screenH+getTop();  
89.                         this.layout(this.getLeft(), screenH-getHeight(), this.getRight(), screenH);  
90.                     }  
91.                 }  
92.                 if(getWidth()<=screenW)  
93.                 {  
94.                     if(this.getLeft()<0)  
95.                     {  
96.                         disX = getLeft();  
97.                         this.layout(0, this.getTop(), 0+getWidth(), this.getBottom());  
98.                     }  
99.                     else if(this.getRight()>screenW)  
100.                     {  
101.                         disX = getWidth()-screenW+getLeft();  
102.                         this.layout(screenW-getWidth(), this.getTop(), screenW, this.getBottom());  
103.                     }  
104.                 }  
105.                 if(disX!=0 || disY!=0)  
106.                 {  
107.                     trans = new TranslateAnimation(disX, 0, disY, 0);  
108.                     trans.setDuration(500);  
109.                     this.startAnimation(trans);  
110.                 }  
111.                 mode = NONE;  
112.                 break;  
113.         case MotionEvent.ACTION_POINTER_UP:  
114.                 mode = NONE;  
115.                 break;  
116.         case MotionEvent.ACTION_MOVE:  
117.                 /*处理拖动*/  
118.                 if (mode == DRAG) {  
119.                     if(Math.abs(stop_x-start_x-getLeft())<88 && Math.abs(stop_y - start_y-getTop())<85)  
120.                     {  
121.                         this.setPosition(stop_x - start_x, stop_y - start_y, stop_x + this.getWidth() - start_x, stop_y - start_y + this.getHeight());                
122.                         stop_x = (int) event.getRawX();  
123.                         stop_y = (int) event.getRawY();  
124.                     }  
125.                 }   
126.                 /*处理缩放*/  
127.                 else if (mode == ZOOM) {  
128.                     if(spacing(event)>10f)  
129.                     {  
130.                         afterLenght = spacing(event);  
131.                         float gapLenght = afterLenght - beforeLenght;                       
132.                         if(gapLenght == 0) {    
133.                            break;  
134.                         }  
135.                         else if(Math.abs(gapLenght)>5f)  
136.                         {  
137.                             if(gapLenght>0) {   
138.                                 this.setScale(scale,BIGGER);     
139.                             }else {    
140.                                 this.setScale(scale,SMALLER);     
141.                             }                               
142.                             beforeLenght = afterLenght;   
143.                         }  
144.                     }  
145.                 }  
146.                 break;  
147.         }  
148.         return true;      
149.     }  
150.       
151.     /** 
152.      * 实现处理缩放 
153.      */  
154.     private void setScale(float temp,int flag) {     
155.           
156.         if(flag==BIGGER) {     
157.             this.setFrame(this.getLeft()-(int)(temp*this.getWidth()),      
158.                           this.getTop()-(int)(temp*this.getHeight()),      
159.                           this.getRight()+(int)(temp*this.getWidth()),      
160.                           this.getBottom()+(int)(temp*this.getHeight()));        
161.         }else if(flag==SMALLER){     
162.             this.setFrame(this.getLeft()+(int)(temp*this.getWidth()),      
163.                           this.getTop()+(int)(temp*this.getHeight()),      
164.                           this.getRight()-(int)(temp*this.getWidth()),      
165.                           this.getBottom()-(int)(temp*this.getHeight()));     
166.         }     
167.     }  
168.       
169.     /** 
170.      * 实现处理拖动 
171.      */  
172.     private void setPosition(int left,int top,int right,int bottom) {    
173.         this.layout(left,top,right,bottom);               
174.     }  
175.   
176. }  

 

装载类 一个layout

[java] view plain copy print ?

1. import android.app.Activity;  
2. import android.content.Context;  
3. import android.graphics.Bitmap;  
4. import android.graphics.BitmapFactory;  
5. import android.view.View;  
6. import android.widget.AbsoluteLayout;  
7. import android.widget.ImageView.ScaleType;  
8.   
9. /** 
10.  * 一个绝对布局  
11.  * @author Administrator 
12.  * 
13.  */  
14. @SuppressWarnings("deprecation")  
15. public class ViewScroll extends AbsoluteLayout  
16. {  
17.     private int screenW;    //可用的屏幕宽  
18.     private int screenH;    //可用的屏幕高   总高度-上面组件的总高度  
19.     private int imgW;       //图片原始宽  
20.     private int imgH;       //图片原始高  
21.     private TouchView tv;  
22.   
23.     public ViewScroll(Context context,int resId,View topView)  
24.     {  
25.         super(context);  
26.         screenW = ((Activity)context).getWindowManager().getDefaultDisplay().getWidth();  
27.         screenH = ((Activity)context).getWindowManager().getDefaultDisplay().getHeight()-(topView==null?190:topView.getBottom()+50);  
28.         tv = new TouchView(context,screenW,screenH);  
29.         tv.setImageResource(resId);  
30.         Bitmap img = BitmapFactory.decodeResource(context.getResources(), resId);  
31.         imgW = img.getWidth();  
32.         imgH = img.getHeight();  
33.         int layout_w = imgW>screenW?screenW:imgW; //实际显示的宽  
34.         int layout_h = imgH>screenH?screenH:imgH; //实际显示的高  
35.         if(layout_w==screenW||layout_h==screenH)  
36.             tv.setScaleType(ScaleType.FIT_XY);  
37.         tv.setLayoutParams(new AbsoluteLayout.LayoutParams(layout_w,layout_h , layout_w==screenW?0:(screenW-layout_w)/2, layout_h==screenH?0:(screenH-layout_h)/2));  
38.         this.addView(tv);  
39.     }  
40. }  

---

Activit

[java]view plaincopyprint?

1. import android.app.Activity;  
2. import android.os.Bundle;  
3. import android.view.View;  
4. import android.widget.AdapterView;  
5. import android.widget.Gallery;  
6. import android.widget.LinearLayout;  
7. import android.widget.AdapterView.OnItemClickListener;  
8. /** 
9.  * activity 
10.  * @author Administrator 
11.  * 
12.  */  
13. public class GalleryMain extends Activity implements OnItemClickListener  
14. {  
15.     private ViewScroll detail;  
16.     private ImageAdapter ia;  
17.     private LinearLayout ll;  
18.     private LinearLayout.LayoutParams parm;  
19.     private Gallery g;    
20.     @Override  
21.     protected void onCreate(Bundle savedInstanceState)  
22.     {  
23.         super.onCreate(savedInstanceState);  
24.         setContentView(R.layout.main);  
25.           
26.         g = (Gallery) findViewById(R.id.myggg);  
27.         ll = (LinearLayout) findViewById(R.id.twill);  
28.         parm = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);  
29.         ia = new ImageAdapter(this);  
30.         detail = new ViewScroll(GalleryMain.this, ia.imgIds[0],g);    
31.         ll.addView(detail,parm);  
32.         g.setAdapter(ia);  
33.         g.setOnItemClickListener(this);  
34.     }  
35.       
36.     @Override  
37.     public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)  
38.     {  
39.         ll.removeView(detail);  
40.         detail = new ViewScroll(GalleryMain.this, ia.imgIds[arg2],g);     
41.         ll.addView(detail,parm);  
42.     }  
43. }  

 

配合gallery的适配器类

[java]view plaincopyprint?

1. import android.content.Context;  
2. import android.view.View;  
3. import android.view.ViewGroup;  
4. import android.widget.BaseAdapter;  
5. import android.widget.Gallery;  
6. import android.widget.ImageView;  
7. import android.widget.ImageView.ScaleType;  
8. /** 
9.  * Gallery的适配器类 
10.  * @author Administrator 
11.  * 
12.  */  
13. public class ImageAdapter extends BaseAdapter  
14. {  
15.     /*图片素材*/  
16.     public int[] imgIds = {R.drawable.jpg,R.drawable.pic};  
17.       
18.     private Context context;  
19.       
20.     public ImageAdapter(Context context)  
21.     {  
22.         this.context = context;       
23.     }  
24.       
25.     @Override  
26.     public int getCount()  
27.     {  
28.         return imgIds.length;  
29.     }  
30.   
31.     @Override  
32.     public Object getItem(int position)  
33.     {  
34.         return null;  
35.     }  
36.   
37.     @Override  
38.     public long getItemId(int position)  
39.     {  
40.         return 0;  
41.     }  
42.   
43.     @Override  
44.     public View getView(int position, View convertView, ViewGroup parent)  
45.     {  
46.         ImageView img = new ImageViewImp(context);  
47.         img.setImageResource(imgIds[position]);  
48.         img.setScaleType(ScaleType.CENTER);  
49.         img.setLayoutParams(new Gallery.LayoutParams(155,150));  
50.         return img;  
51.     }  
52.   
53. }  

 

gallery中image的实现类

[java]view plaincopyprint?

1. import android.content.Context;  
2. import android.graphics.Bitmap;  
3. import android.graphics.BitmapFactory;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Matrix;  
7. import android.graphics.Paint;  
8. import android.graphics.drawable.BitmapDrawable;  
9. import android.view.MotionEvent;  
10. import android.widget.ImageView;  
11. /** 
12.  * ImageAdapter中ImageView的实现类 
13.  * @author Administrator 
14.  * 
15.  */  
16. public class ImageViewImp extends ImageView  
17. {  
18.     private int alpha = 250;  
19.     private boolean pressed = false;  
20.     public ImageViewImp(Context context)  
21.     {  
22.         super(context);  
23.     }  
24.     Matrix m;  
25.     public void show()  
26.     {  
27.         new Thread(){  
28.             public void run() {  
29.                 int time = 2000;  
30.                 try  
31.                 {  
32.                     pressed = true;  
33.                     while(time>0)  
34.                     {  
35.                         Thread.sleep(200);  
36.                         time -= 200;  
37.                         alpha-= 25;  
38.                           
39.                         postInvalidate();  
40.                     }  
41.                     pressed = false;  
42.                 }  
43.                 catch (Exception e)  
44.                 {  
45.                     e.printStackTrace();  
46.                 }  
47.             };  
48.         }.start();  
49.     }  
50.       
51.     @Override  
52.     public boolean onTouchEvent(MotionEvent event)  
53.     {  
54.           
55.         if(event.getAction() == MotionEvent.ACTION_DOWN)  
56.             show();  
57.   
58.         return false;  
59.     }  
60.       
61.       
62.     @Override  
63.     protected void onDraw(Canvas canvas)  
64.     {  
65.         Paint p = new Paint();  
66.         p.setColor(Color.WHITE);  
67.         p.setStyle(Paint.Style.STROKE);  
68.         p.setStrokeWidth(10);  
69.         BitmapDrawable bd = (BitmapDrawable) getDrawable();  
70.   
71.         if(bd!=null)  
72.         {  
73.             canvas.drawBitmap(imageScale(bd.getBitmap(), 107, 113), 21,18, p);    
74.         }  
75.         canvas.drawBitmap(BitmapFactory.decodeResource(getContext().getResources(), R.drawable.kua), 0, 0, p);  
76.         if(isPressed())  
77.         {  
78.             canvas.drawRect(5,5,140,140,p);  
79.         }  
80.         if(pressed)  
81.         {  
82.             p.setAlpha(alpha);  
83.             canvas.drawRect(5,5,140,140,p);  
84.         }  
85.     }  
86.       
87.     public static Bitmap imageScale(Bitmap bitmap, int dst_w, int dst_h){    
88.           int  src_w = bitmap.getWidth();  
89.           int  src_h = bitmap.getHeight();  
90.           float scale_w = ((float)dst_w)/src_w;  
91.           float  scale_h = ((float)dst_h)/src_h;  
92.           Matrix  matrix = new Matrix();  
93.           matrix.postScale(scale_w, scale_h);  
94.           Bitmap dstbmp = Bitmap.createBitmap(bitmap, 0, 0, src_w, src_h, matrix, true);        
95.           return dstbmp;  
96.     }  
97.   
98. }  

---

 

 

各种xml ->布局-> style -> color

[xhtml]view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--main.xml  在layout下-->  
3. <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"   
4.    android:orientation="vertical"  
5.     android:layout_height="fill_parent"  
6.     android:layout_width="fill_parent" android:gravity="top" android:id="@+id/twill"  
7.     android:background="@android:color/transparent">  
8. <Gallery   
9.   android:id="@+id/myggg"  
10.   android:layout_width="fill_parent"  
11.   android:layout_height="wrap_content"  
12. />  
13.   
14. </LinearLayout>  

[java]view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--style.xml  在values下-->  
3. <resources >  
4.     <style name="testStyle">  
5.         <item name="android:textColor" >#EC9237</item>  
6.     </style>  
7.     <style name="transparent">        
8.       <item name="android:windowBackground">@drawable/translucent_background</item>  
9.       <item name="android:windowIsTranslucent">true</item>  
10.     </style>  
11. </resources>  

[xhtml]view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--color.xml  在values下-->  
3. <resources>  
4.     <drawable name="c1">#FFFFFFFF</drawable>  
5.     <drawable name="c2">#00FFFF</drawable>  
6.     <drawable name="translucent_background">#7F000000</drawable>  
7.       
8. </resources>  

---