Drag and Drop en Android. Parte 1

David Galisteo Cantero

En esta “mini serie” de 2 entradas, vamos a ver cómo implementar la funcionalidad de drag and drop o arrastrar y soltar en Android.

Parte 2

En esta primera parte, trataremos el tema de las vistas, dejando para la siguiente parte el código java y el manifest.

Veamos una captura de cómo quedaría nuestra app una vez realizado el proceso:

drag and drop android

Contaremos principalmente con 3 archivos xml para construir la vista, un layout principal “activity_drag.xml”, otro para definir un fondo, “shape.xml” y por último, otro para definir el fondo cuando arrastramos un elemento “shape_target.xml”.

Bien, veamos código, empecemos por “activity_drag.xml”:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
 
    <LinearLayout
        android:id="@+id/left"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:orientation="vertical"
        android:background="@drawable/shape" 
        >
 
        <ImageView
            android:id="@+id/imagen1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/right"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:orientation="vertical"
        android:background="@drawable/shape" >
 
        <ImageView
            android:id="@+id/imagen2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
</LinearLayout>

Este código es simple, tenemos dos LinearLayouts alineados horizontalmente con una imagen cada uno, en este caso la imagen por defecto del icono del app.

Si te fijas, los 2 layouts internos, en la propiedad background tienen un ‘@drawable/shape’, por lo que cogerá como fondo el fichero shape.xml, el cual se muestra aquí:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
 
    <solid 
        android:color="#0385B9"
        />
 
    <stroke
        android:width="2dp"
        android:color="#FFF" />
 
    <corners
        android:bottomLeftRadius="7dp"
        android:bottomRightRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp" />
 
</shape>

Declaramos que la forma será un cuadrado, que tendrá color azul, un stroke de 2dp, que vendría a hacer las veces de un margen entre layouts, y por último, un borde redondeado.

Cabe destacar que puede haber otras maneras de definir nuestros fondos para un layout.

Por último, vamos a tener un “shape_target.xml” que se “activará” cuando agarremos una imagen para moverla, cuyo código es:

<?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="#000" />
 
    <solid 
        android:color="#FFF"
        />
 
    <corners
        android:bottomLeftRadius="7dp"
        android:bottomRightRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp" />
 
</shape>

No hay nada que explicar, cambia poco respecto al fichero anterior.

De esta manera ya tendríamos lista la vista de nuestra app, en la siguiente entrada veremos el código java necesario para hacerla funcionar.

Espero que os haya sido de ayuda.

HackSaludos!

Publicado el 15-11-2013

Compartelo!

Deja un comentario

Comentanos

*
Ir arriba de la pagina