View 拖动&插入

即： 支持 拖动图标 然后把之插入 2个View 之间

 

为了降低难度 选用了若干ImageView 放入ViewGroup : vertical LinearLayout

 

[代码 步骤]

 

1. 定义布局:main.xml ：

 

Xml代码

1. <? xml   version = "1.0"   encoding = "utf-8" ?>   
2.   
3.   
4. < LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"   
5.   
6.   
7.     android:orientation = "vertical"   
8.   
9.   
10.     android:layout_width = "fill_parent"   
11.   
12.   
13.     android:layout_height = "fill_parent"   
14.   
15.   
16.     android:id = "@+id/linear"   
17.   
18.   
19.     >   
20.   
21.   
22. < ImageButton   
23.   
24.   
25.     android:layout_width = "100dip"    
26.   
27.   
28.     android:layout_height = "100dip"    
29.   
30.   
31.     android:src = "@drawable/beijing1_b" />   
32.   
33.   
34. < ImageButton   
35.   
36.   
37.     android:layout_width = "100dip"    
38.   
39.   
40.     android:layout_height = "100dip"    
41.   
42.   
43.     android:src = "@drawable/beijing2_b" />   
44.   
45.   
46. < ImageButton   
47.   
48.   
49.     android:layout_width = "100dip"    
50.   
51.   
52.     android:layout_height = "100dip"    
53.   
54.   
55.     android:src = "@drawable/beijing3_b" />   
56.   
57.   
58. < ImageButton   
59.   
60.   
61.     android:layout_width = "100dip"    
62.   
63.   
64.     android:layout_height = "100dip"    
65.   
66.   
67.     android:src = "@drawable/beijing3_b" />   
68.   
69.   
70. </ LinearLayout >   

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


    android:orientation="vertical"


    android:layout_width="fill_parent"


    android:layout_height="fill_parent"


    android:id="@+id/linear"


    >


<ImageButton


    android:layout_width="100dip" 


    android:layout_height="100dip" 


    android:src="@drawable/beijing1_b"/>


<ImageButton


    android:layout_width="100dip" 


    android:layout_height="100dip" 


    android:src="@drawable/beijing2_b"/>


<ImageButton


    android:layout_width="100dip" 


    android:layout_height="100dip" 


    android:src="@drawable/beijing3_b"/>


<ImageButton


    android:layout_width="100dip" 


    android:layout_height="100dip" 


    android:src="@drawable/beijing3_b"/>


</LinearLayout>

 

 

2. 变量初始化

 

Java代码

1. lLayout = (LinearLayout)findViewById(R.id.linear);  

lLayout = (LinearLayout)findViewById(R.id.linear);

 

 

3. 定义OnTouchListener 用于监听所有动作  并注册LinearLayour的所有View 实现为：

 

Java代码

1. touchListener =  new  OnTouchListener(){  
2.             @Override   
3.             public   boolean  onTouch(View v, MotionEvent event) {  
4.                 // TODO Auto-generated method stub   
5.                 int  action = event.getAction();  
6.                   
7.                 int  x = ( int ) event.getRawX();  
8.                 int  y = ( int ) event.getRawY();  
9.                   
10.                 switch (action){  
11.                 //鼠标按下 拖拉动作开始   
12.                 case  MotionEvent.ACTION_DOWN:  
13.                     point1 = v.getTop();  
14.                       
15.                     startX = (int )event.getX();  
16.                     startY = y - v.getTop();  
17.                       
18.                     break ;  
19.                       
20.                 //鼠标移动 拖拉动作进行中   
21.                 case  MotionEvent.ACTION_MOVE:  
22.                     v.layout(x - startX, y - startY, x + v.getWidth()  
23.                             - startX, y - startY + v.getHeight());  
24.                     v.bringToFront();  
25.                     v.postInvalidate();  
26.                       
27.                     break ;  
28.                 //鼠标释放 拖拉动作结束   
29.                 case  MotionEvent.ACTION_UP:  
30.                     point2 = v.getTop();  
31.                       
32.                     //计算插入位置 位于哪两个相邻View之间   
33.                     int  dest = getLocation(v);  
34.                       
35.                     //remove ori view, and then add view here   
36.                     lLayout.removeView(v);  
37.                     lLayout.addView(v, dest);  
38.                     break ;  
39.                 }  
40.                 return   false ;  
41.             }  
42.               
43.         };  
44.           
45.         //to listener all ImageView   
46.         for ( int  i= 0 ;i<lLayout.getChildCount();i++){  
47.             ImageView iv = (ImageView)lLayout.getChildAt(i);  
48.               
49.             if (iv != null ){  
50.                 iv.setOnTouchListener(touchListener);  
51.             }  
52.             else  {  
53.             //error, view is null!   
54.             }  
55.         }  

