۱۹
آبان

جلسه ۱۷ : Drag and Drop در اندروید

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش برنامه نویسی اندروید را دنبال می کنند. فریم ورک Drag and Drop ( کشیدن و رها کردن در اندروید ) به کاربران اجازه می دهد که داده ها را از یک view به یک view دیگر در طرح فعلی با استفاده از یک کشیدن گرافیکی و رها کردن حرکت دهند. همانطور که از API 11 به بعد کشیدن و رها کردن دید در دیگر view ها یا view group ها پشتیبانی می شود. Drag and Drop در اندروید از رویدادهای بسیار پر کاربرد است که برای فعالیت هایی از جمله جابه جایی آتم های صفحه، افزودن یک آبجکت به برنامه و… کاربرد دارد. در ادامه ی مباحث این آموزش برای آشنایی با کشیدن و رها کردن در اندروید با ما همراه باشید.

Drag and Drop در اندروید

در ادامه ی مباحث آشنایی با کشیدن و رها کردن در اندروید ما شما را به ساختار و متدهای این رویداد آشنا خواهیم کرد.

فریم ورک اندروید شامل سه بعد مهم برای پشتیبانی از قابلیت Drag and Drop است:

Drag event class (درگ کردن کلاس Event)
Drag listeners (درگ کردن کلاس listener ها)
Helper methods and classes (متدها و کلاس های کمکی)

فرآیند کشیدن و رها کردن در اندروید

اساسا چهار مرحله یا حالت در فرآیند کشیدن و رها کردن در اندروید وجود دارد :

Started

این رویداد هنگامی رخ می دهد که شما شروع به کشیدن یک آیتم در یک طرح کنید.

برنامه ی شما متد () startDrag را به سیستم ارسال می کند تا بتوانید درگ را انجام دهید.

آرگومان ورودی () startDrag شامل داده هایی است که درگ می شوند.

سیستم برای اولین بار با ارسال درخواست به drag shadow پاسخ می دهد. سپس drag shadow را روی دستگاه را نشان می دهد.

بعد، سیستم یک رویداد درگ را با نوع عمل ACTION_DRAG_STARTED به Listener رویداد کشیدن ثبت شده برای همه اشیاء View در طرح فعلی ارسال می کند.

برای ادامه رویدادهای درگ ، از جمله یک رویداد احتمالی یک Listener رویداد درگ باید درست باشد.

Continuing

کاربر همچنان عمل درگ را ادامه می دهد سیستم عمل ACTION_DRAG_ENTERED را دنبال می کند.

سیستم عمل ACTION_DRAG_LOCATION به Listener رویداد درگ ثبت شده برای نمایش در جایی که نقطه درگ کردن وارد می شود، ارسال می کند.

درگ event listener یک عمل ACTION_DRAG_EXITED را پس از آنکه کاربر drag shadow را خارج از کادر محدوده نمایش مشاهده می کند، دریافت می کند.

Dropped

کاربر آیتم درگ شده را در یک Box در نمای View باز می کند، سیستم آبجکت های listener را یک رویداد درگ را به عمل ACTION_DROP انجام می دهند.

Ended

درست بعد از ACTION_DROP، سیستم یک رویداد درگ را با نوع عمل ACTION_DRAG_ENDED ارسال می کند تا نشان دهد که عملیات درگ پایان یافته است.

کلاس DragEvent

DragEvent نشان دهنده یک رویداد است که توسط سیستم در زمان های مختلف در طی عملیات Drag and Drop ارسال می شود.

این کلاس شامل چند ثابت و متد های مهم است که ما در طول روند Drag and Drop استفاده می کنیم.

ثابت ها

در زیر تمام اعداد صحیح ثابت به عنوان بخشی از کلاس DragEvent در دسترس هستند:

