آموزش کشیدن و رها کردن Drag and Drop در آندروید

آموزش کشیدن و رها کردن Drag and Drop در آندروید

این مبحث آموزشی به تشریح نحوه ی استفاده از قابلیت کشیدن و جای گذاری کردن (drag & drop) در اندروید می پردازد.

فهرست محتوا

1. قابلیت drag and drop در اندروید

• بکارگیری قابلیت drag & drop در اندروید
• ایجاد امکان کشیدن (drag) یک view
• تعریف view هایی برای پیاده سازی عملیات جای گذاری (drop)

2. تمرین

• هدف اصلی این تمرین
• ایجاد پروژه
• ایجاد XML Drawables
• activity و layout

قابلیت drag and drop در اندروید

قابلیت کشیدن و جای گذاری یک view روی view یا view group های دیگر برای اولین بار در ویرایش 4.0 اندروید رونمایی شد.
به منظور استفاده از این امکان یک OnTouchListener یا LongClickListener روی view ای که قرار است کشیده شود (عملیات drag روی آن پیاده شود)، ثبت کنید.
متد startDrag در حقیقت عملیات کشیدن (drag) را راه اندازی می کند. در این متد همچنین باید داده ای را که قرار است به محل مورد نظر جای گذاری ازطریق نمونه ی ClipData ارسال گردد مشخص کنید.
همچنین به متد startDrag یک نمونه از DragShadowBuilder را ارسال کنید. این شئ تصویری را که برای عملیات کشیدن مورد استفاده قرار می گیرد مشخص می کند.
راه اندازی عملیات کشیدن در یک touch listener با مثال زیر به تصویر کشیده شده.

// Assign the touch listener to your view which you want to move
findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());
// This defines your touch listener
private final class MyTouchListener implements OnTouchListener {
  public boolean onTouch(View view، MotionEvent motionEvent) {
    if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
      ClipData data = ClipData.newPlainText(""، "");
      DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
      view.startDrag(data، shadowBuilder، view، 0);
      view.setVisibility(View.INVISIBLE);
      return true;
    } else {
      return false;
    }
  }
} 

تعریف viewهایی برای پیاده سازی عملیات جای گذاری (drop)

View هایی که هدف جای گذاری view های دیگر قرار می گیرند، نمونه ای از OnDragListener به آن تخصیص داده می شود. در این گوش فراخوان عملیات جای گذاری (drop listener)، در صورت وجود رخدادهای از پیش تعریف شده ی مرتبط با drag & drop، برنامه نویس call backهایی را دریافت می کند.

DragEvent.ACTION_DRAG_STARTED
DragEvent.ACTION_DRAG_ENTERED
DragEvent.ACTION_DRAG_EXITED
DragEvent.ACTION_DROP
DragEvent.ACTION_DRAG_ENDED

setOnDragListener به view ای که قرار است به عنوان یک محل یا ناحیه ی جای گذاری مورد استفاده قرار گیرد، یک OnDragListener انتصاب می دهد.

findViewById(R.id.bottomright).setOnDragListener(new MyDragListener()); 
class MyDragListener implements OnDragListener {
    ‎  Drawable enterShape = getResources().getDrawable(R.drawable.shape_droptarget);
    ‎  Drawable normalShape = getResources().getDrawable(R.drawable.shape);
    ‎  @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:
                ‎        v.setBackgroundDrawable(enterShape);
                ‎        break;
            ‎      case DragEvent.ACTION_DRAG_EXITED:
                ‎        v.setBackgroundDrawable(normalShape);
                ‎        break;
            ‎      case DragEvent.ACTION_DROP:
                ‎        // Dropped‎،‎ reassign View to ViewGroup  
                ‎        View view = (View) event.getLocalState();
                ‎        ViewGroup owner = (ViewGroup) view.getParent();
                ‎        owner.removeView(view);
                ‎        LinearLayout container = (LinearLayout) v;
                ‎        container.addView(view);
                ‎        view.setVisibility(View.VISIBLE);
                ‎        break;
            ‎      case DragEvent.ACTION_DRAG_ENDED:
                ‎        v.setBackgroundDrawable(normalShape);
                ‎      default:
                ‎        break;
            ‎    }
        ‎    return true;
        ‎  }
    ‎} ‎

تمرین

هدف اصلی این تمرین

