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

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش Drag and Drop در برنامه نویسی اندروید می پردازیم همانطور که نام آن پیدا است برای جابه جای اجسام (View ها) مورد استفاده قرار می گیرد در ادامه می توانید ویدیویی که برای شما آماده کردیم را مشاهده کنید تا Drag and Drop را بهتر درک کنید با ما همراه باشید.

در حالت کلی Drag and Drop شامل چهار حالت می شود که عبارتند از :

STARTED : زمانی که شروع به Drag کردن می کنید startDrag() شروع شده و به سیستم می گوید که درگ رو شروع کند و برای اینکه Listener داشته باشیم برای View های مختلفمون تا بتوانیم آنها را کنترل کنیم باید از ACTION_DRAG_STARTED استفاده کنیم این متود در STARTED قرار گرفته است.
CONTINUING : زمانی که کاربر هنوز درحال درگ کردن باشد یا درگ کردن کاربر از نظر برنامه نویسی ادامه دار باشد.
DROPPED : زمانی که کاربر از درگ کردن منصرف شده و Object را رها می کند.
ENDED : بعد از اینکه DROPPED انجام می شود یک رویداد به نام ACTION_DRAG_ENDED اجرا می شود تا تمام شدن کار را اعلام کند همانند Listener عمل می کند در بالا ACTION_DRAG_STARTED شروع کننده و در اینجا ACTION_DRAG_ENDED تمام کننده Listener است.

در ابتدا وارد layout خود شده و کد های زیر را در آن قرار دهید نام layout در اینجا برابر با activity_main.xml است.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.dragdrop_demo.MainActivity">
    <LinearLayout
        android:id="@+id/top_layout"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/blue"
        android:gravity="center"
        android:orientation="vertical">
        <TextView
            android:id="@+id/label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/draggable_text"
            android:textColor="@android:color/black"
            android:textSize="20sp" />
        <ImageView
            android:id="@+id/image_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/draggable_button" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/yellowLayout"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">
        <LinearLayout
            android:id="@+id/left_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:orientation="vertical" />
        <LinearLayout
            android:id="@+id/right_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:orientation="vertical" />
    </LinearLayout>
</LinearLayout>

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

<LinearLayout 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:orientation="vertical"

tools:context="com.dragdrop_demo.MainActivity">

<LinearLayout

android:id="@+id/top_layout"

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:background="@color/blue"

android:gravity="center"

android:orientation="vertical">

<TextView

android:id="@+id/label"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="@string/draggable_text"

android:textColor="@android:color/black"

android:textSize="20sp" />

<ImageView

android:id="@+id/image_view"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/draggable_button" />

</LinearLayout>

<LinearLayout

android:id="@+id/yellowLayout"

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:gravity="center"

android:orientation="horizontal">

<LinearLayout

android:id="@+id/left_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:background="@color/colorPrimary"

android:gravity="center"

android:orientation="vertical" />

<LinearLayout

android:id="@+id/right_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:background="@color/colorAccent"

android:gravity="center"

android:orientation="vertical" />

</LinearLayout>

یک مقدار structure کد های بالا کمی پیچیده است.
ابتدا یک LinearLayout کلی داریم که تمامی اجزا در آن قرار گرفته است سپس به دو LinearLayout دیگر تقسیم شده که در اولی اجزای اصلی ما قرار گرفته است و یک LinearLayout دیگر که باز در آن LinearLayout قرار گرفته است.
سپس کد MainActivity.java را باز کرده و کد های زیر را در آن قرار دهید در ادامه آن را توضیح خواهیم داد.

