قابلیت drag & drop ( کشیدن و جایگذاری ) یک view بر روی view یا view group های دیگر از ویرایش ۴٫۰ اندروید پشتیبانی می شود.
به منظور پیاده سازی قابلیت drag شما می بایست ، OnTouchListener یا LongClickListener را بر روی view ای که قرار است کشیده یا drag شود، تنظیم نمایید. به عبارت دیگر یکی از این دو interface را پیاده سازی کرده و متدهای آن را در کلاس بازنویسی کنید.
متد startDrag الحاق شده به ( view فراخوانی شده بر روی آن) در واقع عملیات drag و کشیده شدن آیتم را آغاز می کند. در این متد می بایست view یا مکانی که view جاری قرار است بر روی آن کشیده و جایگذاری شود را به واسطه ی نمونه ای از کلاس ClipData مشخص نمایید.
سپس می بایست نمونه ای از کلاس DragShadowBuilder را به عنوان آرگومان به متد startDrag ارسال نمایید. این آبجکت عکسی که برای عملیات drag استفاده می شود را مشخص می نماید (به عبارت دیگر با استفاده از این آبجکت می توان برای آیتم در حال drag سایه ایجاد کنید.) حال می توانید این view را مستقیما به عنوان پارامتر ارسال کنید که در این صورت تصویری از view مورد نظر در طول کشیده شدن آیتم نمایش داده می شود.
نحوه ی تنظیم و راه اندازی عملیات کشیدن در 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 target)
View هایی که قرار است از قابلیت drop پشتیبانی کنند، می بایست نمونه ای از کلاس OnDragListener به آن ها اختصاص یابد. به عبارت دیگر، لازم است نمونه ای از onDragListener را به view ای که قرار است محل جایگذاری view دیگر باشد، تخصیص دهید.
در این گوش فراخوان به رویداد drop (listener) چنانچه از قبل event های مرتبط با drag&drop تعریف شده باشد، callback یا توابع بازفراخوانی را دریافت خواهید کرد.
DragEvent.ACTION_DRAG_STARTED
* DragEvent.ACTION_DRAG_ENTERED
DragEvent.ACTION_DRAG_EXITED
DragEvent.ACTION_DROP
DragEvent.ACTION_DRAG_ENDED
View ای که OnDragListener برای آن پیاده سازی شده در واقع محل قرارگیری یک view دیگر بوده و از قابلیت drop پشتیبانی می کند. این setOnDragListener است که نمونه ای از 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; } }
پیاده سازی Drag and drop در اپلیکیشن به صورت عملی
در این تمرین شما تعدادی view group تعریف می کنید که از قابلیت ( drag&drop کشیدن آیتم از یکی و جایگذاری آن در دیگری) پشتیبانی می کند.
یک پروژه و activity اندروید به ترتیب به نام های com.vogella.android.draganddrop و DragActivity ایجاد نمایید
ایجاد فایل های ( Drawable فایل های تصویری تعریف شده در فرمت XML )
در این بخش یکی از منابع مورد استفاده ی شما، فایل های XML drawable خواهند بود.
بنابراین ابتدا بایستی فایل های XML drawable مورد نیاز پروژه ی خود را در پوشه ی res/drawable ایجاد نمایید.
اولین فایلی که در آدرس مذکور ایجاد می کنید، shape.xml با محتویات زیر خواهد بود.
<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <stroke android:width="2dp" android:color="#FFFFFFFF" /> <gradient android:angle="225" android:endColor="#DD2ECCFA" android:startColor="#DD000000" /> <corners android:bottomLeftRadius="7dp" android:bottomRightRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp" /> </shape>
سپس فایل shape_droptarget.xml را با محتویات زیر در پوشه ی نام برده ایجاد نمایید.
<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <stroke android:width="2dp" android:color="#FFFF0000" /> <gradient android:angle="225" android:endColor="#DD2ECCFA" android:startColor="#DD000000" /> <corners android:bottomLeftRadius="7dp" android:bottomRightRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp" /> </shape>
Activity و تنظیم فایل layout مربوطه
محتویات layout کلاس activity خود را به صورت زیر ویرایش نمایید.
<?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="2" android:columnWidth="320dp" android:orientation="vertical" android:rowCount="2" android:stretchMode="columnWidth" > <LinearLayout android:id="@+id/topleft" android:layout_width="160dp" android:layout_height="160dp" android:layout_row="0" android:background="@drawable/shape" > <ImageView android:id="@+id/myimage1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </LinearLayout> <LinearLayout android:id="@+id/topright" android:layout_width="160dp" android:layout_height="160dp" android:background="@drawable/shape" > <ImageView android:id="@+id/myimage2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </LinearLayout> <LinearLayout android:id="@+id/bottomleft" android:layout_width="160dp" android:layout_height="160dp" android:background="@drawable/shape" > <ImageView android:id="@+id/myimage3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </LinearLayout> <LinearLayout android:id="@+id/bottomright" android:layout_width="160dp" android:layout_height="160dp" android:background="@drawable/shape" > <ImageView android:id="@+id/myimage4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </LinearLayout> </GridLayout>
حال بدنه ی کلاس 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; } } }
پس از راه اندازی این activity ، می توانید ImageViews را کشیده و در ظرف دیگری جایگذاری نمایید.
امیدواریم آموزش drag & drop در اندروید نیز برای شما مفید واقع شده باشد و ادامه آموزش برنامه نویسی اندروید رو دنبال کنید . برای مطالعه پستها بیشتر ، ما را در مدرسه کدنویسی تلگرام و یا در تی جوان اینستاگرام دنبال کنید.
نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.