Ekim 9, 2019

Android Drag & Drop İşlemleri ve Mantığı

By admin Android 0 Comments

Merhaba Arkadaşlar bu yazıda Android ‘de Drag&Drop yani sürükle bırak mekanizmasından bahsedeceğim. Bu yazıda vogella’nın drag&drop ile ilgili yazısını referans aldım isteyen orjinal ingilizce metnine de bakabilir ; Bölüm başlıkları ;

Android Drag ve Drop
1. drag & drop kullanımı
2. Bir nesneye drag özelliği kazandırma
3. Taşıma Hedefi Belirleme
Uygulama : Drag & Drop
1. Proje oluşturma
2. XML Drawable oluşturma
3. Activity ve Layout oluşturma

1. Android drag and drop

1.1. Android drag&drop kullanımı

Android 4.0 versiyonu itibiriyle bir view objesini başka bir view objesine yada layoutlar üzerine taşınabilirsiniz.

1.2. Bir View nesnesine drag özelliği kazandırma

Bir nesneyi OnTouchListener veya LongClickListener kullanarak taşıyabilirsiniz. StartDrag() metodu ile taşıma işlemini başlatabilirsiniz. Aynı Zamanda ClipData nesnesi kullanarak bırakacağınız yere bazı bilgiler de taşıyabilirsiniz.

Nesneyi taşırken bir gölge oluşturup onu da taşıyabilirsiniz böylece taşırken daha güzel bir görüntü elde edersiniz. Bunun için DragShadowBuilder nesnesi oluşturmanız gerekiyor.

onTouchListener kullanarak basit bir örnek yapalım.

// taşıyacağımız nesneyi( view) onTouchListener listesine ekleyelim. 
findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());

//Touchlistener tanımlayalım. 
// bunun için yeni bir sınıf oluşturup OnTouchListener interfacesini  implemente edelim.

private final class MyTouchListener implements OnTouchListener {

    public boolean onTouch(View view, MotionEvent motionEvent) {

        if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) { // dokunduğunuzdaki olayı yakalalayım

            ClipData data = ClipData.newPlainText("", ""); // ClipData Nesnesi oluşturalım

            DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(
                view); // Gölgesini alalım


            view.startDrag(data, shadowBuilder, view, 0); // Taşıma işlemini başlatalım

            view.setVisibility(View.INVISIBLE); // Taşırken aldığımız nesne yerinde gözükmesin.

            return true;  // işlem yapıldı bildirimi verelim

        }
       else {

        return false;

        }
    }
}

// taşıyacağımız nesneyi( view) onTouchListener listesine ekleyelim.

findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());

//Touchlistener tanımlayalım.

// bunun için yeni bir sınıf oluşturup OnTouchListener interfacesini implemente edelim.

private final class MyTouchListener implements OnTouchListener {

public boolean onTouch(View view, MotionEvent motionEvent) {

if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) { // dokunduğunuzdaki olayı yakalalayım

ClipData data = ClipData.newPlainText("", ""); // ClipData Nesnesi oluşturalım

DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(

view); // Gölgesini alalım

view.startDrag(data, shadowBuilder, view, 0); // Taşıma işlemini başlatalım

view.setVisibility(View.INVISIBLE); // Taşırken aldığımız nesne yerinde gözükmesin.

return true; // işlem yapıldı bildirimi verelim

}

else {

return false;

}

1.3. Taşıma Hedefi Belirleme

Yukarıda taşıyacağımız nesneyi onTouchListener() ‘ e ekledik. yada onLongClickListener()’ de olabilirdi. Şimdi taşıyacağımız hedef alanı da setOnDragListener() ‘a eklememiz gerekiyor. Bu listener ‘ın bazı ACTION’ları var . Yani olan olayları yakaladığı bazı olay isimleri.bunlar

* DragEvent.ACTION_DRAG_STARTED

* DragEvent.ACTION_DRAG_ENTERED

* DragEvent.ACTION_DRAG_EXITED

* DragEvent.ACTION_DROP

* DragEvent.ACTION_DRAG_ENDED

bunlar görüldüğü gibi başlama , target hedefe girme, cıkma ,bırakılma ve bırakma işleminin bitimi gibi ifadeler.

// taşınacak yeri onDragListener'a kaydedelim
findViewById(R.id.bottomright).setOnDragListener(new MyDragListener());


// Taşıma işlemi için bir sınıf oluşturup onDragLister interfacesini implemente edelim.
class MyDragListener implements OnDragListener {

    // Taşıma esnasında ShadowBuilder için bir nesne oluşturalım.
    Drawable enterShape = getResources().getDrawable(
            R.drawable.shape_droptarget);
    Drawable normalShape = getResources().getDrawable(R.drawable.shape);

   // Taşıma İşlemi başladğında olan olayları değerlendirelim. 
    @Override
    public boolean onDrag(View v, DragEvent event) {
         
// Hangi action olmuş bulalım.
        int action = event.getAction();

        switch (event.getAction()) {

        case DragEvent.ACTION_DRAG_STARTED:
        // do nothing
            break;

        case DragEvent.ACTION_DRAG_ENTERED:
            // Nesneyi üzerine getirince arkaplanı değiştirelim
            v.setBackgroundDrawable(enterShape);
            break;

        case DragEvent.ACTION_DRAG_EXITED:
            v.setBackgroundDrawable(normalShape);
            break;

        case DragEvent.ACTION_DROP:

            //Taşınan view 'e ulaşalım
            View view = (View) event.getLocalState();

            // Onu taşıyan bir önceki holder yada layout 'a ulaşalım
            ViewGroup owner = (ViewGroup) view.getParent();

            // Önceki yerinden silelim
            owner.removeView(view);

            // Taşıyıp üzerine gittiğimizde v nesnesi üzerine gidilen nesne olur.
            // Şimdi üzerinde olduğumuz layout 'a erişelim.
            LinearLayout container = (LinearLayout) v;
            
            // Bu layout'a ekleyelim.
            container.addView(view);

            // Taşımaya başlarken görünürlüğünü kapatmıştık. Şimdi açalım.
            view.setVisibility(View.VISIBLE);

            break;

        case DragEvent.ACTION_DRAG_ENDED:
            // Arka planı normale döndürelim
            v.setBackgroundDrawable(normalShape);
            default:
            break;
        }
        return true;
    }
}

// taşınacak yeri onDragListener'a kaydedelim

findViewById(R.id.bottomright).setOnDragListener(new MyDragListener());

// Taşıma işlemi için bir sınıf oluşturup onDragLister interfacesini implemente edelim.

class MyDragListener implements OnDragListener {

// Taşıma esnasında ShadowBuilder için bir nesne oluşturalım.

Drawable enterShape = getResources().getDrawable(

R.drawable.shape_droptarget);

Drawable normalShape = getResources().getDrawable(R.drawable.shape);

// Taşıma İşlemi başladğında olan olayları değerlendirelim.

@Override

public boolean onDrag(View v, DragEvent event) {

// Hangi action olmuş bulalım.

int action = event.getAction();

switch (event.getAction()) {

case DragEvent.ACTION_DRAG_STARTED:

// do nothing

break;

case DragEvent.ACTION_DRAG_ENTERED:

// Nesneyi üzerine getirince arkaplanı değiştirelim

v.setBackgroundDrawable(enterShape);

break;

case DragEvent.ACTION_DRAG_EXITED:

v.setBackgroundDrawable(normalShape);

break;

case DragEvent.ACTION_DROP:

//Taşınan view 'e ulaşalım

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

// Onu taşıyan bir önceki holder yada layout 'a ulaşalım

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

// Önceki yerinden silelim

owner.removeView(view);

// Taşıyıp üzerine gittiğimizde v nesnesi üzerine gidilen nesne olur.

// Şimdi üzerinde olduğumuz layout 'a erişelim.

LinearLayout container = (LinearLayout) v;

// Bu layout'a ekleyelim.

container.addView(view);

// Taşımaya başlarken görünürlüğünü kapatmıştık. Şimdi açalım.

view.setVisibility(View.VISIBLE);

break;

case DragEvent.ACTION_DRAG_ENDED:

// Arka planı normale döndürelim

v.setBackgroundDrawable(normalShape);

default:

break;

}

return true;

}

2. Örnek: Drag and drop

Bu örnekte birkaç pencere arasında taşıma nasıl olur buna bakalım.

2.1. Create project

File – New Project diyerek yeni bir Boş proje oluşturalım.

2.2. Create XML Drawables

Bu uygulamada xml drawableler kullanacağız.

Oluşturuduğumuz xml dosyasını buraya kaydedelim. -> 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>

<?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>

<?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>

2.3. Activity & layout

ConstraintLayout olarak gelir muhtemelen layoutunuz bunu GridLayout ‘a çevirelim.

<?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>

<?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.java

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 {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // TAşınacak nesneler bu listener 'a ekleniyor..
        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());

        // Hedef nesneler bu listener'a ekleniyor..
        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());

    }

// Ayrı class larda yapacağız. 

    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;
        }
    }
}

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 {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// TAşınacak nesneler bu listener 'a ekleniyor..

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());

// Hedef nesneler bu listener'a ekleniyor..

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());

}

// Ayrı class larda yapacağız.

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;

}

Uygulama Çalıştığında böyle bir ekran görüntüsü karşınıza gelecek ve kutular arası taşıma yapabileceksiniz.

yazdoldur.com

Android Drag & Drop İşlemleri ve Mantığı

1. Android drag and drop

1.1. Android drag&drop kullanımı

1.2. Bir View nesnesine drag özelliği kazandırma

1.3. Taşıma Hedefi Belirleme

2. Örnek: Drag and drop

2.1. Create project

2.2. Create XML Drawables

2.3. Activity & layout

About Author

veyselsari23_um2m17e1

Add a Comment

1. Android drag and drop

1.1. Android drag&drop kullanımı

1.2. Bir View nesnesine drag özelliği kazandırma

1.3. Taşıma Hedefi Belirleme

2. Örnek: Drag and drop

2.1. Create project

2.2. Create XML Drawables

2.3. Activity & layout

Related Posts

About Author

veyselsari23_um2m17e1

Add a Comment