package ir.programchi;
import android.content.ClipData;
import android.content.ClipDescription;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.DragEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnDragListener, View.OnLongClickListener {
    private static final String TAG = MainActivity.class.getSimpleName();
    private TextView textView;
    private Button button;
    private ImageView imageView;
    private static final String IMAGE_VIEW_TAG = "LAUNCHER LOGO";
    private static final String TEXT_VIEW_TAG = "DRAG TEXT";
    private static final String BUTTON_VIEW_TAG = "DRAG BUTTON";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViews();
        implementEvents();
    }
    private void findViews() {
        textView = (TextView) findViewById(R.id.label);
        textView.setTag(TEXT_VIEW_TAG);
        imageView = (ImageView) findViewById(R.id.image_view);
        imageView.setTag(IMAGE_VIEW_TAG);
        button = (Button) findViewById(R.id.button);
        button.setTag(BUTTON_VIEW_TAG);
    }
    private void implementEvents() {
        textView.setOnLongClickListener(this);
        imageView.setOnLongClickListener(this);
        button.setOnLongClickListener(this);
        //add or remove any layout view that you don't want to accept dragged view
        findViewById(R.id.top_layout).setOnDragListener(this);
        findViewById(R.id.left_layout).setOnDragListener(this);
        findViewById(R.id.right_layout).setOnDragListener(this);
    }
    @Override
    public boolean onLongClick(View view) {
        ClipData.Item item = new ClipData.Item((CharSequence) view.getTag());
        String[] mimeTypes = {ClipDescription.MIMETYPE_TEXT_PLAIN};
        ClipData data = new ClipData(view.getTag().toString(), mimeTypes, item);
        View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
        // شروع درگ
        view.startDrag(data//data to be dragged
                , shadowBuilder //drag shadow
                , view//local data about the drag and drop operation
                , 0//no needed flags
        );
        view.setVisibility(View.INVISIBLE);
        return true;
    }
    @Override
    public boolean onDrag(View view, DragEvent event) {
        int action = event.getAction();
        switch (action) {
            case DragEvent.ACTION_DRAG_STARTED:
                if (event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
                    return true;
                }
                return false;
            case DragEvent.ACTION_DRAG_ENTERED:
                view.getBackground().setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_IN);
                view.invalidate();
                return true;
            case DragEvent.ACTION_DRAG_LOCATION:
                return true;
            case DragEvent.ACTION_DRAG_EXITED:
                view.getBackground().clearColorFilter();
                view.invalidate();
                return true;
            case DragEvent.ACTION_DROP:
                ClipData.Item item = event.getClipData().getItemAt(0);
                String dragData = item.getText().toString();
                Toast.makeText(this, "Dragged data is " + dragData, Toast.LENGTH_SHORT).show();
                view.getBackground().clearColorFilter();
                view.invalidate();
                View v = (View) event.getLocalState();
                ViewGroup owner = (ViewGroup) v.getParent();
                owner.removeView(v);//remove the dragged view
                LinearLayout container = (LinearLayout) view;//caste the view into LinearLayout as our drag acceptable layout is LinearLayout
                container.addView(v);//Add the dragged view
                v.setVisibility(View.VISIBLE);//finally set Visibility to VISIBLE
                return true;
            case DragEvent.ACTION_DRAG_ENDED:
                view.getBackground().clearColorFilter();
                view.invalidate();
                if (event.getResult())
                    Toast.makeText(this, "The drop was handled.", Toast.LENGTH_SHORT).show();
                else
                    Toast.makeText(this, "The drop didn't work.", Toast.LENGTH_SHORT).show();
                return true;
            default:
                Log.e("DragDrop Example", "Unknown action type received by OnDragListener.");
                break;
        }
        return false;
    }
}

100

101

102

103

104

105

106

107

108

109

110

package ir.programchi;

import android.content.ClipData;

import android.content.ClipDescription;

import android.graphics.Color;

import android.graphics.PorterDuff;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.view.DragEvent;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnDragListener, View.OnLongClickListener {

private static final String TAG = MainActivity.class.getSimpleName();

private TextView textView;

private Button button;

private ImageView imageView;

private static final String IMAGE_VIEW_TAG = "LAUNCHER LOGO";

private static final String TEXT_VIEW_TAG = "DRAG TEXT";

private static final String BUTTON_VIEW_TAG = "DRAG BUTTON";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

findViews();

implementEvents();

}

private void findViews() {

textView = (TextView) findViewById(R.id.label);

textView.setTag(TEXT_VIEW_TAG);

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

imageView.setTag(IMAGE_VIEW_TAG);

button = (Button) findViewById(R.id.button);

button.setTag(BUTTON_VIEW_TAG);

}

