Drag And Drop!

O Drag and Drop é a ação de arrastar uma determinada View (Button, EditText) com o dedo para uma área desejada.

É uma funcionalidade extremamente interessante pois proporciona ao usuário uma interatividade muito legal com o sistemas.

É possível encontrar no Android uma série de exemplos de uso do DragAndDrop dentre eles podemos destacar a ação de arrastar um aplicativo para a lixeira.
Fazemos isso mantendo o dedo pressionado no aplicativo alvo, até que o ícone de lixeira fique disponível na tela, após isso basta arrastar o aplicativo com o dedo até a lixeira.

Mas esse é apenas um exemplo de utilização, cada aplicação tem um objetivo e esse recurso pode ser empregado em diversas necessidades.
Um detalhe importante é que essa funcionalidade esta disponível para os desenvolvedores a partir da API 11 (Android 3.0 HoneyComb).

Então para testar o código que será exposto aqui deve ser criado um projeto utilizando a API 11. Ou seja, ele não irá funcionar em versões do Android abaixo da 3.1.

Para exemplificar o uso do DragAndDrop vamos criar um projeto bem simples. Onde teremos uma View que servirá de alvo a ser arrastado e um ViewGroup que irá representar o lugar onde a View irá ser arrastada.

Obs: O ViewGroup é a estrutura do Android que organiza a forma que os componentes serão disponibilizados na tela. Uma Tela do Android, pode ter vários ViewGroup’s que podem ter vários Views(Como buttons, EditText, etc). Os Views colocados no ViewGroup serão exibidos de acordo com a definição do ViewGroup.

Começando pelo Layout.xml:

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

    <LinearLayout
        android:id="@+id/dragged_area"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:layout_weight="1">

        <ImageView
            android:id="@+id/imageViewDragged"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
   
    <RelativeLayout
        android:id="@+id/drop_area"
        android:background="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:layout_weight="1">
    </RelativeLayout>

</LinearLayout>

Analisando esse layout, podemos ver que temos um componente ImageView que será o componente a ser arrastado. Esse componente possui o ID: imageViewDragged. No final do arquivo podemos ver a tag RelativeLayout esse será o nosso ViewGroup responsável pela área onde o componente poderá ser arrastado. Ele possui o id: drop_area e também terá uma cor de fundo preta para poder ser identificado mais facilmente.

Agora que temos Layout vamos utiliza-lo na nossa Activity:

public class MainActivity extends Activity {

	private ImageView imageView;
	private ViewGroup dropedArea;
	private ViewGroup draggedArea;


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

		imageView = (ImageView)findViewById(R.id.imageViewDragged);
		imageView.setOnTouchListener(new TouchListener()); 

		draggedArea = (ViewGroup)findViewById(R.id.dragged_area);
		dropedArea = (ViewGroup)findViewById(R.id.drop_area);
		dropedArea.setOnDragListener(new DragListener());
	}


	private class TouchListener implements OnTouchListener {

		@Override
		public boolean onTouch(View view, MotionEvent motionEvent) {

			if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
				ClipData clipData = ClipData.newPlainText("", "");
				View.DragShadowBuilder dsb = new View.DragShadowBuilder(view);
				view.startDrag(clipData, dsb, view, 0);
				view.setVisibility(View.INVISIBLE);
				return true;
			} else {
				return false;
			}

		}

	}


	private class DragListener implements OnDragListener {

		public boolean onDrag(View view, DragEvent dragEvent) {
			int dragAction = dragEvent.getAction();
			View dragView = (View) dragEvent.getLocalState();

			switch (dragAction) {
			case DragEvent.ACTION_DRAG_EXITED:
				Log.i("DRAG AND DROP", "SAIU DA ÁREA DE DROP!!!!");
				break;
			case DragEvent.ACTION_DRAG_ENTERED:
				Log.i("DRAG AND DROP", "ENTROU na DA ÁREA DE DROP!");
				break;
			case DragEvent.ACTION_DRAG_ENDED:
				Log.i("DRAG AND DROP", "AÇÃO FINAL !!!!");
				break;
			case DragEvent.ACTION_DROP:
				Log.i("DRAG AND DROP", "OBJETO ARRASTADO !!!!");
				try {
					dragView.setVisibility(View.VISIBLE);
					draggedArea.removeView(dragView);
					ViewGroup droppedArea = ((ViewGroup)view);

					droppedArea.addView(dragView);	
				} catch(Exception e) {
					e.printStackTrace();
				}
				break;
			default:
				break;
			}
			return true;
		}
	}
}

Pontos importantes que devem ser ressaltados nesse código:

– Configuramos através do método setOnTouchListener do componente ImageView um objeto OnTouchListener capaz de gerenciar eventos de touch screen realizados nesse componente.
Essa interface foi implementada pela inner class TouchListener.

– Então o método onTouch implementando na nossa inner Class TouchListener será invocado quando o usuário pressionar com o dedo o componente ImageView. Veja que ele inicia o procedimento de Drag(arrastar). Depois da execução desse método o componente poderá ser arrastado por toda a tela.

– Através do método setOnDragListener do componente ViewGroup configuramos um objeto do tipo OnDragListener. Essa estrutura é outra interface que será implementada pela nossa inner class DragListener.

– Então o método onDrag da inner class DragListener será invocado todas as vezes que um componente estiver sendo arrastado para dentro dele.
Veja que conseguimos gerenciar diversas ações nesse método, como quando um componente entrou dentro da área de drop, quando ele saiu da área e quando ele foi “jogado” para área de drop. Nesse último evento colocamos o objeto jogado no ViewGroup alvo.

Pronto agora você já pode colocar este recurso na sua aplicação!

Dúvidas e comentários são bem vindos.

Abraço e até a próxima.

Anúncios

, ,

  1. Deixe um comentário

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: