View 拖动&插入 研究

 

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 运行截图：

 

- 拖拉前：

 

 

 

- 拖拉后：