touchListener = new OnTouchListener(){
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				int action = event.getAction();
				
				int x = (int) event.getRawX();
				int y = (int) event.getRawY();
				
				switch(action){
				//鼠标按下 拖拉动作开始
				case MotionEvent.ACTION_DOWN:
					point1 = v.getTop();
					
					startX = (int)event.getX();
					startY = y - v.getTop();
					
					break;
					
				//鼠标移动 拖拉动作进行中
				case MotionEvent.ACTION_MOVE:
					v.layout(x - startX, y - startY, x + v.getWidth()
							- startX, y - startY + v.getHeight());
					v.bringToFront();
					v.postInvalidate();
					
					break;
				//鼠标释放 拖拉动作结束
				case MotionEvent.ACTION_UP:
					point2 = v.getTop();
					
					//计算插入位置 位于哪两个相邻View之间
					int dest = getLocation(v);
					
					//remove ori view, and then add view here
					lLayout.removeView(v);
					lLayout.addView(v, dest);
					break;
				}
				return false;
			}
        	
        };
        
        //to listener all ImageView
        for(int i=0;i<lLayout.getChildCount();i++){
        	ImageView iv = (ImageView)lLayout.getChildAt(i);
        	
        	if(iv !=null){
        		iv.setOnTouchListener(touchListener);
        	}
        	else {
        	//error, view is null!
        	}
        }

 

 

 

 

4. getLocation(View) 用于： 根据目标View 判断待插入的位置 即：哪2个相邻ImageView 之间  实现为：

 

Java代码

1. public   int  getLocation(View v){  
2.         for ( int  i= 0 ;i<lLayout.getChildCount()- 1 ;i++){  
3.             ImageView iv = (ImageView)lLayout.getChildAt(i);  
4.             ImageView iv2 = (ImageView)lLayout.getChildAt(i+1 );  
5.               
6.             if (iv.getTop()< v.getTop() && iv2.getTop() > v.getTop()){  
7.                 //refer delta of point1 & point2   
8.                 if (point1 < point2){ //drag to bottom   
9.                     return  i+ 1 ;  
10.                 }  
11.                 else  { //drag to up   
12.                     return  i+ 1 ;  
13.                 }  
14.             }  
15.               
16.         }  
17.         //otherwise return last location   
18.         return  lLayout.getChildCount()- 1 ;  
19.     }  

public int getLocation(View v){
    	for(int i=0;i<lLayout.getChildCount()-1;i++){
    		ImageView iv = (ImageView)lLayout.getChildAt(i);
    		ImageView iv2 = (ImageView)lLayout.getChildAt(i+1);
    		
    		if(iv.getTop()< v.getTop() && iv2.getTop() > v.getTop()){
    			//refer delta of point1 & point2
    			if(point1 < point2){//drag to bottom
        			return i+1;
    			}
    			else {//drag to up
    				return i+1;
    			}
    		}
    		
    	}
    	//otherwise return last location
    	return lLayout.getChildCount()-1;
    }

 

 

 

5. emulator 运行截图：

 

- 拖拉前：

 

 

 

- 拖拉后：