Ejemplos sencillos de Android ListView basados en el trabajo con colecciones y la escucha de varios eventos.
Un ListView es un widget de android que nos permite renderizar una lista de elementos desplazables.
ListView es un adapterview como gridview y spinner. Esto significa que requiere un adaptador para insertar sus elementos. El adaptador se encarga de extraer los datos de una fuente de contenido.
Esta fuente puede ser un array o algo más complejo como una base de datos o desde la red. No sólo eso, sino que el adaptador también será responsable de convertir el resultado de cada elemento en una vista que se colocará en el listview.
Esto se debe a que, como vista adaptadora, la ListView no conoce los detalles, como el tipo y el contenido, de las vistas que contiene. Por lo tanto, pedirá las vistas a petición de un ListAdapter según sea necesario. Por ejemplo, pide estas vistas cuando el usuario se desplaza hacia arriba o hacia abajo.
Cada una de las vistas del ListView se sitúa inmediatamente debajo de la vista anterior de la lista.
Definición de la API de ListView
Esta es la definición de la API de ListView.
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.AdapterView<android.widget.ListAdapter>
↳ android.widget.AbsListView
↳ android.widget.ListViewClaramente puedes ver que ListView reside en el paquete android.widget y deriva de la clase abstracta AbsListView.
¿Cómo mostramos un ListView?
Bueno, para mostrar un ListView todo lo que necesitas es añadir el ListView en el diseño XML.
<ListView
android_id="@+id/list_view"
android_layout_width="match_parent"
android_layout_height="match_parent" />android:id="@+id/list_view"- Estamos asignando un ID al ListView.android:layout_width="match_parent"- Establecemos el ancho de nuestro ListView para que coincida con el del Layout en el que se está renderizando el ListView.-
android:layout_height="match_parent"- Establecemos la altura de nuestro ListView para que coincida con la del Layout en el que se está renderizando el ListView.
Configurando ItemClicks en el ListView simple.
Así es como escucharemos los itemClicks de nuestro ListView, mostrando así un simple mensaje de brindis.
Necesitamos invocar el método setOnItemClickListener() de nuestro ListView y pasarle una clase anónima AdapterView.OnItemClickListener(), y luego anular el método onItemClick().
En este caso pos es la posición del elemento pulsado en el ListView.
myListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int pos, long id) {
Toast.makeText(MainActivity.this, languages.get(i), Toast.LENGTH_SHORT).show();
}
});¿Cómo creamos un adaptador personalizado para el ListView?
Se pueden utilizar varios adaptadores, pero el más utilizado es el BaseAdapter.
private class MyCustomAdapter extends BaseAdapter {
// override other abstract methods here
@Override
public View getView(int position, View convertView, ViewGroup container) {
if (convertView == null) {
convertView = getLayoutInflater().inflate(R.layout.my_list_item, container, false);
}
((TextView) convertView.findViewById(android.R.id.nameTxt))
.setText(getItem(position));
return convertView;
}
}¿Cómo establecemos un adaptador a un ListView?
Establecemos un adaptador a un ListView utilizando el método setAdapter(). Este método es el siguiente:
public void setAdapter (ListAdapter adapter)El método setAdapter() es el responsable de vincular nuestros datos a nuestro ListView.
Necesitamos pasar un adaptador a este método. Este adaptador puede estar envuelto por un WrapperListAdapter, dependiendo de las características del ListView en uso. Por ejemplo, añadir cabeceras y/o pies de página hará que el adaptador sea envuelto.
Un WrapperListAdapter es un adaptador de lista que envuelve a otro adaptador de lista.
|------|-----|
| Adaptador | ListAdapter: El ListAdapter que es responsable de mantener los datos que respaldan esta lista y de producir una vista para representar un elemento de ese conjunto de datos. |
¿Qué atributos XML se definen en la clase ListView?
La mayoría de los atributos XML que utilizarás están definidos en las clases padre como AbsListView, que también hereda de otras clases base como ViewGroup y View.
Sin embargo ListView también tiene definidos los siguientes atributos:
1. android:divider |
Dibujable o color para dibujar entre los elementos de la lista. |
2. android:divider |
Dibujable o color para dibujar entre los elementos de la lista. |
| 3. | Altura del divisor. |
| 4. | Referencia a un recurso de matriz que rellenará el ListView. |
| 5. | Cuando se establece en false, el ListView no dibujará el divisor antes de cada vista de pie de página. |
| 6. | Cuando se establece en falso, el ListView no dibujará el divisor después de cada vista de cabecera. |
¿Con qué tipos de adaptadores se puede utilizar el ListView?
Estos son algunos de los adaptadores que se pueden utilizar con un ListView:
| 1. Adaptador base: una superclase de implementaciones comunes para la interfaz android.widget.Adapter, que implementa las interfaces ListAdapter y SpinnerAdapter. | |
2. ArrayAdapter Es un hijo de BaseAdapter que utiliza un array de objetos arbitrarios como fuente de datos. |
|
| 3. | Un hijo abstracto de BaseAdapter utilizado para exponer los datos de android.database.Cursor a un ListView. |
Ejemplo de ListView simple
Veamos un ejemplo de ListView simple que se encargará de mostrar una lista de lenguajes de programación.
Cuando el usuario hace clic en un solo elemento, el idioma pulsado se muestra en un mensaje Toast.
Ejemplo 1: Android ListView - Fill With Array
Este es un simple tutorial de ListView.Esto es lo que hacemos:
- Llenar ListView con datos de un simple array.
- Utilizamos ArrayAdapter.
-
Manejar ItemClicks.\N-
Android ListView Array Demo #### Nuestra MainActivity
Esta es nuestra [actividad] principal (/android/activity). Esta es nuestra actividad de lanzamiento. Esta clase será el punto de entrada a nuestra aplicación.
Primero definimos nuestro paquete y luego importamos otros paquetes a través de las declaraciones import.
Luego hacemos que nuestra clase derive de AppCompatActivity.
Mantendremos un array que actuará como nuestra fuente de datos:
String[] spacecrafts={"Juno","Hubble","Casini","WMAP","Spitzer","Pioneer","Columbia","Challenger","Apollo","Curiosity"};Pasaremos este array a nuestro constructor arrayadapetr y estableceremos su instancia a nuestro ListView:
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,spacecrafts);
lv.setAdapter(adapter);Veamos el código fuente completo.
public class MainActivity extends AppCompatActivity {
ListView lv;
String[] spacecrafts={"Juno","Hubble","Casini","WMAP","Spitzer","Pioneer","Columbia","Challenger","Apollo","Curiosity"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv= (ListView) findViewById(R.id.lv);
//ADAPTER
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,spacecrafts);
lv.setAdapter(adapter);
//LISTENER
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, spacecrafts[i], Toast.LENGTH_SHORT).show();
}
});
}
}Nuestro diseño XML
Este es el layout de nuestra actividad principal. Es nuestro archivo activity_main.xml.
Utilizamos los siguientes elementos:
- RelativeLayout - Nuestro ViewGroup.
- ListView - Nuestro adapterview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context="com.tutorials.hp.listviewarray.MainActivity">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>Cómo ejecutar
- Descargue el proyecto.
- Obtendrás un archivo comprimido, extráelo.
- Abre el Android Studio.
- Ahora cierra, el proyecto ya abierto.
- Desde la barra de menú haz clic en Archivo >Nuevo> Importar proyecto.
- Ahora elija una Carpeta de Destino, desde donde quiere importar el proyecto.
- Elija un Proyecto Android.
- Ahora haga clic en "Aceptar".
- Listo, ya has terminado de importar el proyecto, ahora edítalo.
Más recursos
| GitHub Browse (Navegar) (https://github.com/Oclemy/ListViewArray) | |
| GitHub Download Link | Download |
Ejemplo 2: Cómo rellenar un ListView desde un ArrayList
Este es un simple tutorial de ListView, esto es lo que hacemos:
- Llenar el ListView con datos de un simple ArrayList.
- Usamos ArrayAdapter.
- Manejar ItemClicks.
Nuestra MainActivity
Esta es nuestra clase MainActivity.
public class MainActivity extends AppCompatActivity {
ArrayList<String> numbers=new ArrayList<>();
ListView lv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv = (ListView) findViewById(R.id.lv);
//FILL DATA
fillData();
//ADAPTER
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, numbers);
lv.setAdapter(adapter);
//LISTENER
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, numbers.get(i), Toast.LENGTH_SHORT).show();
}
});
}
//FILL DATA
private void fillData()
{
for (int i=0;i<10;i++)
{
numbers.add("Number "+String.valueOf(i));
}
}
}Nuestro diseño XML
Este es el diseño de nuestra actividad.
Buen día.
## Ejemplo 2: Android Simple ListView OnItemClick
Este es un ejemplo simple de cómo poblar un [listview](/android/listview) con un arraylist de cadenas y manejar los itemClicks de nuestro ListView.
### Ejemplo
###### MainActivity.java
Aquí está nuestra actividad principal.
Primero especificamos el nombre del paquete, luego añadimos nuestras declaraciones de importación.
Luego creamos nuestra clase MainActivity, haciéndola derivar de AppCompatActivity.
Vamos a mantener un simple arraylist como un campo de instancia, esto mantendrá nuestros datos que vamos a representar en nuestro [listview](/android/listview).
Utilizaremos ArrayAdapter como adaptador.
Esto es lo que vamos a hacer
<!-- 12 -->
```java
###### activity_main.xml
Aquí está el diseño de nuestra actividad principal. Lo llamamos <code>activity_main.xml</code>.
Utilizamos los siguientes elementos:
1. [RelativeLayout](/android/relativelayout) - Nuestro ViewGroup.
2. [ListView](/android/listview) - Nuestro adapterview.
El ListView será el encargado de renderizar nuestros datos.
<!-- 13 -->
```xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context="com.tutorials.hp.simplelistview.MainActivity">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
SECCIÓN 2 : Código fuente
Descargue el código fuente a continuación.
| GitHub Browse (https://github.com/Oclemy/Simple_ListView) | |
| GitHub Download Link | Download |
Ejemplo 3: Cómo poblar un listView a partir de una lista de objetos POJO
Cómo rellenar un simple ListView con una Lista java de POJOs.
En este tutorial vemos como llenar un simple listview con objetos "Persona".Cuando se hace clic se muestra el nombre de la Persona en un mensaje Toast.
Conceptos que aprenderás con este ejemplo
- ¿Qué es un ListView?
- ¿Qué es una colección List?
- Cómo rellenar un ListView a partir de una estructura de datos List de Objetos POJO en android studio.
- Como hacer un simple click listener en un listview.
- ¿Qué es un ArrayAdapter?
- Cómo usar ArrayAdapter para enlazar una lista java a un simple listview.
7. Cómo definir un ListView en un diseño XML.
Se utiliza el objeto ListView como elemento:
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>Cómo referenciar un ListView en código Java
Así es como se hace referencia a un ListView. Se utiliza el método findViewById():
ListView lv= (ListView) findViewById(R.id.lv);(a). Inicialización de una lista en Java
Así es como se puede inicializar una Lista. No se puede instanciar directamente ya que como dijimos es una interfaz:
List<String> people=new ArrayList<>();(b). Cómo borrar una Lista Java
Puedes eliminar todos los elementos de una lista java utilizando el método clear():
people.clear();(c). Cómo rellenar una lista java con objetos
Puedes rellenar una lista java utilizando el método add():
private void fillPeople()
{
Person p=new Person();
p.setName("Mike");
people.add(p.getName());
p=new Person();
p.setName("John");
people.add(p.getName());
.....Lea más sobre java list aquí.
¿Qué es un ArrayAdapter?
Necesitamos un adaptador para trabajar con un listview.
Un adaptador es una clase que actúa como puente entre un adapterview y la fuente de datos subyacente.
En este caso usaremos un ArrayAdapter.
Puedes leer más sobre ArrayAdapter aquí.
1. Demostración del proyecto
Aquí está la demo del ejemplo:
2. Android Studio y la Ceación del Proyecto
(a). ¿Qué es Android Studio?
Utilizaremos Android Studio, el IDE oficial para el desarrollo de android. Android Studio es mantenido por Google y Jetbrains.
Android Studio viene con el Android SDK Manager, que es una herramienta que nos permite descargar los componentes del Android SDK necesarios para desarrollar aplicaciones android.
Para obtener más información sobre Android Studio vaya aquí.
(b). Cómo crear una actividad vacía en Android Studio
- Primero cree un proyecto vacío en android studio. Vaya a Archivo -> Nuevo Proyecto.
- Escribe el nombre de la aplicación y elige el nombre de la empresa.
- Elige el SDK mínimo.
- Elija Actividad vacía.
-
- Hacer clic en Finish.
Esto nos generará un proyecto con lo siguiente:
| 1. | activity_main.xml |
Diseño XML | Se inflará en la vista MainActivity.Aquí añades tus vistas y widgets. |
2. MainActivity.java |
Clase | Nuestro lanzador activity |
Para saber más sobre cómo crear un proyecto android en android studio ir aquí.
(c). Estructura del proyecto generado en Android Stduo
Android Studio te generará un proyecto con configuraciones por defecto a través de un conjunto de archivos y directorios.
2. Recursos.
La plataforma Android proporciona una forma potente y flexible de añadir contenido estático como recurso.
Estos contenidos estáticos también se empaquetarán en el archivo APK. El contenido estático se almacenará como un recurso o como un activo.
Los recursos pertenecen a un tipo determinado. Estos tipos pueden ser:
- Dibujable.
- Trazado.
- Valor.
Empecemos por ver los recursos del layout
(a). activity_main.xml
Este layout se inflará en la interfaz de usuario de la actividad principal. Esto ocurrirá a través del método setContentView() de la actividad que requerirá que le pasemos el layout.
Lo haremos dentro del método onCreate() de Activity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context="com.tutorials.hp.listviewandobjects.MainActivity">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
3. Código Java.
Las aplicaciones Android pueden ser escritas principalmente en Java o Kotlin. Sin embargo, hoy en día hay muchos frameworks como Flutter que también utilizan lenguajes como Dart.
En esta clase estamos utilizando el lenguaje de programación Java.
Tendremos estas clases en nuestro proyecto.
(a). Persona.java
Este es nuestro objeto de datos. Esta clase representará a una sola persona.
Una sola persona tendrá estas propiedades:
id- un Entero. El id de la persona.name- El nombre de la persona. Un String.
Entonces nuestra lista estará compuesta por objetos Persona.
public class Person {
int id;
String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
(b). MainActivity.java
Esta es nuestra actividad de lanzamiento como el nombre sugiere. Esto significa que será el principal punto de entrada a nuestra aplicación en el sentido de que cuando el usuario haga clic en el icono de nuestra aplicación, esta actividad se renderizará primero.
Reemplazamos un método llamado onCreate(). Aquí comenzaremos por inflar nuestro diseño principal a través del método setContentView().
Nuestra actividad principal es en realidad una activity ya que deriva de la AppCompatActivity.
public class MainActivity extends AppCompatActivity {
List<String> people=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//LISTVIEW
ListView lv= (ListView) findViewById(R.id.lv);
//FILL LIST
fillPeople();
//ADAPTER
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,people);
lv.setAdapter(adapter);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, people.get(i), Toast.LENGTH_SHORT).show();
}
});
}
private void fillPeople()
{
people.clear();
Person p=new Person();
p.setName("Mike");
people.add(p.getName());
p=new Person();
p.setName("John");
people.add(p.getName());
p=new Person();
p.setName("Lucy");
people.add(p.getName());
p=new Person();
p.setName("Rebecca");
people.add(p.getName());
p=new Person();
p.setName("Kris");
people.add(p.getName());
p=new Person();
p.setName("Kurt");
people.add(p.getName());
p=new Person();
p.setName("Vin");
people.add(p.getName());
}
}
4. Descargar
Todo está en el código fuente de referencia. Está bien comentado y fácil de entender y se puede descargar a continuación.
También revisa nuestro video tutorial es más detallado y se explica en el paso a paso.
| 1. GitHub [Descarga directa] (https://github.com/Oclemy/ListView_and_Objects/archive/master.zip) | ||
| 2. GitHub: [Examinar] (https://github.com/Oclemy/ListView_and_Objects) | ||
| 3. | YouTube | Nuestro canal de YouTube |
Ejemplo 4: ListView - Cómo escuchar eventos LongClick
Este es un tutorial de android para explorar cómo manejar los eventos longclick en un listview personalizado con imágenes y texto.
Vamos a ello.
1. Crear un proyecto de actividad básica
- Primero cree un nuevo proyecto en android studio. Ve a Archivo -> Nuevo Proyecto.
- Escriba el nombre de la aplicación y elija el nombre de la empresa.
- Elija el SDK mínimo.
- Elija la actividad básica.
- Haga clic en Finalizar.
La actividad básica tendrá una barra de herramientas y un botón de acción flotante ya añadidos en el diseño
2. Dependencias
Realmente no tenemos dependencias externas. En su lugar, simplemente especificamos un par de dependencias de bibliotecas de apoyo.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
implementation `com.android.support:appcompat-v7:23.2.1'
implementation `com.android.support:design:23.2.1'
implementation `com.android.support:cardview-v7:23.2.1'
}3. Crear la interfaz de usuario
Las interfaces de usuario se crean normalmente en android utilizando diseños XML en lugar de codificación java directa.
(a). activity_main.xml
- Este diseño se infla a la interfaz de usuario MainActivity.
- Incluye el content_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.listviewlongclick.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
(b). content_main.xml
Vamos a añadir nuestro ListView aquí.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.listviewlongclick.MainActivity"
tools_showIn="@layout/activity_main">
<ListView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/lv"
android_layout_alignParentLeft="true"
android_layout_alignParentStart="true" />
</RelativeLayout>
(c). model.xml
Este layout definirá el modelo de filas personalizado para nuestro ListView.
En este caso nuestro ListView tendrá imágenes y texto.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="10dp"
card_view_cardCornerRadius="10dp"
card_view_cardElevation="10dp"
android_layout_height="wrap_content">
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent">
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/movieImage"
android_padding="10dp"
android_src="@drawable/ghost" />
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Name"
android_id="@+id/nameTxt"
android_padding="10dp"
android_textColor="@color/colorAccent"
android_layout_below="@+id/movieImage"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text=" John Doe a former FBI Agent and now Physics teacher .is wrongly accussed of murdering an innocent child.He makes it his business to find the bad guys who did taht.He convinces hacker Aram to join him.....
"
android_id="@+id/descTxt"
android_padding="10dp"
android_layout_below="@+id/nameTxt"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceMedium"
android_text="TV Show"
android_id="@+id/posTxt"
android_padding="10dp"
android_layout_below="@+id/movieImage"
android_layout_alignParentRight="true" />
<CheckBox
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/chk"
android_layout_alignParentRight="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>Pasemos ahora a nuestras clases Java:
4. Película.java
Nuestro objeto de datos. Representará una sola película.
package com.tutorials.hp.listviewlongclick;
public class Movie {
private String name;
private int image;
public Movie(String name, int image) {
this.name = name;
this.image = image;
}
public String getName() {
return name;
}
public int getImage() {
return image;
}
}
5. ItemLongClickListener.java
Nuestra interfaz de escucha de clics largos.
public interface ItemLongClickListener {
void onLongItemClick(View v);
}
6. MyViewHolder.java
Contendrá nuestros widgets para ser reciclados.
public class MyViewHolder implements View.OnLongClickListener {
ImageView img;
TextView nameTxt;
ItemLongClickListener itemLongClickListener;
public MyViewHolder(View v) {
img= (ImageView) v.findViewById(R.id.movieImage);
nameTxt= (TextView) v.findViewById(R.id.nameTxt);
v.setOnLongClickListener(this);
}
public void setItemLongClickListener(ItemLongClickListener ic)
{
this.itemLongClickListener=ic;
}
@Override
public boolean onLongClick(View v) {
this.itemLongClickListener.onLongItemClick(v);
return false;
}
}
7. CustomAdapter.java
Inflará nuestro model.xml y vinculará los datos a las vistas resultantes.
public class CustomAdapter extends BaseAdapter {
Context c;
ArrayList<Movie> movies;
LayoutInflater inflater;
public CustomAdapter(Context c, ArrayList<Movie> movies) {
this.c = c;
this.movies = movies;
}
@Override
public int getCount() {
return movies.size();
}
@Override
public Object getItem(int position) {
return movies.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
//SHALL RETURN A ROW
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if(inflater==null)
{
inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
//CONVERT FROM XML TO JAVA
if(convertView==null)
{
convertView=inflater.inflate(R.layout.model,parent,false);
}
//BIND DATA TO VIEWS
MyViewHolder holder=new MyViewHolder(convertView);
holder.nameTxt.setText(movies.get(position).getName());
holder.img.setImageResource(movies.get(position).getImage());
holder.setItemLongClickListener(new ItemLongClickListener() {
@Override
public void onLongItemClick(View v) {
Toast.makeText(c,movies.get(position).getName(),Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
}
8. MainActivity.java
Nuestra actividad principal.
public class MainActivity extends AppCompatActivity {
ListView lv;
CustomAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
lv= (ListView) findViewById(R.id.lv);
adapter=new CustomAdapter(this,getMovies());
//SET ADAPTER
lv.setAdapter(adapter);
}
private ArrayList<Movie> getMovies() {
//COLECTION OF CRIME MOVIES
ArrayList<Movie> movies=new ArrayList<>();
Movie movie=new Movie("Shuttle Carrier",R.drawable.shuttlecarrier);
//ADD ITR TO COLLECTION
movies.add(movie);
movie=new Movie("Fruts",R.drawable.fruits);
movies.add(movie);
movie=new Movie("Breaking Bad",R.drawable.breaking);
movies.add(movie);
movie=new Movie("Crisis",R.drawable.crisis);
movies.add(movie);
movie=new Movie("Ghost Rider",R.drawable.rider);
movies.add(movie);
movie=new Movie("Star Wars",R.drawable.starwars);
movies.add(movie);
movie=new Movie("BlackList",R.drawable.red);
movies.add(movie);
movie=new Movie("Men In Black",R.drawable.meninblack);
movies.add(movie);
movie=new Movie("Game Of Thrones",R.drawable.thrones);
movies.add(movie);
return movies;
}
}
Descargar código
| GitHub Browse | Download |
Ejemplo 4: Android Custom ListView Master Detail [Abrir nueva actividad]
**Hoy hablaremos de la interfaz Android Custom ListView Master Detail.
Nuestro ListView tendrá imágenes y texto.
SECCIÓN 1 : Nuestra actividad principal
Esta es nuestra [actividad] principal (/android/activity).
Es nuestra vista maestra.
La vista maestra mostrará un ListView con objetos Player.
public class MainActivity extends Activity {
ListView lv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv=(ListView) findViewById(R.id.listView1);
//ADAPTER
CustomAdapter adapter=new CustomAdapter(this);
lv.setAdapter(adapter);
//EVENTS
lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View v, int pos,
long id) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(), PlayerActivity.class);
//PASS INDEX OR POS
i.putExtra("Position", pos);
startActivity(i);
}
});
}SECCIÓN 2 : Nuestra DetailActivity
Este es nuestro detalle actividad.
Esta clase mostrará los detalles de un solo objeto jugador.
public class PlayerActivity extends Activity {
int pos=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_player);
//GET PASSED DATA
Intent i=getIntent();
pos=i.getExtras().getInt("Position");
//GET VIEWS
final CustomAdapter adapter=new CustomAdapter(this);
final ImageView img=(ImageView) findViewById(R.id.imageView1);
final TextView nameTv=(TextView)findViewById(R.id.nameTxt);
final TextView goalTv=(TextView) findViewById(R.id.goalTxt);
//SET DATA
img.setImageResource(adapter.images[pos]);
nameTv.setText(adapter.names[pos]);
goalTv.setText(adapter.goals[pos]);
Button nextBtn=(Button) findViewById(R.id.button1);
//NEXT CLICKED
nextBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
int position=pos+1;
//set data
img.setImageResource(adapter.images[position]);
nameTv.setText("Name: "+adapter.names[position]);
goalTv.setText("Goals: "+adapter.goals[position]);
if(!(position>=adapter.getCount()-1))
{
pos +=1;
}else
{
pos = -1;
}
}
});
}
}SECCIÓN 3 : Nuestro CustomAdapter:
Esta es nuestra clase adaptadora.
Esta clase derivará de la clase android.widget.BaseAdapter.
Como adaptador será responsable de inflar primero nuestro model.xml en un objeto de vista. A continuación, vinculará los datos a esa vista inflada.
También escucharemos los eventos de clic para esa vista y luego abriremos el detalle activity.
public class CustomAdapter extends BaseAdapter {
private Context c;
String[] names={"Michael Carrick","Diego Costa","Ander Herera","Juan Mata","Oscar","Aaron Ramsey","Wayne Rooney","Alexis Sanchez","Van Persie"};
String[] goals={"3","25","9","11","9","11","14","18","13"};
int[] images={R.drawable.carrick,R.drawable.costa,R.drawable.herera,R.drawable.mata,R.drawable.oscar,R.drawable.ramsey,R.drawable.rooney,R.drawable.sanchez,R.drawable.vanpersie};
; public CustomAdapter(Context ctx) {
// TODO Auto-generated constructor stub
this.c=ctx;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return names.length;
}
@Override
public Object getItem(int pos) {
// TODO Auto-generated method stub
return names[pos];
}
@Override
public long getItemId(int pos) {
// TODO Auto-generated method stub
return pos;
}
@Override
public View getView(int pos, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
if(convertView==null)
{
LayoutInflater inflater=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView=inflater.inflate(R.layout.player, null);
}
//GET VIEWS
TextView nameTxt=(TextView) convertView.findViewById(R.id.nameTv);
TextView goalsTxt=(TextView) convertView.findViewById(R.id.goalsTv);
ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);
//SET DATA
nameTxt.setText(names[pos]);
goalsTxt.setText(goals[pos]);
img.setImageResource(images[pos]);
return convertView;
}
}SECCIÓN 4 : Nuestro Layout de la MainActivity
Este diseño será inflar en la interfaz de usuario para nuestra actividad principal.
Este diseño contendrá un ListView.
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context=".MainActivity" >
<ListView
android_id="@+id/listView1"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_alignParentTop="true" >
</ListView>
</RelativeLayout>SECCIÓN 5 : Nuestro diseño DetailActivity
Este es nuestro detalle actividad diseño. Contendrá un imageview, un textview y un botón.
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context=".PlayerActivity" >
<ImageView
android_id="@+id/imageView1"
android_layout_width="190dp"
android_layout_height="275dp"
android_layout_alignParentTop="true"
android_scaleType="fitCenter"
android_src="@drawable/carrick" />
<Button
android_id="@+id/button1"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentBottom="true"
android_layout_alignParentRight="true"
android_text="Next" />
<TextView
android_id="@+id/goalTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_below="@+id/nameTxt"
android_layout_marginTop="24dp"
android_text="Goals : "
android_textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android_id="@+id/textView1"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_below="@+id/imageView1"
android_text="PLAYER PROFILE"
android_textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android_id="@+id/nameTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_below="@+id/textView1"
android_layout_marginTop="17dp"
android_text="Name"
android_textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>SECCIÓN 6: Nuestro RowModel Layout
Este es nuestro modelo de fila listview personalizado.
Define cómo aparecerá cada fila del Listview.
En este caso tenemos un imageview y dos textviews.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_orientation="horizontal" >
<TextView
android_id="@+id/nameTv"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentTop="true"
android_layout_marginLeft="28dp"
android_layout_toRightOf="@+id/imageView1"
android_text="Name"
android_textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android_id="@+id/goalsTv"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignBottom="@+id/imageView1"
android_layout_alignLeft="@+id/nameTv"
android_layout_marginBottom="16dp"
android_text="Goals"
android_textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android_id="@+id/imageView1"
android_layout_width="65dp"
android_layout_height="71dp"
android_layout_alignParentLeft="true"
android_layout_alignParentTop="true"
android_layout_marginLeft="26dp"
android_padding="10dp"
android_src="@drawable/herera" />
</RelativeLayout>SECCIÓN 7 : Nuestro Manifiesto
Este es nuestro mainfest de android. Asegúrate de que nuestras dos actividades están registradas.
<?xml version="1.0" encoding="utf-8"?>
<manifest
package="com.example.listviewmasterdetail"
android_versionCode="1"
android_versionName="1.0" >
<uses-sdk
android_minSdkVersion="19"
android_targetSdkVersion="19" />
<application
android_allowBackup="true"
android_icon="@drawable/ic_launcher"
android_label="@string/app_name"
android_theme="@style/AppTheme" >
<activity
android_name="com.example.listviewmasterdetail.MainActivity"
android_label="@string/app_name" >
<intent-filter>
<action android_name="android.intent.action.MAIN" />
<category android_name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android_name="com.example.listviewmasterdetail.PlayerActivity"
android_label="@string/title_activity_player" >
</activity>
</application>
</manifest>Ejemplo 5: Android ListView - CRUD - ADD UPDATE DELETE.
Hola.Vemos como realizar operaciones CRUD básicas contra un arraylist y un ListView.
- Add Update y Delete contra un ArrayList y un ListView.
- Trabajamos con ArrayAdapter.
-
Manejamos los ItemClicks y los datos de entrada de un diálogo.
Android ListView CRUD #### 1. Nivel de la aplicación Build.Gradle
- Añadir las dependencias de las librerías AppCompat y Design support.
- Nuestra MainActivity derivará de AppCompatActivity mientras que también utilizaremos Floating action button de las librerías de soporte de diseño.
apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "com.tutorials.hp.listview_crud"
minSdkVersion 15
targetSdkVersion 24
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
implementation `com.android.support:appcompat-v7:24.1.1'
implementation `com.android.support:design:24.1.1'
}
2. CRUD.java
- Añade, actualiza y elimina datos. Responsable de realizar las operaciones CRUD.
public class CRUD {
private ArrayList<String> names =new ArrayList<>();
public void save(String name)
{
names.add(name);
}
public ArrayList<String> getNames()
{
return names;
}
public Boolean update(int position,String newName)
{
try {
names.remove(position);
names.add(position,newName);
return true;
}catch (Exception e)
{
e.printStackTrace();
return false;
}
}
public Boolean delete(int position)
{
try {
names.remove(position);
return true;
}catch (Exception e)
{
e.printStackTrace();
return false;
}
}
}
3. MainActivity.java
- Actividad lanzadora.
- ActivityMain.xml inflado como el contentview para esta actividad.
- Hace referencia a nuestro ListView.
public class MainActivity extends AppCompatActivity {
ListView lv;
ArrayAdapter<String> adapter;
CRUD crud=new CRUD();
Dialog d;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
lv= (ListView) findViewById(R.id.lv);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
if(d != null) {
if(!d.isShowing())
{
displayInputDialog(i);
}else
{
d.dismiss();
}
}
}
});
final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
displayInputDialog(-1);
}
});
}
private void displayInputDialog(final int pos)
{
d=new Dialog(this);
d.setTitle("LISTVIEW CRUD");
d.setContentView(R.layout.input_dialog);
final EditText nameEditTxt= (EditText) d.findViewById(R.id.nameEditText);
Button addBtn= (Button) d.findViewById(R.id.addBtn);
Button updateBtn= (Button) d.findViewById(R.id.updateBtn);
Button deleteBtn= (Button) d.findViewById(R.id.deleteBtn);
if(pos== -1)
{
addBtn.setEnabled(true);
updateBtn.setEnabled(false);
deleteBtn.setEnabled(false);
}else
{
addBtn.setEnabled(true);
updateBtn.setEnabled(true);
deleteBtn.setEnabled(true);
nameEditTxt.setText(crud.getNames().get(pos));
}
addBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//GET DATA
String name=nameEditTxt.getText().toString();
//VALIDATE
if(name.length()>0 && name != null)
{
//save
crud.save(name);
nameEditTxt.setText("");
adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
lv.setAdapter(adapter);
}else
{
Toast.makeText(MainActivity.this, "Name cannot be empty", Toast.LENGTH_SHORT).show();
}
}
});
updateBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//GET DATA
String newName=nameEditTxt.getText().toString();
//VALIDATE
if(newName.length()>0 && newName != null)
{
//save
if(crud.update(pos,newName))
{
nameEditTxt.setText(newName);
adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
lv.setAdapter(adapter);
}
}else
{
Toast.makeText(MainActivity.this, "Name cannot be empty", Toast.LENGTH_SHORT).show();
}
}
});
deleteBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//DELETE
if( crud.delete(pos))
{
nameEditTxt.setText("");
adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
lv.setAdapter(adapter);
}
}
});
d.show();
}
}
4. ActivityMain.xml
- Contener nuestro ContentMain.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.listview_crud.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
5. ContentMain.xml
- Para contener nuestro ListView.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.listview_crud.MainActivity"
tools_showIn="@layout/activity_main">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
6. inputdialog.xml
- maneja las entradas.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android_orientation="vertical" android_layout_width="match_parent"
android_layout_height="match_parent">
<LinearLayout
android_layout_width="fill_parent"
android_layout_height="match_parent"
android_layout_marginTop="?attr/actionBarSize"
android_orientation="vertical"
android_paddingLeft="15dp"
android_paddingRight="15dp"
android_paddingTop="10dp">
<android.support.design.widget.TextInputLayout
android_id="@+id/nameLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/nameEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Name" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android_orientation="horizontal"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<Button android_id="@+id/addBtn"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="ADD"
android_clickable="true"
android_background="@color/colorAccent"
android_layout_marginTop="20dp"
android_textColor="@android:color/white"/>
<Button android_id="@+id/updateBtn"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="UPDATE"
android_clickable="true"
android_background="#009968"
android_layout_marginTop="20dp"
android_textColor="@android:color/white"/>
<Button android_id="@+id/deleteBtn"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="DELETE"
android_clickable="true"
android_background="#2fc1b9"
android_layout_marginTop="20dp"
android_textColor="@android:color/white"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>Cómo se ejecuta
- Descargue el proyecto.
- Obtendrás un archivo comprimido, extráelo.
- Abre el Android Studio.
- Ahora cierra, el proyecto ya abierto.
- Desde la barra de menú haz clic en Archivo >Nuevo> Importar proyecto.
- Ahora elija una Carpeta de Destino, desde donde quiere importar el proyecto.
- Elija un Proyecto Android.
- Ahora haga clic en "Aceptar".
- Listo, ya has terminado de importar el proyecto, ahora edítalo.
Más recursos
| GitHub Browse (Navegar) (https://github.com/Oclemy/ListView-CRUD) |
| Enlace de descarga de GitHub: Descargar |
Buenos días.
Ejemplo: Android ListView - ContextMenu
Android Custom ListView con texto de imágenes y tutorial de ContextMenu.
El ListView tendrá una lista de elementos. El usuario puede hacer clic con el botón derecho en un elemento determinado y se muestra un menú contextual.
Conceptos que aprenderás con este ejemplo
- ¿Qué es un ListView?
- ¿Qué es un ContextMenu?
- Cómo crear un listview personalizado con imágenes, texto y contextmenu en android studio.
- Cómo implementar un longclick listener en un listview.
- Cómo mostrar un menú contextual cuando se hace clic con el botón derecho en un listview cardview.
- Cómo crear un adaptador personalizado con baseadapter.
¿Qué es BaseAdapter?
Necesitamos un adaptador para trabajar con un listview.
Un adaptador es una clase que actúa como puente entre un adapterview y la fuente de datos subyacente.
En este caso usaremos BaseAdapter.
1. Archivos Gradle
Primero añadimos las dependencias en el archivo build.gradle a nivel de la aplicación.
(a). Build.gradle
Vamos a añadir algunas dependencias. Nuestro ListView estará compuesto por cardviews:
apply plugin: 'com.android.application'
android {
compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
applicationId "com.tutorials.hp.listviewcontextmenu"
minSdkVersion 15
targetSdkVersion 23
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
implementation `com.android.support:appcompat-v7:23.2.1'
implementation `com.android.support:design:23.2.1'
implementation `com.android.support:cardview-v7:23.2.1'
}2. Archivos de diseño
Veamos nuestros archivos de layout. Tendremos tres de ellos:
- activity_main.xml
- content_main.xml
- model.xml
(a). activity_main.xml
- Nuestra plantilla de diseño para la actividad principal.
- Se inflará a la vista para la actividad principal.
- Contendrá el content_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.listviewcontextmenu.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
(b). content_main.xml
- Este contendrá nuestro ListView.
- Se incluirá dentro del
activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.listviewcontextmenu.MainActivity"
tools_showIn="@layout/activity_main">
<ListView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/lv"
android_layout_alignParentLeft="true"
android_layout_alignParentStart="true" />
</RelativeLayout>
(c). model.xml
- Es el diseño de nuestra fila listview personalizada.
- Se inflará en una sola fila.
- Contiene un cardview con imágenes y texto.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="10dp"
card_view_cardCornerRadius="10dp"
card_view_cardElevation="10dp"
android_layout_height="wrap_content">
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent">
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/movieImage"
android_padding="10dp"
android_src="@drawable/ghost" />
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Name"
android_id="@+id/nameTxt"
android_padding="10dp"
android_textColor="@color/colorAccent"
android_layout_below="@+id/movieImage"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text=" John Doe a former FBI Agent and now Physics teacher .is wrongly accussed of murdering an innocent child.He makes it his business to find the bad guys who did taht.He convinces hacker Aram to join him.....
"
android_id="@+id/descTxt"
android_padding="10dp"
android_layout_below="@+id/nameTxt"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceMedium"
android_text="TV Show"
android_id="@+id/posTxt"
android_padding="10dp"
android_layout_below="@+id/movieImage"
android_layout_alignParentRight="true" />
<CheckBox
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/chk"
android_layout_alignParentRight="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>3. Clases Java
Vamos a utilizar el lenguaje de programación java.
Tendremos 5 clases:
(a). Película.java
- Es nuestro objeto de datos, una clase POJO.
- Representa un único objeto película con varias propiedades.
- Cada CardView contendrá una película.
public class Movie {
private String name;
private int image;
public Movie(String name, int image) {
this.name = name;
this.image = image;
}
public String getName() {
return name;
}
public int getImage() {
return image;
}
}
(b). LongClickListener
- Es una interfaz.
- Contiene la firma para nuestro LongClick listener.
public interface LongClickListener {
void onItemLongClick();
}
(c). MyViewHolder.java
- Nuestra clase ViewHolder.
- Contendrá las vistas a reciclar.
- Implementará View.OnLongClickListener y View.OnCreateContextMenuListener.
public class MyViewHolder implements View.OnLongClickListener,View.OnCreateContextMenuListener {
ImageView img;
TextView nameTxt;
LongClickListener longClickListener;
public MyViewHolder(View v) {
img= (ImageView) v.findViewById(R.id.movieImage);
nameTxt= (TextView) v.findViewById(R.id.nameTxt);
v.setOnLongClickListener(this);
v.setOnCreateContextMenuListener(this);
}
public void setLongClickListener(LongClickListener lc)
{
this.longClickListener=lc;
}
@Override
public boolean onLongClick(View v) {
this.longClickListener.onItemLongClick();
return false;
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
menu.add(0,0,0,"Share");
menu.add(0,1,0,"Rate");
menu.add(0,2,0,"Watch");
}
}
(d). CustomAdapter.java
- Nuestra clase de adaptador.
- Deriva de
BaseAdapter.
Adaptará nuestros datos a nuestras vistas personalizadas.
public class CustomAdapter extends BaseAdapter {
Context c;
ArrayList<Movie> movies;
LayoutInflater inflater;
String name;
public CustomAdapter(Context c, ArrayList<Movie> movies) {
this.c = c;
this.movies = movies;
}
@Override
public int getCount() {
return movies.size();
}
@Override
public Object getItem(int position) {
return movies.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if(inflater==null)
{
inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
if(convertView==null)
{
convertView=inflater.inflate(R.layout.model,parent,false);
}
//BIND DATA TO VIEWS
MyViewHolder holder=new MyViewHolder(convertView);
holder.nameTxt.setText(movies.get(position).getName());
holder.img.setImageResource(movies.get(position).getImage());
holder.setLongClickListener(new LongClickListener() {
@Override
public void onItemLongClick() {
name=movies.get(position).getName();
Toast.makeText(c,name,Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
public void getSelecetedItem(MenuItem item)
{
Toast.makeText(c,name+" "+item.getTitle(),Toast.LENGTH_SHORT).show();
}
}
(e). MainActivity.java
- Nuestra MainActivity.
- Hace referencia al ListView del layout.
- Instancia del CustomAdapter y lo establece en nuestro ListView.
public class MainActivity extends AppCompatActivity {
ListView lv;
CustomAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
lv= (ListView) findViewById(R.id.lv);
adapter=new CustomAdapter(this,getMovies());
lv.setAdapter(adapter);
}
@Override
public boolean onContextItemSelected(MenuItem item) {
adapter.getSelecetedItem(item);
return super.onContextItemSelected(item);
}
private ArrayList<Movie> getMovies() {
//COLECTION OF CRIME MOVIES
ArrayList<Movie> movies=new ArrayList<>();
Movie movie=new Movie("Shuttle Carrier",R.drawable.shuttlecarrier);
//ADD ITR TO COLLECTION
movies.add(movie);
movie=new Movie("Fruits",R.drawable.fruits);
movies.add(movie);
movie=new Movie("Breaking Bad",R.drawable.breaking);
movies.add(movie);
movie=new Movie("Crisis",R.drawable.crisis);
movies.add(movie);
movie=new Movie("Ghost Rider",R.drawable.rider);
movies.add(movie);
movie=new Movie("Star Wars",R.drawable.starwars);
movies.add(movie);
movie=new Movie("BlackList",R.drawable.red);
movies.add(movie);
movie=new Movie("Men In Black",R.drawable.meninblack);
movies.add(movie);
movie=new Movie("Game Of Thrones",R.drawable.thrones);
movies.add(movie);
return movies;
}
}
4. Descargar
Hola, todo está en el código fuente de referencia que está bien comentado y fácil de entender y se puede descargar a continuación.
También revise nuestro video tutorial es más detallado y se explica en el paso a paso.
| 1. GitHub [Descarga directa] (https://github.com/Oclemy//Android-ListViewContextMenu/archive/master.zip) | |
| 2. GitHub: [Examinar] (https://github.com/Oclemy/Android-ListViewContextMenu) | |
| 3. | 3. YouTube [Canal de YouTube] (https://www.youtube.com/channel/UCpdkWp2zh5Qv1ZWlnqswdCw) |