ردیف	ثابت ها و توضیحات آن
۱	ACTION_DRAG_STARTED این شروع عملیات کشیدن و رها کردن است.
۲	ACTION_DRAG_ENTERED سیگنال ها به یک نمایش که نقطۀ درگ به کادر محدوده ی نمایش وارد شده است.
۳	ACTION_DRAG_LOCATION ACTION_DRAG_ENTERED پس از ACTION_DRAG_ENTERED ارسال می شود.
۴	ACTION_DRAG_EXITED سیگنال هایی که کاربر به آن انتقال داده است، drag shadow را در خارج از کادر محدوده نمایش قرار می دهد.
۵	ACTION_DROP سیگنال ها به یک View که کاربر drag shadow را منتشر کرده است، و نقطه کشیدن در داخل جعبه محدوده نمایش است.
۶	ACTION_DRAG_ENDED سیگنال ها به یک View که عملیات Drag and Drop به پایان رسید، ارسال می شود.

متدها

بعضی از متد های مهم و اغلب استفاده شده به عنوان بخشی از کلاس DragEvent در دسترس هستند:

ردیف	ثابت ها و توضیحات
۱	`int getAction()` ارزش عمل یک رویداد را بازبینی می کند.
۲	`ClipData getClipData()` شیء ClipData ارسال شده به سیستم را به عنوان بخشی از () call to startDrag باز می گرداند.
۳	`ClipDescription getClipDescription()` Object ClipDescription موجود در ClipData را برمی گرداند.
۴	`boolean getResult()` یک نتیجه از عملیات Drag and Drop را نشان می دهد.
۵	`float getX()` مختصات X نقطه ی درگ را می دهد.
۶	`float getY()` مختصات Y نقطه ی درگ را می دهد.
۷	`String toString()` یک View رشته ای از این شیء DragEvent را باز می گرداند.

گوش دادن به رویداد Drag

اگر بخواهید هر یک از View های خود را در یک طرح قرار دهید، باید رویداد را بکشید و سپس نمایش خود را پیاده سازی کنید.

