Proyecto Android: ListView y GridView con ORM

11/06/2014
Base de Datos, Interfaz usuario, Nivel Medio-Avanzado, Premium

Interfaz usuario: acceso a bbdd con ListView y GridView

1. Interfaz de usuario en Apps Android: controles de selección (I)

2. Proyecto Android: ListView y GridView con ORM

3. Videotutorial Proyecto Android: uso ListView-GridView con ORM

En este proyecto Android mostramos el uso de los componentes ListView y GridView con la API Sugar ORM para el mapeo de base de datos.

Se diseñará una pantalla principal donde se guardarán artículos para crear una lista de la compra que podrán posteriormente visualizarse en formato lista y tabla utilizando dichos componentes de selección.

Al final de este tutorial tienes un botón para descargar todo el código del proyecto.

Caso práctico con Sugar ORM, ListView y GridView

1) Creamos un nuevo proyecto Android con los siguientes parámetros:

[...]
package="com.ListView.articulos"
android:minSdkVersion="8"
android:targetSdkVersion="18"
[...]

[...]

package="com.ListView.articulos"

android:minSdkVersion="8"

android:targetSdkVersion="18"

[...]

2) Se añade la librería «sugar-1.2.jar» para utilizar el ORM Sugar ORM. Tras añadir la librería se debe establecer SugarApp en la etiqueta application del AndroidManifest.xml en el atributo android:name:

<application
      android:name="com.orm.SugarApp"
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
[...]
      <meta-data
         android:name="DATABASE"
         android:value="Articulos.sqlite" />
      <meta-data
         android:name="VERSION"
         android:value="1" />
      <meta-data
          android:name="QUERY_LOG"
          android:value="true" />
      <meta-data
          android:name="DOMAIN_PACKAGE_NAME"
          android:value="com.ListView.articulos" />
[...]
</application>

<application

android:name="com.orm.SugarApp"

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

[...]

<meta-data

android:name="DATABASE"

android:value="Articulos.sqlite" />

<meta-data

android:name="VERSION"

android:value="1" />

<meta-data

android:name="QUERY_LOG"

android:value="true" />

<meta-data

android:name="DOMAIN_PACKAGE_NAME"

android:value="com.ListView.articulos" />

[...]

</application>

El resto de metadatos definidos es opcional y sirven para el siguiente propósito:

3) Creamos nuestra primera Activity donde implementamos la lógica de guardar los artículos en la base de datos. Además se añaden dos componentes de tipo Button para cambiar de Activity y mostrar los datos almacenados:

Articulos/src/com.ListView.articulos/MainActivity.java

[...]
//Declaramos los componentes necesarios para introducir valores en la aplicación
private EditText producto;
private EditText cantidad;
[...]
@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);

   //Inicializamos los componentes con su identificador único
  producto = (EditText)findViewById(R.id.edProducto);
  cantidad = (EditText)findViewById(R.id.edCantidad);
  }
[...]

[...]

//Declaramos los componentes necesarios para introducir valores en la aplicación

private EditText producto;

private EditText cantidad;

[...]

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Inicializamos los componentes con su identificador único

producto = (EditText)findViewById(R.id.edProducto);

cantidad = (EditText)findViewById(R.id.edCantidad);

}

[...]

Definimos los eventos On Click encargados de lanzarse cuando se pulse el botón asociado al evento:

//Evento On Click para acceder a la Activity que muestra un ListView con los artículos almacenados
public void mostrarLista(View view)
{
  try
  {
     Intent intent = new Intent(MainActivity.this, ListaArticulos.class);
     startActivity(intent);
  }
  catch(Exception ex)
  {
        Toast.makeText(this, "Error al mostrar lista de artículos: " + ex.getMessage(), 3000).show();
  }
}

//Evento On Click para acceder a la Activity que muestra un GridView con los artículos almacenados
public void mostrarListaGridView(View view)
{
  try
  {
  Intent intent = new Intent(MainActivity.this, ListaArticulosGridView.class);
  startActivity(intent);
  }
  catch(Exception ex)
  {
      Toast.makeText(this, "Error al mostrar lista de artículos: " + ex.getMessage(), 3000).show();
  }
}

