Lista con imágenes Android nativo (ListView)
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.
el codigo fuente donde esta?
ResponderEliminarTe doy el link para que lo puedas descargar
Eliminarhttps://bitbucket.org/jcmolanoro/hablemosdeandroid/downloads/EjemploListaConImagenes.zip
no hay forma de cargar las imagenes desde internet?
ResponderEliminarSi claro con new URL y Bitmap
EliminarComo se hace eso desde new URL y Bitmap
Eliminarte sugiero revises el tutorial de Cargar imagen en Android Nativo desde la web
Eliminarhttp://www.hablemosdeandroid.com/2016/05/cargar-imagen-en-android-nativo-desde.html
en donde explico el uso de new URL