در این تمرین چندین view group ایجاد کنید. این کار به شما اجازه می دهد view ها را بین view group ها جا به جا کنید (بکشید).

ایجاد پروژه

پروژه ی جدیدی به نام com.tahlildadeh.android.draganddrop، با activity ای به نام DragActivity ایجاد کنید.

ایجاد XML Drawables

در تمرین پیش رو از XML drawables استفاده می کنیم.,br> برای این بخش لازم است چندین XML drawables در پوشه ی res/drawable ایجاد کنید.
فایل shape.xml زیر را در این پوشه خلق کنید.

‎
‎
    ‎
    ‎    ‎
    ‎    ‎
    ‎    ‎
‎

سپس فایل shape_droptarget.xml زیر را بوجود آورید.

‎
‎
    ‎
    ‎     ‎
    ‎     ‎
    ‎     ‎
‎
‎

activity و layout

طرح بندی activity خو را به زیر تغییر دهید.

‎
‎
‎
    ‎     
‎
        ‎         ‎
‎
    ‎
    ‎     
        ‎
        ‎         ‎
‎
    ‎
    ‎    
        ‎
        ‎         ‎
            ‎
    ‎     
        ‎
        ‎         ‎
‎
    ‎
‎

حال کلاس activity خود را به کد زیر اصلاح کنید.

package com.vogella.android.draganddrop;
import android.app.Activity;
import android.content.ClipData;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.DragShadowBuilder;
import android.view.View.OnDragListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
public class DragActivity extends Activity {
    ‎  /** Called when the activity is first created. */
            ‎  @Override
    ‎  public void onCreate(Bundle savedInstanceState) {
        ‎    super.onCreate(savedInstanceState);
        ‎    setContentView(R.layout.main);
        ‎    findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());
        ‎    findViewById(R.id.myimage2).setOnTouchListener(new MyTouchListener());
        ‎    findViewById(R.id.myimage3).setOnTouchListener(new MyTouchListener());
        ‎    findViewById(R.id.myimage4).setOnTouchListener(new MyTouchListener());
        ‎    findViewById(R.id.topleft).setOnDragListener(new MyDragListener());
        ‎    findViewById(R.id.topright).setOnDragListener(new MyDragListener());
        ‎    findViewById(R.id.bottomleft).setOnDragListener(new MyDragListener());
        ‎    findViewById(R.id.bottomright).setOnDragListener(new MyDragListener());
        ‎  }
    ‎  private final class MyTouchListener implements OnTouchListener {
        ‎    public boolean onTouch(View view،‎ MotionEvent motionEvent) {
            ‎      if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                ‎        ClipData data = ClipData.newPlainText(""‎،‎ "");
                ‎        DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
                ‎        view.startDrag(data،‎ shadowBuilder،‎ view،‎ 0);
                ‎        view.setVisibility(View.INVISIBLE);
                ‎        return true;
                ‎      } else {
                ‎        return false;
                ‎      }
            ‎    }
        ‎  }‎
    class MyDragListener implements OnDragListener {
        ‎  Drawable enterShape = getResources().getDrawable(R.drawable.shape_droptarget);
        ‎  Drawable normalShape = getResources().getDrawable(R.drawable.shape);
        ‎  @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:
                    ‎        v.setBackgroundDrawable(enterShape);
                    ‎        break;
                ‎      case DragEvent.ACTION_DRAG_EXITED:
                    ‎        v.setBackgroundDrawable(normalShape);
                    ‎        break;
                ‎      case DragEvent.ACTION_DROP:
                    ‎        // Dropped‎،‎ reassign View to ViewGroup  
                    ‎        View view = (View) event.getLocalState();
                    ‎        ViewGroup owner = (ViewGroup) view.getParent();
                    ‎        owner.removeView(view);
                    ‎        LinearLayout container = (LinearLayout) v;
                    ‎        container.addView(view);
                    ‎        view.setVisibility(View.VISIBLE);
                    ‎        break;
                ‎      case DragEvent.ACTION_DRAG_ENDED:
                    ‎        v.setBackgroundDrawable(normalShape);
                    ‎      default:
                    ‎        break;
                ‎    }
            ‎    return true;
            ‎  }
        ‎}
    ‎} 

پس از اجرای برنامه، باید طبق کد نویسی انجام شده بتوانید ImageViews را در محل دیگری (container) جای گذاری (بکشید) کنید.