Pagina Principal

Alexandre Castilla

Hi, my name is xxxx Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Perfil

Welcome to my online portfolio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. I'm taking on freelance work at the moment. Want some help building your software?

WebScript1.es.tl

Lista personalizado Android Studio


Como crear una lista personalizada con Android Studio


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:





WebScript1
Hoy habia 1 visitantes (3 clics a subpáginas) ¡Aqui en esta página!
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis