10
IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA APLICACIONES MÓVILES 1 CONTROL ListView El control ListView a diferencia del Spinner que se cierra luego de seleccionar un elemento permanecen visibles varios elementos (se lo utiliza cuando hay que mostrar muchos elementos).Si la lista no entra en el espacio que hemos fijado para el ListView nos permite hacer scroll de los mismos.El control ListView se encuentra en la pestaña "Compositive". EJEMPLO1 Problema: Disponer un ListView con un TexView,un campo de texto EditText y un Boton, mediante el cual un usuario infresara en nombre de departamentos del Peru y se enlistara en una lista. CREAR LA SIGUIENTE INTERFACE TEXTWIEW=TITULO BOTON=OK CAMPO DE TEXTO(EDITEXT) =DEPARTAMENTOS LISTA DE TEXTO (LISTVIEW) =DEPA

Aplicaciones moviles clase9 listas

Embed Size (px)

Citation preview

Page 1: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 1

CONTROL ListView

El control ListView a diferencia del Spinner que se cierra luego de seleccionar

un elemento permanecen visibles varios elementos (se lo utiliza cuando hay que

mostrar muchos elementos).Si la lista no entra en el espacio que hemos fijado

para el ListView nos permite hacer scroll de los mismos.El control ListView se

encuentra en la pestaña "Compositive".

EJEMPLO1

Problema:

Disponer un ListView con un TexView,un campo de texto EditText y un Boton, mediante el cual un usuario infresara en nombre de departamentos del Peru y se

enlistara en una lista.

CREAR LA SIGUIENTE INTERFACE

TEXTWIEW=TITULO

BOTON=OK

CAMPO DE TEXTO(EDITEXT)

=DEPARTAMENTOS

LISTA DE TEXTO (LISTVIEW)

=DEPA

Page 2: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 2

ESTE ES EL CODIGO 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" tools:context="${relativePackage}.${activityClass}" android:background="@drawable/fondo"> <TextView android:id="@+id/tvTitulo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="DEPARTAMENTOS DEL PERU" android:textColor="@android:color/white" /> <EditText android:id="@+id/etDepartamentos"

AÑADIR

UN

FONDO

Page 3: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 3

android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/tvTitulo" android:layout_marginTop="26dp" android:layout_toLeftOf="@+id/button1" > <requestFocus /> </EditText> <Button android:id="@+id/btnOK" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/etDepartamentos" android:layout_alignParentRight="true" android:text="OK" /> <ListView android:id="@+id/lvDepas" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/btnOK" android:layout_marginTop="20dp" > </ListView> </RelativeLayout>

CODIGO JAVA

package com.listasss; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; public class MainActivity extends Activity implements OnClickListener { //AÑADIR LA ACCION PARA EL BOTON MEDIANTE AMPLEMENT ONCLICKLISTENER //IMPORTAR LA LIBRERIA Y AÑADIR EL METODO ONCLICK

Page 4: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 4

//VARIABLES EditText etDepartamentos; Button btnOK; ListView lvDepas; ArrayList<String> lista; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //ASIGNACION DE LOS VALORES CORRESPONDIENTES A LAS VARIABLES etDepartamentos=(EditText)findViewById(R.id.etDepartamentos); btnOK=(Button)findViewById(R.id.btnOK); lvDepas=(ListView)findViewById(R.id.lvDepas); btnOK.setOnClickListener(this);//ACCION QUE ESCUCHA LA ACCION DEL BOTON OK lista=new ArrayList<String>(); //PARA MANIPULAR UN LISTVIEW ES NECESARIO UTILIZAR UN ARRAY ADAPTER //POR LO TANTO CREAMOS EL ADAPTADOR DE LA LISTAS ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, lista); lvDepas.setAdapter(adaptador); } @Override public void onClick(View arg0) { // TODO Auto-generated method stub lista.add(etDepartamentos.getText().toString()); etDepartamentos.setText(""); } }

Page 5: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 5

RESULTADO

EJEMPLO2

Problema:

Disponer un ListView con los nombres de paises de sudamérica. Cuando se

seleccione un país mostrar en un TextView la cantidad de habitantes del país seleccionado.

La interfaz visual a implementar es la siguiente (primero disponemos un TextView (llamado tv1) y un ListView (llamado listView1)):

Primero definimos dos vectores paralelos donde almacenamos en uno los

nombres de países y en el otro almacenamos la cantidad de habitantes de dichos países:

private String[]

paises={"Argentina","Chile","Paraguay","Bolivia","Peru",

"Ecuador", "Brasil","Colombia", "Venezuela","Uruguay"};

Page 6: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 6

private String[] habitantes={"40000000", 17000000","6500000",

"10000000", "30000000","14000000","183000000", "44000000",

"29000000","3500000"};

Definimos un objeto de tipo TextView y otro de tipo ListView donde almacenaremos las referencias a los objetos que definimos en el archivo XML: private TextView tv1;

private ListView lv1;

En el método onCreate obtenemos la referencia a los dos objetos:

tv1=(TextView)findViewById(R.id.tv1);

lv1 =(ListView)findViewById(R.id.listView1);

Creamos un objeto de la clase ArrayAdapter de forma similar a como lo hicimos cuando vimos la clase Spinner:

ArrayAdapter<String> adapter = new ArrayAdapter<String>

(this,android.R.layout.simple_list_item_1, paises);

lv1.setAdapter(adapter);

Llamamos al método setOnItemClicListener de la clase ListView y le pasamos como parámetro una clase anónima que implementa la interfaz OnItemClickListener (dicha interfaz define el método onItemClick que se dispara

cuando seleccionamos un elemento del ListView): lv1.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View v, int

posicion, long id) {

tv1.setText("Población de "+ lv1.getItemAtPosition(posicion)

+ " es "+ habitantes[posicion]);

}

});

Dentro del método onItemClick modificamos el contenido del TextView con el nombre del país y la cantidad de habitantes de dicho país. Este método recibe en

el tercer parámetro la posición del item seleccionado del ListView.

CODIGO XLM

Page 7: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 7

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="34dp" android:text="TextView" /> <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_below="@+id/tv1" > </ListView>

</RelativeLayout>

CODIGO JAVA

package com.menu;

Page 8: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 8

import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TextView; public class MainActivity extends Activity { private String[] paises = { "Argentina", "Chile", "Paraguay", "Bolivia", "Peru", "Ecuador", "Brasil", "Colombia", "Venezuela", "Uruguay" }; private String[] habitantes = { "40000000", "17000000", "6500000", "10000000", "30000000", "14000000", "183000000", "44000000", "29000000", "3500000" }; private TextView tv1; private ListView lv1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tv1=(TextView)findViewById(R.id.tv1); lv1 =(ListView)findViewById(R.id.listView1); ArrayAdapter <String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, paises); lv1.setAdapter(adapter); lv1.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View v, int posicion, long id) { tv1.setText("Población de "+ lv1.getItemAtPosition(posicion) + " es "+ habitantes[posicion]); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }

RESULTADO

Page 9: Aplicaciones moviles clase9 listas

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 9