안드로이드 - 동전 이미지를 드래그 해보자

 

이전 예제(드래그 섀도우 이미지 변경하기) 를 응용하여 동전 이미지를 드래그 해보는 예제를 만들어보자.

 

이번 예제는 다음과 같이 구성된다.

 

drawable-hdpi.zip(이미지 파일)

  

 

dragcoin.xml

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

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

<LinearLayout

    android:id="@+id/uplinear"

    android:layout_width="match_parent"

    android:layout_height="0px"

    android:layout_weight="1"

    android:background="#0000ff"

    >

<ImageView

    android:id="@+id/coin500"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/coin500" />"

<ImageView

    android:id="@+id/coin100"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/coin100" />

</LinearLayout>

<LinearLayout

    android:id="@+id/downlinear"

    android:layout_width="match_parent"

    android:layout_height="0px"

    android:layout_weight="1"

    android:background="#00ff00"

    >

<ImageView

    android:id="@+id/coin50"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/coin50" />

</LinearLayout>

</LinearLayout>

 

 

DragCoin.java

package com.example.ch27_dragcoin;

 

import android.app.Activity;

import android.content.ClipData;

import android.graphics.Canvas;

import android.graphics.Point;

import android.os.Bundle;

import android.view.DragEvent;

import android.view.MotionEvent;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.LinearLayout;

 

 

public class DragCoin extends Activity {

    Button btnSource;

    LinearLayout uplinear, downlinear;

    

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.dragcoin);

    

        //각 동전 별로 리스너를 달아줌.

        findViewById(R.id.coin500).setOnTouchListener(mTouchListener);

        findViewById(R.id.coin100).setOnTouchListener(mTouchListener);

        findViewById(R.id.coin50).setOnTouchListener(mTouchListener);    

      

        findViewById(R.id.uplinear).setOnDragListener(mDragListener);

        findViewById(R.id.downlinear).setOnDragListener(mDragListener);

    }

 

      

        View.OnTouchListener mTouchListener = new View.OnTouchListener() {

            

            @Override

            public boolean onTouch(View view, MotionEvent event) {

                // TODO Auto-generated method stub

                //동전을 터치하게 되면

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

                    //클립 데이터를 만듬

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

                    //드래그 시작을 하는데 이때 커스텀 섀도우 이미지를 사용하게 한다.

                    view.startDrag(clip, new CanvasShadow(view,

                            (int)event.getX(), (int)event.getY()), view, 0);//세번째 항목이 view임을 유의

                    view.setVisibility(View.INVISIBLE);//일단 안보이게 함.

                    //즉 동전을 들어 올리는 효과가 남

                    return true;

                }

                

                return false;

            }

        };

    class CanvasShadow extends View.DragShadowBuilder{

        int mWidth, mHeight;

        int mX, mY;

        public CanvasShadow(View v, int x, int y){

            super(v);

            //좌표를 저장해둠

            mWidth = v.getWidth();

            mHeight = v.getHeight();

            mX = x;

            mY = y;

      

        }

        

        public void onProvideShadowMetrics(Point shadowSize, Point shadowTouchPoint){

            shadowSize.set(mWidth, mHeight);//섀도우 이미지 크기 지정함

            shadowTouchPoint.set(mX, mY);//섀도우 이미지 중심점을 지정함.

        }

        

        public void onDrawShadow(Canvas canvas){

            super.onDrawShadow(canvas);//이미지 복사

        }

    }

    

    //드래그 리스너를 선언한다.

    View.OnDragListener mDragListener = new View.OnDragListener() {

        

        @Override

        public boolean onDrag(View v, DragEvent event) {

            // TODO Auto-generated method stub

            switch(event.getAction()){

            case DragEvent.ACTION_DRAG_STARTED:

                return true;

            case DragEvent.ACTION_DRAG_ENTERED:

                return true;

            case DragEvent.ACTION_DRAG_EXITED:

                return true;

            case DragEvent.ACTION_DROP:

                //드래그를 떼었다 놓을 때

                View view = (View)event.getLocalState();//startDrag에서 3번째 항목을 가져옴

                ViewGroup parent = (ViewGroup)view.getParent();//원래 부모를 구함.(리니어레이아웃)

                parent.removeView(view);//뷰를 제거함

                LinearLayout newparent = (LinearLayout)v;//새로운 부모를 만들고(리니어레이아웃)

                newparent.addView(view);//드롭을 받은 부모에게 뷰를 추가함.

                view.setVisibility(View.VISIBLE);//보이게 함.

                return true;

            case DragEvent.ACTION_DRAG_ENDED:

                if(event.getResult() == false){//드래그 종료시 처음 숨겼던 뷰를 다시 보이도록 한다.

                    ((View)(event.getLocalState())).setVisibility(View.VISIBLE);

                }

                return true;

            }

            return true;

        }

    };

}

 

 

실행 화면

첫 실행화면입니다.

백원짜리를 끌면 다음과 같이 원래 백원이 있던 곳이 INVISIBLE이 된다.

아래에 갖다 두면 다음과 같이 백원이 이동이 된다.