Android Drag & Drop İşlemleri ve Mantığı
- Android Drag ve Drop
- drag & drop kullanımı
- Bir nesneye drag özelliği kazandırma
- Taşıma Hedefi Belirleme
- Uygulama : Drag & Drop
- Proje oluşturma
- XML Drawable oluşturma
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
// 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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> |
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
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.