Para poder realizar el siguiente tutorial es necesario tener un conocimiento básico de las funcionalidades del android studio, esto con el fin de evitar algunos percances.
Lo primero que tenemos que hacer es tener creado ya el proyecto en la cual deseamos implementar la lista personalizada , en este caso usaremos un proyecto nuevo , el cual tiene una sola actividad el cual es la siguiente:
Sobre dicha actividad debemos implementar un ListView (Contenedor) el comun xD, una vez implementada nos quedara de la siguiente manera:
Al implementar el ListView hay que colocarle una id el cual servirá como un identificador mas adelante (COMO MUESTRA LA IMAGEN).
Luego tenemos que crear un archivo XML de tipo Layout el cual nos servira como la lista personalizada:
Una ves creado el archivo XML, tenemos que realizar el diseño que tendrá la lista , en este caso aremos una lista referente a webs de tipo ES.TL el cual tendrá el siguiente diseño:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="7dp">
<ImageView
android:id="@+id/imgWeb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/webscript" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="7dp">
<TextView
android:id="@+id/tvTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="WebScript1"
android:textSize="20sp" />
<TextView
android:id="@+id/tvDescripcion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Web dedicado a compartir codigos [Css,Php,Html,Java,Jquery]"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
Como podrán apreciar el diseño es simple, solo cuenta con un ImageView y 2 TextView el cual lo utilizaremos para describir una web, dichos elementos tienen un id el cual los identifica a cada uno de ellos.
Luego tenemos que crear una clase que almacene dichos datos en este caso almacenara un titulo una descripción y una imagen:
package Clases;
/**
* Created by alexandre on 02/02/2018.
*/
public class WebsEsTl {
String titulo;
String descripcion;
int Imagen;
public WebsEsTl(String titulo, String descripcion, int imagen) {
this.titulo = titulo;
this.descripcion = descripcion;
Imagen = imagen;
}
public String getTitulo() {
return titulo;
}
public void setTitulo(String titulo) {
this.titulo = titulo;
}
public String getDescripcion() {
return descripcion;
}
public void setDescripcion(String descripcion) {
this.descripcion = descripcion;
}
public int getImagen() {
return Imagen;
}
public void setImagen(int imagen) {
Imagen = imagen;
}
}
Ahora tendremos que crear una clase adaptador el cual nos ayudara a manejar el diseño que creamos anterior mente , esta clase debe extenderse a la clase BaseAdapter el cual nos nos pedirá incluir los métodos Override para que funcione correctamente.
package Adaptadores;
import android.app.Activity;
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;
import com.example.cesarin.webscript1.R;
import java.util.ArrayList;
import Clases.WebsEsTl;
/**
* Created by Alexandre on 02/02/2018.
*/
public class AdaptadorListaPersonalizada extends BaseAdapter {
protected Activity activity;
protected ArrayList<WebsEsTl> items;
//costructor en el cual enviaremos informacion
public AdaptadorListaPersonalizada(Activity actividad, ArrayList<WebsEsTl> items) {
this.activity = actividad;
this.items = items;
}
@Override
public int getCount() {
return items.size();
}
@Override
public Object getItem(int position) {
return items.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if(convertView == null){
LayoutInflater inf = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inf.inflate(R.layout.lista_perosonalizada, null);
}
//creamos un objeto de la clase WebsEsTl
WebsEsTl objWebs = items.get(position);
//Asignamos los recursos a las variable
TextView titulo = (TextView) v.findViewById(R.id.tvTitulo);
TextView descripcion = (TextView) v.findViewById(R.id.tvDescripcion);
ImageView imagen = (ImageView) v.findViewById(R.id.imgWeb);
//Enviamos informacion a la vista apartir de la informacion que contenga la clase:
titulo.setText(objWebs.getTitulo());
descripcion.setText(objWebs.getDescripcion());
imagen.setImageResource(objWebs.getImagen());
return v;
}
public void addAll(ArrayList<WebsEsTl> Producto){
for (int i= 0; i<Producto.size(); i++) {
items.add(Producto.get(i));
}
}
}
Ahora que ya tenemos el adaptador creado y configurado, tenemos que programar en la actividad principal (Donde creamos el ListView)
package com.example.cesarin.webscript1;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
import Adaptadores.AdaptadorListaPersonalizada;
import Clases.WebsEsTl;
public class principal extends AppCompatActivity {
//creamos la variable para la listView
ListView listaComun;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_principal);
//Asignamos la lista que creamos al principio
listaComun = (ListView) findViewById(R.id.LvPersonalizada);
//creamos las siguientes variables
ArrayList<WebsEsTl> webs = new ArrayList<WebsEsTl>();
//Empezamos a lleanr el arrayList el cual contendra los datos de la webs que deceamos
webs.add(new WebsEsTl("WebScript1","Web dedicado a compartir codigos",R.drawable.webscript));
webs.add(new WebsEsTl("PwgPro","Ofrecemos contenido original, gratuito y de pago para tu web.",R.drawable.pwgpro));
webs.add(new WebsEsTl("CssPlantillas","Web dedicado a compartir recursos web",R.drawable.cssplantillas));
webs.add(new WebsEsTl("Kawaiikingdom","Web dedicado reseñas de animes, juegos y mas",R.drawable.kawaiikindom));
//creamos un objeto del adaptador que creamos al cual le pasaremos los datos para llenar la vista
AdaptadorListaPersonalizada adaptador = new AdaptadorListaPersonalizada(this, webs);
//enviamos a la lista view el objeto adaptador
listaComun.setAdapter(adaptador);
}
}
Una ves concluido todo , al ejecutar la app en un emulador o un celular el resultado sera el siguiente:
Alexandre Castilla