Drag and Drop in Android


Hôm nay mình giới thiệu đến với các bạn các bước đơn giản trong việc kéo thả View trong Screen android giữa 2 Group với nhau:

Sau đây là  hình ảnh của bài viết .

d1

Sau đây là khung của chương trình :

d1

Các bạn tạo ra 2 file from.xml and to.xml bên dưới thư mục drawable. như sau :

from.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" />

&nbsp;

</shape>

to.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" />
</shape>

main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/LinearLayout1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

<LinearLayout
 android:id="@+id/top"
 android:layout_width="match_parent"
 android:layout_height="205dp"
 android:background="@drawable/from" >

<ImageView
 android:id="@+id/myimage1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/a" />

<ImageView
 android:id="@+id/myimage2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/b" />

<ImageView
 android:id="@+id/myimage3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/c" />

<ImageView
 android:id="@+id/myimage4"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/d" />
 </LinearLayout>

<LinearLayout
 android:id="@+id/bottom"
 android:layout_width="match_parent"
 android:layout_height="225dp"
 android:layout_gravity="fill_vertical"
 android:background="@drawable/from" >

<ImageView
 android:id="@+id/myimage5"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/a" />

<ImageView
 android:id="@+id/myimage6"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/b" />

<ImageView
 android:id="@+id/myimage7"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/c" />

<ImageView
 android:id="@+id/myimage8"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="0"
 android:layout_row="0"
 android:src="@drawable/d" />
 </LinearLayout>

</LinearLayout>

Class MainActivity.Java


package com.example.dragdrop;

import android.app.Activity;
import android.content.ClipData;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.DragEvent;
import android.view.Menu;
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 MainActivity extends Activity {

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 // Chúng ta set event OnTouchListenr cho các image của chúng ta
 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.myimage5).setOnTouchListener(new MyTouchListener());
 findViewById(R.id.myimage6).setOnTouchListener(new MyTouchListener());
 findViewById(R.id.myimage7).setOnTouchListener(new MyTouchListener());
 findViewById(R.id.myimage8).setOnTouchListener(new MyTouchListener());

 // Set event OnDragListener cho các vùng mà chúng ta muốn Drag and drop trong screen
 findViewById(R.id.top).setOnDragListener(new MyDragListener());
 findViewById(R.id.bottom).setOnDragListener(new MyDragListener());

 }

@Override
 public boolean onCreateOptionsMenu(Menu menu) {
 // Inflate the menu; this adds items to the action bar if it is present.
 getMenuInflater().inflate(R.menu.main, menu);
 return true;
 }

/*
 * Đây là class MyTochListener của chúng ta
 * MotionEvent là để check xem khi chúng ta dùng chuột Touch vào đối tượng cần
 * Drag and Drop.
 * ACTION_DOWN : Khi ta nhấn và giữ chuột trên 1 View nào đó.
 * ClipData : Đối tượng này được sử dụng để chứa thể hiện của View để hiển thị cho user
 * DragShadowBuilder : Đối tượng này giúp cho chúng ta thấy được View khi chúng ta giữ chúng
 * và kéo tới kéo lui. Thể hiện các event khi chúng ta Drag.
 */

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

 /**
 * Đây là class MyDragListener của chúng ta.
 * Đây là 5 event khi chúng ta thao tác trên đối tượng.
 * From and To : chả qua chỉ là thiết lập độ mờ của đối tượng khi được Drag .
 * Chúng ta chỉ thực hiện . Xóa đi view trong group củ. Add view vào trong Group mới.
 * @author kobee
 *
 */

 class MyDragListener implements OnDragListener {
 Drawable from = getResources().getDrawable(R.drawable.from);
 Drawable to = getResources().getDrawable(R.drawable.to);

@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(from);
 break;
 case DragEvent.ACTION_DRAG_EXITED:
 v.setBackgroundDrawable(to);
 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(to);
 default:
 break;
 }
 return true;
 }
 }

}

OK xong chương trình chúc các bạn thành công .

Posted in android. 1 Comment »

One Response to “Drag and Drop in Android”

  1. R.O.M Says:

    Good thanks


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: