Android技术——高级UI：视图拖拽（上）

一、如何定义拖拽

        自Android 4.0 以后支持View的拖拽。定义一个拖拽关键是定义两个要素：为需拖拽视图添加OnTouchListener监听；指定新父级视图（并为新父级视图添加OnDragListener）。

二、具体实现

        1、为需拖拽视图添加OnTouchListener监听

              OnTouch事件表示触摸事件，代码如下：

              res\layout\activity_main.xml文件

              <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="fill_parent"
                  android:layout_height="fill_parent"
                  android:columnCount="1"
                  android:rowCount="2" >


                  <LinearLayout
                      android:id="@+id/lil_top"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_column="0"
                      android:layout_row="0" >


                      <ImageView
                          android:id="@+id/img_touch"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:layout_gravity="left|top"
                          android:src="@drawable/ic_launcher" />
                  </LinearLayout>


                  <LinearLayout
                      android:id="@+id/lil_button"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
                      android:layout_column="0"
                      android:layout_row="1" >


                      <TextView
                          android:id="@+id/txt_imgPosition"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:layout_gravity="left|top"
                          android:text="图片坐标：" />
                  </LinearLayout>


              </GridLayout>

              MainActivity.java文件

              package com.example.touchtest;


              import android.app.Activity;
              import android.os.Bundle;
              import android.view.MotionEvent;
              import android.view.View;
              import android.view.View.OnTouchListener;
              import android.widget.ImageView;
              import android.widget.TextView;


              public class MainActivity extends Activity
              {
                  private TextView txt_imgPosition;


                  @Override
                  protected void onCreate(Bundle savedInstanceState)
                 {
                      super.onCreate(savedInstanceState);
                      setContentView(R.layout.activity_main);
                      txt_imgPosition = (TextView) findViewById(R.id.txt_imgPosition);
                      ImageView img_touch = (ImageView) findViewById(R.id.img_touch);
                      img_touch.setOnTouchListener(new ImgOnTouchListener());
                  }


                  private class ImgOnTouchListener implements OnTouchListener
                  {
                      @Override
                      public boolean onTouch(View v, MotionEvent event)
                      {
                          // event.getX获取X坐标；event.getY()获取Y坐标
                          String sInfo = "X=" + String.valueOf(event.getX()) + "  Y=" + String.valueOf(event.getY());
                          txt_imgPosition.setText(sInfo);
                          return true;
                      }
                  }
              }

              这样的一段代码实现的是效果是：拖动图片，下面的坐标会有变化，但是图片还是在原来的位置不会动。

        2、startDrag使图片动起来

              在MainActivity.java文件中加入如下代码

              package com.example.touchtest;


              import android.app.Activity;
              import android.content.ClipData;
              import android.os.Bundle;
              import android.view.MotionEvent;
              import android.view.View;
              import android.view.View.DragShadowBuilder;
              import android.view.View.OnTouchListener;
              import android.widget.ImageView;
              import android.widget.TextView;


              public class MainActivity extends Activity
              {
                  private TextView txt_imgPosition;
              

                  @Override
                  protected void onCreate(Bundle savedInstanceState)
                  {
                      super.onCreate(savedInstanceState);
                      setContentView(R.layout.activity_main);
                      txt_imgPosition = (TextView) findViewById(R.id.txt_imgPosition);
                      ImageView img_touch = (ImageView) findViewById(R.id.img_touch);
                      img_touch.setOnTouchListener(new ImgOnTouchListener());
                  }


                  private class ImgOnTouchListener implements OnTouchListener
                  {
                      @Override
                      public boolean onTouch(View v, MotionEvent event)
                      {
                          // event.getX获取X坐标；event.getY()获取Y坐标
                          String sInfo = "X=" + String.valueOf(event.getX()) + "  Y=" + String.valueOf(event.getY());
                          txt_imgPosition.setText(sInfo);
                          // 提供位置数据“粘贴板”
                          ClipData data = ClipData.newPlainText("", "");
                          // 重绘视图
                          DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v);
                          // 开始延拖拽路径绘制视图副本这是个异步方法，启动异步线程后将很快返回
                          v.startDrag(data, shadowBuilder, v, 0);
                          // 使原视图不可见
                          v.setVisibility(View.INVISIBLE);
                          return true;
                      }
                  }
              }

              这样的代码实现的效果是：拖动图片时，图片跟随手指移动，原位置上的图片消失。松开屏幕后图片消失。（如果没有最后那句v.setVisibility(View.INVISIBLE);拖动的时候原位置上的图片一直都在）

        3、拖拽至指定的区域，2中手指松开后图片消失是因为没有指定接收拖拽完成后的图片的父级视图

        package com.example.touchtest;


        import android.app.Activity;
        import android.content.ClipData;
        import android.os.Bundle;
        import android.view.DragEvent;
        import android.view.MotionEvent;
        import android.view.View;
        import android.view.ViewGroup;
        import android.view.View.DragShadowBuilder;
        import android.view.View.OnDragListener;
        import android.view.View.OnTouchListener;
        import android.widget.ImageView;
        import android.widget.LinearLayout;
        import android.widget.TextView;


        public class MainActivity extends Activity
        {
            private TextView txt_imgPosition;


            @Override
            protected void onCreate(Bundle savedInstanceState)
            {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                txt_imgPosition = (TextView) findViewById(R.id.txt_imgPosition);
                ImageView img_touch = (ImageView) findViewById(R.id.img_touch);
                img_touch.setOnTouchListener(new ImgOnTouchListener());
                findViewById(R.id.lil_button).setOnDragListener(new MyDragListener());
            }


            private class ImgOnTouchListener implements OnTouchListener
            {
                @Override
                public boolean onTouch(View v, MotionEvent event)
                {
                    // event.getX获取X坐标；event.getY()获取Y坐标
                    String sInfo = "X=" + String.valueOf(event.getX()) + "  Y=" + String.valueOf(event.getY());
                    txt_imgPosition.setText(sInfo);
                    // 提供位置数据“粘贴板”
                    ClipData data = ClipData.newPlainText("", "");
                    // 重绘视图
                    DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v);
                    // 开始延拖拽路径绘制视图副本这是个异步方法，启动异步线程后将很快返回
                    v.startDrag(data, shadowBuilder, v, 0);
                    // 使原视图不可见
                    v.setVisibility(View.INVISIBLE);
                    return true;
                }
            }


            class MyDragListener implements OnDragListener
            {
                @Override
                public boolean onDrag(View v, DragEvent event)
                {
                    int action = event.getAction();
                    switch (event.getAction())
                    {
                        case DragEvent.ACTION_DRAG_STARTED:
                            // Do nothing
                            break;
                        case DragEvent.ACTION_DRAG_ENTERED:
                            // Do nothing
                            break;
                        case DragEvent.ACTION_DRAG_EXITED:
                            // Do nothing
                            break;
                        case DragEvent.ACTION_DROP:
                            // view实际上就是img_touch
                            View view = (View) event.getLocalState();
                            // owner实际上就是lil_top
                            ViewGroup owner = (ViewGroup) view.getParent();
                            owner.removeView(view);
                            // v实际上就是lil_button
                            LinearLayout container = (LinearLayout) v;
                            container.addView(view);
                            view.setVisibility(View.VISIBLE);
                            break;
                        case DragEvent.ACTION_DRAG_ENDED:
                            // Do nothing
                        default:
                            break;
                    }
                    return true;
                }
            }
        }