//Evento On Click que nos permite almacenar el artículo y la cantidad indicados
public void guardarArticulos(View view)
{
  try
  {
      String campo_producto = producto.getText().toString();
      String campo_cantidad = cantidad.getText().toString();
      if(campo_producto.equals(""))
      {
          Toast.makeText(this, "Debe indicar el nombre del producto.", 3000).show();
      }
      else if(campo_cantidad.equals(""))
      {
          Toast.makeText(this, "Debe indicar la cantidad del producto.", 3000).show();
      }
      else
      {
          Articulos articulos = new Articulos(this,campo_producto,campo_cantidad);
          articulos.save();
          Toast.makeText(this, "Producto " + articulos.getProducto() + " ha sido almacenado en la lista de la compra.", 3000).show();
          producto.setText("");
          cantidad.setText("");
      }
      }
      catch(Exception ex)
      {
          Toast.makeText(this, "Error al guardar artículos: " + ex.getMessage(), 3000).show();
      }
}

//Evento On Click para acceder a la Activity que muestra un ListView con los artículos almacenados

public void mostrarLista(View view)

{

try

{

Intent intent = new Intent(MainActivity.this, ListaArticulos.class);

startActivity(intent);

}

catch(Exception ex)

{

Toast.makeText(this, "Error al mostrar lista de artículos: " + ex.getMessage(), 3000).show();

}

//Evento On Click para acceder a la Activity que muestra un GridView con los artículos almacenados

public void mostrarListaGridView(View view)

{

try

{

Intent intent = new Intent(MainActivity.this, ListaArticulosGridView.class);

startActivity(intent);

}

catch(Exception ex)

{

Toast.makeText(this, "Error al mostrar lista de artículos: " + ex.getMessage(), 3000).show();

}

//Evento On Click que nos permite almacenar el artículo y la cantidad indicados

public void guardarArticulos(View view)

{

try

{

String campo_producto = producto.getText().toString();

String campo_cantidad = cantidad.getText().toString();

if(campo_producto.equals(""))

{

Toast.makeText(this, "Debe indicar el nombre del producto.", 3000).show();

}

else if(campo_cantidad.equals(""))

{

Toast.makeText(this, "Debe indicar la cantidad del producto.", 3000).show();

}

else

{

Articulos articulos = new Articulos(this,campo_producto,campo_cantidad);

articulos.save();

Toast.makeText(this, "Producto " + articulos.getProducto() + " ha sido almacenado en la lista de la compra.", 3000).show();

producto.setText("");

cantidad.setText("");

}

catch(Exception ex)

{

Toast.makeText(this, "Error al guardar artículos: " + ex.getMessage(), 3000).show();

}

Articulos/res/layout/activity_main.xml

[...]
        
        <EditText
            android:id="@+id/edProducto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10" >

        </EditText>

        <EditText
            android:id="@+id/edCantidad"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10" />

        <Button
            android:id="@+id/btnGuardar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="guardarArticulos"
            android:text="Guardar Artículo" />

        <Button
            android:id="@+id/btnLista"
            android:layout_width="157dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.04"
            android:onClick="mostrarLista"
            android:text="Ver Lista (ListView)" />

        <Button
            android:id="@+id/btnGridView"
            android:layout_width="153dp"
            android:layout_height="wrap_content"
            android:onClick="mostrarListaGridView"
            android:text="Ver Lista (GridView)" />

[...]

[...]

<EditText

android:id="@+id/edProducto"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ems="10" >

</EditText>

<EditText

android:id="@+id/edCantidad"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ems="10" />

<Button

android:id="@+id/btnGuardar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="guardarArticulos"

android:text="Guardar Artículo" />

<Button

android:id="@+id/btnLista"

android:layout_width="157dp"

android:layout_height="wrap_content"

android:layout_weight="0.04"

android:onClick="mostrarLista"

android:text="Ver Lista (ListView)" />

<Button

android:id="@+id/btnGridView"

android:layout_width="153dp"

android:layout_height="wrap_content"

android:onClick="mostrarListaGridView"

android:text="Ver Lista (GridView)" />

[...]

4) Se creará un Clase llamada «Articulos» con los métodos get y set, que heredará de la Clase SugarRecord para crear una entidad persistente con la API Sugar ORM:

Articulos/src/com.ListView.articulos/Articulos.java

public class Articulos extends SugarRecord<Articulos>{
	
	private String producto;
	private String cantidad;

[...]
	
[...]
	
	public String getProducto() {
		return producto;
	}
	
	public void setProducto(String producto) {
		this.producto = producto;
	}

[...]

public class Articulos extends SugarRecord<Articulos>{

private String producto;

private String cantidad;

[...]

public String getProducto() {

return producto;

}

public void setProducto(String producto) {

this.producto = producto;

}

[...]

5) Se crearán las Clases MiAdaptador y MiAdaptadorGridView, que heredarán de la Clase BaseAdapter, e implementarán la lógica de los elementos que se mostrarán en los componentes ListView y GridView definidos, y la vista que se construirá en cada ítem de la lista o cuadrícula bidimensional:

Articulos/src/com.ListView.articulos/MiAdaptador.java

[...]

public class MiAdaptador extends BaseAdapter {

     private final Activity actividad;
     private final List<Articulos> articulos;

[...]

[...]

public class MiAdaptador extends BaseAdapter {

private final Activity actividad;

private final List<Articulos> articulos;

[...]

Función que se encargará de definir los controles que van a construirse en cada ítem del control ListView

@Override
	public View getView(final int position, View convertview, ViewGroup 	parent) {		
		
			View v = convertview;
			ViewHolder vista = new ViewHolder();
			
			if(convertview == null)
			{
				LayoutInflater inflater = actividad.getLayoutInflater();
				final Articulos articulo_clase = articulos.get(position);				
			
				v = inflater.inflate(R.layout.activity_mi_adaptador,parent,false);
				
				vista.txtProducto = (TextView)v.findViewById(R.id.txtCompra);
				vista.txtCantidad = (TextView)v.findViewById(R.id.txtCantidad);			
				
				vista.txtProducto.setText(articulo_clase.getProducto());
				vista.txtCantidad.setText(articulo_clase.getCantidad() + " unidades");				
			}
			else
			{
				vista = (ViewHolder) v.getTag();
			}			
		return v;
	}

[...]

@Override

public View getView(final int position, View convertview, ViewGroup parent) {

View v = convertview;

ViewHolder vista = new ViewHolder();

if(convertview == null)

{

LayoutInflater inflater = actividad.getLayoutInflater();

final Articulos articulo_clase = articulos.get(position);

v = inflater.inflate(R.layout.activity_mi_adaptador,parent,false);

vista.txtProducto = (TextView)v.findViewById(R.id.txtCompra);

vista.txtCantidad = (TextView)v.findViewById(R.id.txtCantidad);

vista.txtProducto.setText(articulo_clase.getProducto());

vista.txtCantidad.setText(articulo_clase.getCantidad() + " unidades");

}

else

{

vista = (ViewHolder) v.getTag();

}

return v;

}

[...]

Clase estática dónde se declaran los controles que se enlazarán a los recursos declarados en el Layout

static class ViewHolder {
       public TextView txtCantidad;
       public TextView txtProducto;
}

static class ViewHolder {

public TextView txtCantidad;

public TextView txtProducto;

}

Articulos/src/com.ListView.articulos/MiAdaptadorGridView.java
Esta Clase funciona exactamente igual que la definida para el componente ListView, a excepción de que en el componente GridView hemos añadido una imagen dentro de cada celda de la cuadrícula.

[...]

public class MiAdaptadorGridView extends BaseAdapter {

     private final Activity actividad;
     private final List<Articulos> articulos;

[...]

[...]
     @Override
     public View getView(final int position, View convertview, ViewGroup parent) {

          [...]

          vista.icon_Android = (ImageView)v.findViewById(R.id.imageView1);

          [...]
     }

[...]

static class ViewHolder {

     public TextView txtCantidad;
     public TextView txtProducto;
     public ImageView icon_Android;
     }
}

[...]

public class MiAdaptadorGridView extends BaseAdapter {

private final Activity actividad;

private final List<Articulos> articulos;

[...]

@Override

public View getView(final int position, View convertview, ViewGroup parent) {

[...]

vista.icon_Android = (ImageView)v.findViewById(R.id.imageView1);

[...]

}

[...]

static class ViewHolder {

public TextView txtCantidad;

public TextView txtProducto;

public ImageView icon_Android;

}

Articulos/res/layout/activity_mi_adaptador.xml

[...]

    <TextView
        android:id="@+id/txtCompra"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Registro Vacío" />

    <TextView
        android:id="@+id/txtCantidad"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/txtCompra"
        android:layout_alignBottom="@+id/txtCompra"
        android:layout_alignParentRight="true"
        android:layout_marginRight="50dp"
        android:text="Registro Vacío" />

[...]

[...]

<TextView

android:id="@+id/txtCompra"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:text="Registro Vacío" />

<TextView

android:id="@+id/txtCantidad"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignBaseline="@+id/txtCompra"

android:layout_alignBottom="@+id/txtCompra"

android:layout_alignParentRight="true"

android:layout_marginRight="50dp"

android:text="Registro Vacío" />

[...]

Articulos/res/layout/activity_mi_adaptador_grid_view.xml

[...]

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:src="@android:drawable/sym_def_app_icon" />

    <TextView
        android:id="@+id/txtCompra"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:gravity="center"
        android:text="Registro Vacío"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/txtCantidad"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:gravity="center"
        android:text="Registro Vacío"
        android:textColor="@android:color/black" />

[...]

[...]

<ImageView

android:id="@+id/imageView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

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

<TextView

android:id="@+id/txtCompra"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:gravity="center"

android:text="Registro Vacío"

android:textColor="@android:color/black" />

<TextView

android:id="@+id/txtCantidad"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:gravity="center"

android:text="Registro Vacío"

android:textColor="@android:color/black" />

[...]

6) Por último se crearán las Activities encargadas de mostrar los componentes ListView y GridView. A diferencia de la Activity que define el control GridView, la Activity ListView debe heredar de ListActivity:

Articulos/src/com.ListView.articulos/ListaArticulos.java

[...]

	public class ListaArticulos extends ListActivity {

	private ListView listaArticulos;
	private MiAdaptador miadapter;

	[...]
	
	[...]				
		listaArticulos = (ListView)findViewById(android.R.id.list);	

		List<Articulos> lista_articulos = Select.from(Articulos.class).orderBy("producto").list();
        	miadapter = new MiAdaptador(ListaArticulos.this,lista_articulos); listaArticulos.setAdapter(miadapter);
        
        //Evento lanzado al realizar click sobre uno de los ítem de la lista
        listaArticulos.setOnItemClickListener(new OnItemClickListener() {
        	
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position,long id) {
				TextView producto_seleccionado = (TextView)findViewById(R.id.txtProductoSeleccionado);
				Articulos articulo = (Articulos)parent.getItemAtPosition(position);
				producto_seleccionado.setText(articulo.getProducto());
				Toast.makeText(ListaArticulos.this, "Ha seleccionado: " + articulo.getProducto(), 3000).show();				
			}
		});
		}
	}

[...]

public class ListaArticulos extends ListActivity {

private ListView listaArticulos;

private MiAdaptador miadapter;

[...]

listaArticulos = (ListView)findViewById(android.R.id.list);

List<Articulos> lista_articulos = Select.from(Articulos.class).orderBy("producto").list();

miadapter = new MiAdaptador(ListaArticulos.this,lista_articulos); listaArticulos.setAdapter(miadapter);

//Evento lanzado al realizar click sobre uno de los ítem de la lista

listaArticulos.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position,long id) {

TextView producto_seleccionado = (TextView)findViewById(R.id.txtProductoSeleccionado);

Articulos articulo = (Articulos)parent.getItemAtPosition(position);

producto_seleccionado.setText(articulo.getProducto());

Toast.makeText(ListaArticulos.this, "Ha seleccionado: " + articulo.getProducto(), 3000).show();

}

});

}

Articulos/src/com.ListView.articulos/ListaArticulosGridView.java

[...]

	public class ListaArticulosGridView extends Activity {
	
	private GridView listaArticulos;
	private MiAdaptadorGridView miadapter;

	[...]	
							
		listaArticulos = (GridView)findViewById(R.id.gridview);			
		
		List<Articulos> lista = Select.from(Articulos.class).orderBy("producto").list();		
        	miadapter = new MiAdaptadorGridView(ListaArticulosGridView.this,lista);              
        	listaArticulos.setAdapter(miadapter);
        
        //Evento lanzado al realizar click sobre uno de los ítem de la cuadrícula
        listaArticulos.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View vew, int position,long arg3) {
				TextView producto_seleccionado = (TextView)findViewById(R.id.txtProductoSeleccionado);
				Articulos articulo = (Articulos)parent.getItemAtPosition(position);
				producto_seleccionado.setText(articulo.getProducto());
				Toast.makeText(ListaArticulosGridView.this, "Ha seleccionado: " + articulo.getProducto(), 3000).show();							
			}
		  });        
		}
	}

[...]

[...]

public class ListaArticulosGridView extends Activity {

private GridView listaArticulos;

private MiAdaptadorGridView miadapter;

[...]

listaArticulos = (GridView)findViewById(R.id.gridview);

List<Articulos> lista = Select.from(Articulos.class).orderBy("producto").list();

miadapter = new MiAdaptadorGridView(ListaArticulosGridView.this,lista);

listaArticulos.setAdapter(miadapter);

//Evento lanzado al realizar click sobre uno de los ítem de la cuadrícula

listaArticulos.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View vew, int position,long arg3) {

TextView producto_seleccionado = (TextView)findViewById(R.id.txtProductoSeleccionado);

Articulos articulo = (Articulos)parent.getItemAtPosition(position);

producto_seleccionado.setText(articulo.getProducto());

Toast.makeText(ListaArticulosGridView.this, "Ha seleccionado: " + articulo.getProducto(), 3000).show();

}

});

}

[...]

Articulos/res/layout/activity_lista_articulos.xml

[...]
    
        <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="224dp"
            android:layout_weight="0.29"
            android:cacheColorHint="@android:color/transparent"
            android:divider="@android:color/black"
            android:dividerHeight="3dp"
            android:scrollbarStyle="outsideOverlay" >
        </ListView>
        
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:layout_weight="0.60"
            android:paddingTop="10dp"
            android:scaleType="fitCenter"
            android:src="@raw/g4582" />

[...]

[...]

<ListView

android:id="@android:id/list"

android:layout_width="match_parent"

android:layout_height="224dp"

android:layout_weight="0.29"

android:cacheColorHint="@android:color/transparent"

android:divider="@android:color/black"

android:dividerHeight="3dp"

android:scrollbarStyle="outsideOverlay" >

</ListView>

<ImageView

android:layout_width="match_parent"

android:layout_height="15dp"

android:layout_weight="0.60"

android:paddingTop="10dp"

android:scaleType="fitCenter"

android:src="@raw/g4582" />

[...]

Articulos/res/layout/activity_lista_articulos_grid_view.xml

[...]

        <TextView
            android:id="@+id/txtProductoSeleccionado"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Registro Vacío"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <GridView
            android:id="@+id/gridview"
            android:layout_width="match_parent"
            android:layout_height="224dp"
            android:layout_weight="0.29"
            android:background="@drawable/fondo_seleccionado"
            android:cacheColorHint="@android:color/transparent"
            android:divider="@android:color/black"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:numColumns="auto_fit"
            android:paddingBottom="10dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"                      
            android:verticalSpacing="10dp" >

        </GridView>

[...]

[...]

<TextView

android:id="@+id/txtProductoSeleccionado"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Registro Vacío"

android:textAppearance="?android:attr/textAppearanceLarge" />

<GridView

android:id="@+id/gridview"

android:layout_width="match_parent"

android:layout_height="224dp"

android:layout_weight="0.29"

android:background="@drawable/fondo_seleccionado"

android:cacheColorHint="@android:color/transparent"

android:divider="@android:color/black"

android:gravity="center"

android:horizontalSpacing="10dp"

android:numColumns="auto_fit"

android:paddingBottom="10dp"

android:paddingLeft="10dp"

android:paddingRight="10dp"

android:paddingTop="10dp"

android:verticalSpacing="10dp" >

</GridView>

[...]

Descarga de Proyecto

Descarga el código de este caso práctico (formato zip: 1,5 MB)

Descargar

Academia Android

Esta entrada tiene un comentario

Nuevas suscripciones Premium | Academia Android dice:

18/06/2014 a las 10:18 am

[…] mes desde el lanzamiento de la Web, hemos puesto en marcha las suscripciones Premium, con los primeros contenidos ya publicados. Podrás suscribirte como usuario registrado de la Academia Android por solo 6€ mensuales, lo […]

Los comentarios están cerrados.

Caso práctico con Sugar ORM, ListView y GridView

Descarga de Proyecto

Share This

Academia Android

Entradas relacionadas

Esta entrada tiene un comentario