پیاده سازی View.OnDragListener و یا تنظیم متد بازگشتی (onDragEvent(DragEvent را انجام دهید.

هنگامی که سیستم متد callback یا listener را می دهد، یک شی DragEvent توضیح داده شده در بالا را به آنها می دهد.

شما می توانید هر دو listener و یک متد فراخوانی را برای View Object داشته باشید.

ترکیبی از متد (onDragEvent (DragEvent و View.OnDragListener مشابه ترکیبات ()onTouchEvent و View.OnTouchListener است.

شروع یک رویداد drag

برای ایجاد Drag باید شروع به ایجاد ClipData و ClipData.Item کنید.

ورودی metadata است که در یک آبجکت ClipDescription در ClipData ذخیره می شود.

برای عملیات drag and drop می توانید به جای یک شیء از null استفاده کنید.

سپس می توانید View.DragShadowBuilder را گسترش دهید تا یک drag shadow برای کشیدن View ایجاد کنید.

همچنین به سادگی می توانید از (View.DragShadowBuilder (View استفاده کنید تا یک drag shadow به طور پیش فرض ایجاد شود.

مثال

مثال زیر یک عملیات drag and drop ساده را با استفاده از توابع () View.setOnLongClickListener () ، View.setOnTouchListener و () View.OnDragEventListener نشان می دهد:

مراحل	توضیحات
۱	مراحل ایجاد برنامه در اندروید استدیو را طبق بخش های قبلی دنبال کرده و نام پکیج را com.pvlearn.pvlearn.myapplication قرار بدهید.
۲	به محتوای فایل src / MainActivity.java کد مورد نیاز را برای تعریف event listener و یک متد برای تعریف لوگو استفاده کنید.
۳	تصویر abc.png را به فولدر res / drawable- * کپی کنید.
۴	محتوای طرح XML file res / layout / activity_main.xml را برای تعریف تصویر آرم برنامه ویرایش کنید.
۵	برنامه را اجرا کنید تا شبیه ساز اندروید نتیجه را نمایش دهد.

در کد زیر محتوای اصلی src / MainActivity.java قرار دارد این فایل می تواند شامل هر یک از متدهای ضرروی باشد.

مثال :

package com.example.saira_000.myapplication;

import android.app.Activity;

import android.content.ClipData;
import android.content.ClipDescription;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.Log;

import android.view.DragEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;

import android.widget.ImageView;
import android.widget.RelativeLayout;


public class MainActivity extends Activity {
   ImageView img;
   String msg;
   private android.widget.RelativeLayout.LayoutParams layoutParams;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      img=(ImageView)findViewById(R.id.imageView);
      
      img.setOnLongClickListener(new View.OnLongClickListener() {
         @Override
         public boolean onLongClick(View v) {
            ClipData.Item item = new ClipData.Item((CharSequence)v.getTag());
            String[] mimeTypes = {ClipDescription.MIMETYPE_TEXT_PLAIN};
            
            ClipData dragData = new ClipData(v.getTag().toString(),mimeTypes, item);
            View.DragShadowBuilder myShadow = new View.DragShadowBuilder(img);
            
            v.startDrag(dragData,myShadow,null,0);
            return true;
         }
      });
      
      img.setOnDragListener(new View.OnDragListener() {
         @Override
         public boolean onDrag(View v, DragEvent event) {
            switch(event.getAction()) {
               case DragEvent.ACTION_DRAG_STARTED:
               layoutParams = (RelativeLayout.LayoutParams)v.getLayoutParams();
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_STARTED");
               
               // Do nothing
               break;
               
               case DragEvent.ACTION_DRAG_ENTERED:
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENTERED");
               int x_cord = (int) event.getX();
               int y_cord = (int) event.getY();
               break;
               
               case DragEvent.ACTION_DRAG_EXITED :
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_EXITED");
               x_cord = (int) event.getX();
               y_cord = (int) event.getY();
               layoutParams.leftMargin = x_cord;
               layoutParams.topMargin = y_cord;
               v.setLayoutParams(layoutParams);
               break;
               
               case DragEvent.ACTION_DRAG_LOCATION  :
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_LOCATION");
               x_cord = (int) event.getX();
               y_cord = (int) event.getY();
               break;
               
               case DragEvent.ACTION_DRAG_ENDED   :
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENDED");
               
               // Do nothing
               break;
               
               case DragEvent.ACTION_DROP:
               Log.d(msg, "ACTION_DROP event");
               
               // Do nothing
               break;
               default: break;
            }
            return true;
         }
      });
      
      img.setOnTouchListener(new View.OnTouchListener() {
         @Override
         public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
               ClipData data = ClipData.newPlainText("", "");
               View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(img);
               
               img.startDrag(data, shadowBuilder, img, 0);
               img.setVisibility(View.INVISIBLE);
               return true;
            } else {
               return false;
            }
         }
      });
   }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

package com.example.saira_000.myapplication;

import android.app.Activity;

import android.content.ClipData;

import android.content.ClipDescription;

import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;

import android.util.Log;

import android.view.DragEvent;

import android.view.Menu;

import android.view.MenuItem;

import android.view.MotionEvent;

import android.view.View;

import android.widget.ImageView;

import android.widget.RelativeLayout;

public class MainActivity extends Activity {

ImageView img;

String msg;

private android.widget.RelativeLayout.LayoutParams layoutParams;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

img=(ImageView)findViewById(R.id.imageView);

img.setOnLongClickListener(new View.OnLongClickListener() {

@Override

public boolean onLongClick(View v) {

ClipData.Item item = new ClipData.Item((CharSequence)v.getTag());

String[] mimeTypes = {ClipDescription.MIMETYPE_TEXT_PLAIN};

ClipData dragData = new ClipData(v.getTag().toString(),mimeTypes, item);

View.DragShadowBuilder myShadow = new View.DragShadowBuilder(img);

v.startDrag(dragData,myShadow,null,0);

return true;

}

});

img.setOnDragListener(new View.OnDragListener() {

@Override

public boolean onDrag(View v, DragEvent event) {

switch(event.getAction()) {

case DragEvent.ACTION_DRAG_STARTED:

layoutParams = (RelativeLayout.LayoutParams)v.getLayoutParams();

Log.d(msg, "Action is DragEvent.ACTION_DRAG_STARTED");

// Do nothing

break;

case DragEvent.ACTION_DRAG_ENTERED:

Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENTERED");

int x_cord = (int) event.getX();

int y_cord = (int) event.getY();

break;

case DragEvent.ACTION_DRAG_EXITED :

Log.d(msg, "Action is DragEvent.ACTION_DRAG_EXITED");

x_cord = (int) event.getX();

y_cord = (int) event.getY();

layoutParams.leftMargin = x_cord;

layoutParams.topMargin = y_cord;

v.setLayoutParams(layoutParams);

break;

case DragEvent.ACTION_DRAG_LOCATION :

Log.d(msg, "Action is DragEvent.ACTION_DRAG_LOCATION");

x_cord = (int) event.getX();

y_cord = (int) event.getY();

break;

case DragEvent.ACTION_DRAG_ENDED :

Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENDED");

// Do nothing

break;

case DragEvent.ACTION_DROP:

Log.d(msg, "ACTION_DROP event");

// Do nothing

break;

default: break;

}

return true;

}

});

img.setOnTouchListener(new View.OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_DOWN) {

ClipData data = ClipData.newPlainText("", "");

View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(img);

img.startDrag(data, shadowBuilder, img, 0);

img.setVisibility(View.INVISIBLE);

return true;

} else {

return false;

}

});

}

در زیر محتوای فایل res/layout/activity_main.xml ارائه شده است:

مثال :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" 
   android:layout_width="match_parent"
   android:layout_height="match_parent" 
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" 
   tools:context=".MainActivity">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Drag and Drop Example"
      android:id="@+id/textView"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:textSize="30dp" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorials Point"
      android:id="@+id/textView2"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true"
      android:textSize="30dp"
      android:textColor="#ff14be3c" />>
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView2"
      android:layout_alignStart="@+id/textView2" />

</RelativeLayout>

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Drag and Drop Example"

android:id="@+id/textView"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:textSize="30dp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tutorials Point"

android:id="@+id/textView2"

android:layout_below="@+id/textView"

android:layout_centerHorizontal="true"

android:textSize="30dp"

android:textColor="#ff14be3c" />>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:src="@drawable/abc"

android:layout_below="@+id/textView2"

android:layout_alignRight="@+id/textView2"

android:layout_alignEnd="@+id/textView2"

android:layout_alignLeft="@+id/textView2"

android:layout_alignStart="@+id/textView2" />

</RelativeLayout>

محتوای فایل res/values/strings.xml را برای تعریف دو ثابت ویرایش کنید:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">My Application</string>
</resources>

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

<string name="app_name">My Application</string>

</resources>

محتوای پیش فرض فایل AndroidManifest.xml به صورت زیر است:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.saira_000.myapplication" >
      
   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      
      </activity>
      
   </application>
</manifest>

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

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

package="com.example.saira_000.myapplication" >

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name=".MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

اجرای برنامه

برای اجرای برنامه ی اندرویدی خود یکی از فایل های activity در برنامه ی خود کلیک کنید.

سپس روی نماد (Run) از نوار ابزار برای شروع اجرای برنامه کلیک کنید.

اگر همه چیز بخوبی پیش برود شبیه ساز اندروید پنجره ی زیر را نمایش خواهد داد:

Drag and Drop در اندروید تست-۱

حالا روی لوگوی Pvlearn نمایش داده شده لمس کنید و خواهید دید که تصویر لوگو کمی بعد از ۱ ثانیه از آن محل به حرکت در می آید.

سپس شما می توانید این تصویر را در محل دیگری از صفحه نمایش کشیده و رها کنید.

کشیدن و رها کردن در اندروید -تست ۲

کلام آخر

قابلیت Drag and Drop یکی از ویژگی های بارز و مهم در سیستم عامل های گرافیکی و بخصوص اندروید است که به کاربر امکان جا به جایی یک آبجکت در صفحه نمایش را با استفاده لمس کردن کشیدن و رها کردن می دهد، از این رو مباحث این آموزش را به آشنایی با Drag and Drop در اندروید اختصاص داده ایم.

در بخش بعدی به مباحث Notifications (اطلاعیه ها) در اندروید خواهیم پرداخت.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۷ : Drag and Drop در اندروید

مقدمه

Drag and Drop در اندروید

فرآیند کشیدن و رها کردن در اندروید

کلاس DragEvent

ثابت ها

متدها

گوش دادن به رویداد Drag

شروع یک رویداد drag

مثال

اجرای برنامه

کلام آخر

لیست مطالب دوره

آموزش اندروید

رابط کاربری در اندروید

مفاهیم پیشرفته در اندروید

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