private void implementEvents() {

textView.setOnLongClickListener(this);

imageView.setOnLongClickListener(this);

button.setOnLongClickListener(this);

//add or remove any layout view that you don't want to accept dragged view

findViewById(R.id.top_layout).setOnDragListener(this);

findViewById(R.id.left_layout).setOnDragListener(this);

findViewById(R.id.right_layout).setOnDragListener(this);

}

@Override

public boolean onLongClick(View view) {

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

String[] mimeTypes = {ClipDescription.MIMETYPE_TEXT_PLAIN};

ClipData data = new ClipData(view.getTag().toString(), mimeTypes, item);

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

// شروع درگ

view.startDrag(data//data to be dragged

, shadowBuilder //drag shadow

, view//local data about the drag and drop operation

, 0//no needed flags

);

view.setVisibility(View.INVISIBLE);

return true;

}

@Override

public boolean onDrag(View view, DragEvent event) {

int action = event.getAction();

switch (action) {

case DragEvent.ACTION_DRAG_STARTED:

if (event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {

return true;

}

return false;

case DragEvent.ACTION_DRAG_ENTERED:

view.getBackground().setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_IN);

view.invalidate();

return true;

case DragEvent.ACTION_DRAG_LOCATION:

return true;

case DragEvent.ACTION_DRAG_EXITED:

view.getBackground().clearColorFilter();

view.invalidate();

return true;

case DragEvent.ACTION_DROP:

ClipData.Item item = event.getClipData().getItemAt(0);

String dragData = item.getText().toString();

Toast.makeText(this, "Dragged data is " + dragData, Toast.LENGTH_SHORT).show();

view.getBackground().clearColorFilter();

view.invalidate();

View v = (View) event.getLocalState();

ViewGroup owner = (ViewGroup) v.getParent();

owner.removeView(v);//remove the dragged view

LinearLayout container = (LinearLayout) view;//caste the view into LinearLayout as our drag acceptable layout is LinearLayout

container.addView(v);//Add the dragged view

v.setVisibility(View.VISIBLE);//finally set Visibility to VISIBLE

return true;

case DragEvent.ACTION_DRAG_ENDED:

view.getBackground().clearColorFilter();

view.invalidate();

if (event.getResult())

Toast.makeText(this, "The drop was handled.", Toast.LENGTH_SHORT).show();

else

Toast.makeText(this, "The drop didn't work.", Toast.LENGTH_SHORT).show();

return true;

default:

Log.e("DragDrop Example", "Unknown action type received by OnDragListener.");

break;

}

return false;

}

در بالا ابتدا یک void به نام findViews برای به دست آوردن View های مربوطه استفاده شده است. void دوم implementEvents برای ایجاد کلیک طولانی یا LongClick استفاده شده است و بخش مربوط به درگ رو هم که بالاتر توضیح دادیم که هر کدام چه عملی را انجام می دهند.

این آموزش هم به پایان رسید.

موفق و موید باشید.

مطالعه بیشتر

0 پاسخ به “آموزش Drag and Drop در برنامه نویسی اندروید”

hjmcoder گفت:
دی 12, 1396 در 2:10 ب.ظ
سلام و خسته نباشید خیلی اموزش خوب و کاملی بود .
اگه میشه یکم توضیح بدین برای اینکه داخل ریسایکلر هم ازش استفاده کنیم به چه نحویه یعنی نگه داشتیم و کشیدیم بالا ایتم بالایی بیاد پایین و ولش کردیم جای اون بشینه .
خیلی ممنون.
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  دی 13, 1396 در 12:26 ب.ظ
  سلام می خواهید رفرش کنید با این کار ؟ یا منظورتان همیچین چیزی هست ؟
  
  پاسخ
hjmcoder گفت:
دی 13, 1396 در 11:35 ب.ظ
سلام بله همین هست !
پاسخ
hjmcoder گفت:
دی 13, 1396 در 11:37 ب.ظ
البته اگر داخل یک اموزش جدید مطرح بشه بهتره هم میشه!
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  دی 14, 1396 در 11:58 ب.ظ
  سلام بله در در بخش نظرات امکان آموزش این بخش نیست انشاالله به زودی قرار می گیرد.
  پاسخ

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

مطالب مشابه

0 پاسخ به “آموزش Drag and Drop در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

0 پاسخ به “آموزش Drag and Drop در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی