Sé que van contra el tiempo, tratando de desarrollar sin premura así que el día de hoy les dejo un paso a paso para implementar un ListView en una aplicación Android. (5 Pasos en realidad) Que pueden copiar y pegar o analizar primero y luego implementar.
Paso 1: Creamos el modelo Contacto
Sé lo que estas pensando. Esperabas encontrar el código que te permita mostrar un ListView.
Pues te diré que tenemos que ir por partes, es decir antes de mostrar un ListView tienes que definir un modelo de Datos, que nos permita crear una colección de la misma.
El siguiente código implementa una clase Contacto, con su constructor y un función adicional que retorne datos de ejemplo:
package info.rayrojas.myapplication.models;
import java.util.ArrayList;
public class Contacto {
public String phone;
public String nickname;
public Contacto(String _phone, String _nickname) {
this.phone = _phone;
this.nickname = _nickname;
}
public static ArrayList getCollection() {
ArrayList<Contacto> collection = new ArrayList<>();
collection.add(new Contacto("981999923", "Bichito"));
collection.add(new Contacto("9859913923", "Plaga"));
collection.add(new Contacto("981914213", "Libelula"));
return collection;
}
}Así mismo te preguntas donde colocar esta porción de código y en que archivo definirlo, así que te dejo una captura de pantalla para no complicarte.
Paso 2: Creamos el Layout de un Item
Bien, ya definimos el modelo de datos y la colección que mostraremos en nuestro ListView.
Lo siguiente es desarrollar una pequeña interfaz (un item del ListView) que mostrará nuestros datos en pantalla.
<?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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="20dp"
android:paddingBottom="10dp">
<TextView
android:id="@+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="xD"
android:textSize="24sp"></TextView>
<TextView
android:id="@+id/nickname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="xDx"></TextView>
</LinearLayout>
</LinearLayout>Esto lo crearemos dentro de res/layout, tal se como se muestra en pantalla:
Paso 3: Creamos el Adaptador que realiza la iteración de items
Habiendo construido tanto modelo como layout, es hora de unir estos dos recursos en un tercero. El Adaptador, que es el objeto que realiza las iteraciones de nuestra colección. Así mismo es quien dice que layout utilizará cada item.
package info.rayrojas.myapplication.adapters;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import java.util.List;
import info.rayrojas.myapplication.R;
import info.rayrojas.myapplication.models.Contacto;
public class ContactoAdaptador extends ArrayAdapter<Contacto> {
Context context;
private class ViewHolder {
TextView phone;
TextView nickname;
private ViewHolder() {
}
}
public ContactoAdaptador(Context context, List<Contacto> items) {
super(context, 0, items);
this.context = context;
}
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
final Contacto rowItem = (Contacto) getItem(position);
LayoutInflater mInflater = (LayoutInflater) this.context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = mInflater.inflate(R.layout.contacto_item, null);
holder = new ViewHolder();
holder.phone = (TextView) convertView.findViewById(R.id.phone);
holder.nickname = (TextView) convertView.findViewById(R.id.nickname);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.phone.setText(rowItem.phone);
holder.nickname.setText(rowItem.nickname);
return convertView;
}
}Quedaria algo como lo siguiente:
Paso 4: Editamos el Layout donde irá nuestro ListView
Layout? otra vez? No, no confundamos el Layout Item del ListView con el Layout del activity. Pues este último es quien contendrá a nuestro ListView.
Así mismo, como se muestra en el código le asignamos un ID para trabajar con él.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ListView
android:id="@+id/contactosList"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</androidx.constraintlayout.widget.ConstraintLayout>Dejo una captura también para su entendimiento:
Paso 5: Editamos el Activity asociado al Layout que contiene el ListView
Cansado? aún no terminamos. Pero estamos cerca. Pues vamos a utilizar el Adaptador creado en el Paso 3.
package info.rayrojas.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import info.rayrojas.myapplication.adapters.ContactoAdaptador;
import info.rayrojas.myapplication.models.Contacto;
public class MainActivity extends AppCompatActivity {
ListView contactosList;
ContactoAdaptador contactoAdaptador;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contactosList = findViewById(R.id.contactosList);
contactoAdaptador = new ContactoAdaptador(this, Contacto.getCollection());
contactosList.setAdapter(contactoAdaptador);
}
}
Felicidades! Hemos completado los 5 pasos y orgullosamente podemos ejecutar nuestro proyecto para obtener una pantalla como la siguiente:
Espero haber contribuido con lo que estabas buscando 😀 Además te dejo el link de la documentación de Android Developers para mayor información. También te dejo el link de un articulo que habla de hosting gratuito :P. Sin mas que decir me despido. Gracias.