miércoles, 25 de marzo de 2015

Etiquetas: , , , , , , , , , , ,

Lista con imágenes Android nativo (ListView)

android android developer Android nativo android studio desarrollo Diseño gráfico Lista con imagenes Lista personalizada ListView adaptable plantillas Android programación tutorial

En esté tutorial del voy ha explicar de forma sencilla como trabajar las listas (ListView) de Android y darles una personalización para adaptarlas al diseño de nuestra app, como todos sabes y si no les cuento que por defecto Android tiene estilos específicos para cada elemento que encontramos en su entorno. Por ello es un poco mas complejo realizar aplicaciones con diseños únicos.

¿Que son la ListView en Android?

ListView es un grupo de la vista que muestra una lista de elementos desplazables. Los elementos de la lista se insertan automáticamente a la lista utilizando un adaptador que tira el contenido de una fuente tal como una consulta de matriz o base de datos y convierte cada elemento resulta en una vista que se coloca en la lista.

Bueno entendiendo un poco como funcionan las listas en Android vamos haber como hacer una lista personalizada con imágenes, lo primero que vamos hacer es crear un nuevo proyecto en Android Studio recuerda que en tutoriales anteriores hemos dicho como hacerlo sin embargo si no lo recuerdas podrás ver el video.

Una vez creado el proyecto en Android vamos a ir a nuestro xml activity.main.xml, creamos el elemento de tipo ListView con el id ContenlistView

activity.main.xml



<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    
<TextView android:text="Lista Con imagenes" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/layoutMain" />

    
<ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ContenlistView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


</RelativeLayout>


Ahora vamos ha crear un nuevo xml llamado lista_formato.xml que va hacer nuestra nueva vista adaptada de nuestra lista o ListView, en esté xml vamos ha crear un elemento de tipo ImageView para colocar el icono o imagen del ítem de la lista, también creamos TextView para colocar el titulo del ítem.

lista_formato.xml



<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    
<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="79dp"
        android:background="#ffff660d"
        android:id="@+id/layoutListaFormato">

        
<ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/iconLista"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:src="@mipmap/ic_launcher"
            android:layout_margin="10dp" />

        
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/tituloLista"
            android:layout_alignTop="@+id/iconLista"
            android:layout_toRightOf="@+id/iconLista"
            android:layout_toEndOf="@+id/iconLista"
            android:layout_marginTop="10dp" />
    
</RelativeLayout>

</LinearLayout>

en el MainActivity.java, vamos a crear dos arreglos uno para los títulos y el otro para las imágenes, hacemos el llamado de la clase adapter que posteriormente vamos a crear y en el onCreate instanciamos ContenlistView, después le enviamos a la clase del adapter los parámetros para que nos construya las lista adaptada, por ultimo se crea el evento de setOnItemClickListener que es el encargado de reconocer el click sobre el ítem.

MainActivity.java

package android.ejemplo.com.ejemplolistaconimagenes;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    ListaAdapter adapter;

    String[] titulo = new String[]{
            "Home",
            "Fotos",
            "Contacto",
    };

    int[] imagenes = {
            R.drawable.home,
            R.drawable.fotos,
            R.drawable.contacto
    };

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

        final ListView lista = (ListView) findViewById(R.id.ContenlistView);
        adapter = new ListaAdapter(this, titulo, imagenes);
        lista.setAdapter(adapter);

        lista.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "click sobre " + i, Toast.LENGTH_SHORT).show();
            }
        });

        lista.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "click Largo " + i, Toast.LENGTH_SHORT).show();
                return false;
            }
        });

    }


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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ListaAdapter.java


package android.ejemplo.com.ejemplolistaconimagenes;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by jcmolanoro on 25/03/2015.
 */
public class ListaAdapter extends BaseAdapter {


    // Declare Variables
    Context context;
    String[] titulos;
    int[] imagenes;
    LayoutInflater inflater;

    public ListaAdapter(Context context, String[] titulos, int[] imagenes) {
        this.context = context;
        this.titulos = titulos;
        this.imagenes = imagenes;
    }

    @Override
    public int getCount() {
        return titulos.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        // Declare Variables
        TextView txtTitle;
        ImageView imgImg;

        //http://developer.android.com/intl/es/reference/android/view/LayoutInflater.html
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View itemView = inflater.inflate(R.layout.lista_formato, parent, false);

        // Locate the TextViews in listview_item.xml
        txtTitle = (TextView) itemView.findViewById(R.id.tituloLista);
        imgImg = (ImageView) itemView.findViewById(R.id.iconLista);

        // Capture position and set to the TextViews
        txtTitle.setText(titulos[position]);
        imgImg.setImageResource(imagenes[position]);

        return itemView;
    }
}

En la clase ListaAdapter.java lo que hacemos es extends BaseAdapter para optener las propiedades de un adapter, esta por defecto nos crea las funciones getCount, getItem, getItemId, getView

en la función getView hacemos inflater al xml personalizado de nuestra lista (lista_formato.xml) y he instanciamos los elementos para poder setearlos con el arreglo enviado.

URL DE DESCARGA EjemploListaConImagenes

6 comentarios:

  1. Respuestas
    1. Te doy el link para que lo puedas descargar
      https://bitbucket.org/jcmolanoro/hablemosdeandroid/downloads/EjemploListaConImagenes.zip

      Eliminar
  2. no hay forma de cargar las imagenes desde internet?

    ResponderEliminar
    Respuestas
    1. Como se hace eso desde new URL y Bitmap

      Eliminar
    2. te sugiero revises el tutorial de Cargar imagen en Android Nativo desde la web
      http://www.hablemosdeandroid.com/2016/05/cargar-imagen-en-android-nativo-desde.html
      en donde explico el uso de new URL

      Eliminar

Gracias por compartir tus comentarios con nosotros, si el comentario requiere de alguna respuesta por parte de nosotros, trataremos de responderte lo mas pronto posible.

 

Video tutoriales:

  • Video tutorial lista con imagenes y filtro android nativo
  • Video tutorial Como conectar MySQL con Android android nativo
  • Video tutorial Slider en android nativo
  • Video tutorial Implementación de buscador android nativo
  • Video tutorial Google Map en Android nativo
  • Video tutorial Transiciones entre Activities Android nativo
  • Video tutorial Lista con imágenes Android nativo (ListView)
  • Video tutorial Calificar Aplicación en Android nativo
  • Video tutorial Html5 en proyecto de Android nativo
  • Video tutorial Hacer un menú lateral nativo con Android nativo
  • No te pierdas manten el contacto con nosotros

    Suscríbase aquí para recibir nuestro boletín en tu bandeja de entrada, que es seguro y fácil!

    Copyright © Hablemos de Android™ is a registered trademark.
    Designed by Templateism. Hosted on Blogger Platform.