Diferencia entre revisiones de «ListView»

De MediaWiki
Ir a la navegación Ir a la búsqueda
(Página creada con «==Introdución== *Un '''ListView''' é unha view de que lle permite ao usuario seleccionar un elemento. *A diferencia dun Spinner unha lista amosa todos os seus elementos n...»)
 
Línea 17: Línea 17:
  
 
==Caso Práctico==
 
==Caso Práctico==
−
*Comezar creando o proxecto: '''U4_03_ListView'''  
+
* Partimos que xa temos creado o proxecto inicial como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa indicamos anteriormente].
 +
: Se non o temos creado antes, crearemos un novo paquete de nome: '''Adaptadores''' como un subpaquete do teu paquete principal.
  
 +
 +
<br />
 +
* Dentro do paquete '''Adaptadores''' crear unha nova 'Empty Activity' de nome: '''UD04_01_ListViews''' de tipo Launcher e sen compatibilidade.
 +
: Modifica o arquivo '''AndroidManifiest.xml''' e engade unha label á activity como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
 +
 +
 +
<br />
 
<gallery caption="ListView" widths="350" heights="300px" perrow="2">
 
<gallery caption="ListView" widths="350" heights="300px" perrow="2">
 
Image:Android_2014_U4_03_ListView_01.jpg| Exemplo dunha lista simple, ao premer nun ítem ...
 
Image:Android_2014_U4_03_ListView_01.jpg| Exemplo dunha lista simple, ao premer nun ítem ...
Línea 28: Línea 36:
 
===XML do Layout===
 
===XML do Layout===
  
−
*Definimos no Layout unha vista de tipo ListView (Liñas 12-15).
+
*Definimos no Layout unha vista de tipo ListView (Liñas 14-17).
−
<syntaxhighlight lang="xml" line enclose="div" highlight="12-15" >
+
<syntaxhighlight lang="xml" line enclose="div" highlight="14-17" >
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
     xmlns:tools="http://schemas.android.com/tools"
 
     xmlns:tools="http://schemas.android.com/tools"
Línea 37: Línea 45:
  
 
     <TextView
 
     <TextView
−
         android:layout_width="wrap_content"
+
         android:layout_width="match_parent"
 +
        android:textSize="20sp"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:text="Selecciona unha froita" />
 
         android:text="Selecciona unha froita" />
  
 
     <ListView
 
     <ListView
−
         android:id="@+id/lv_froitas"
+
         android:id="@+id/lvFroitas_UD04_01_ListViews"
−
         android:layout_width="wrap_content"
+
         android:layout_width="match_parent"
 
         android:layout_height="wrap_content" />
 
         android:layout_height="wrap_content" />
  
Línea 50: Línea 59:
  
  
 +
 +
<br />
 
===O código Java da aplicación===
 
===O código Java da aplicación===
 
*A filosofía do código Java é moi semellante ao do Spinner.
 
*A filosofía do código Java é moi semellante ao do Spinner.
  
−
<syntaxhighlight lang="java" line enclose="div" highlight="24,27,30,33,38-39" >
+
<syntaxhighlight lang="java" line enclose="div" highlight="48,49,18,21,25,31,36,37" >
−
package com.example.u4_03_listview;
+
package es.cursoandroid.cifprodolfoucha.aprendiendo.Adaptadores;
  
 
import android.app.Activity;
 
import android.app.Activity;
 
import android.os.Bundle;
 
import android.os.Bundle;
−
import android.view.Menu;
 
−
import android.view.MenuItem;
 
 
import android.view.View;
 
import android.view.View;
 
import android.widget.AdapterView;
 
import android.widget.AdapterView;
−
import android.widget.AdapterView.OnItemClickListener;
 
 
import android.widget.ArrayAdapter;
 
import android.widget.ArrayAdapter;
 
import android.widget.ListView;
 
import android.widget.ListView;
Línea 68: Línea 76:
 
import android.widget.Toast;
 
import android.widget.Toast;
  
−
public class U4_03_ListView extends Activity {
+
import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
  
−
@Override
+
public class UD04_01_ListViews extends Activity {
−
protected void onCreate(Bundle savedInstanceState) {
 
−
super.onCreate(savedInstanceState);
 
−
setContentView(R.layout.activity_u4_03__list_view);
 
−
ListView lvFroitas = (ListView) findViewById(R.id.lv_froitas);
 
  
−
//Fonte de datos
+
    private void cargarListas(){
−
String[] froitas = new String[] { "Pera", "Mazá", "Plátano" };
+
        //Fonte de datos
 +
        String[] froitas = new String[] { "Pera", "Mazá", "Plátano" };
  
−
//Enlace do adaptador coa fonte de datos
+
        //Enlace do adaptador coa fonte de datos
−
ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, froitas);
+
        ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, froitas);
  
−
//Enlace do adaptador co ListView
+
        ListView lvFroitas = findViewById(R.id.lvFroitas_UD04_01_ListViews);
−
lvFroitas.setAdapter(adaptador);
+
        //Enlace do adaptador co ListView
 +
        lvFroitas.setAdapter(adaptador);
 +
    }
 +
    private void xestionarEventos(){
  
−
//Escoitador
+
        ListView lvFroitas = findViewById(R.id.lvFroitas_UD04_01_ListViews);
−
lvFroitas.setOnItemClickListener(new OnItemClickListener() {
+
        //Escoitador
 +
        lvFroitas.setOnItemClickListener(new AdapterView.OnItemClickListener() {
  
−
@Override
+
            @Override
−
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
+
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
−
// TODO Auto-generated method stub
+
                // TODO Auto-generated method stub
−
//Toast.makeText(getBaseContext(), "Seleccionaches: " + parent.getItemAtPosition(position), Toast.LENGTH_SHORT).show();
+
                //Toast.makeText(getBaseContext(), "Seleccionaches: " + parent.getItemAtPosition(position), Toast.LENGTH_SHORT).show();
−
Toast.makeText(getBaseContext(), "Seleccionaches: " + ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
+
                Toast.makeText(getApplicationContext(), "Seleccionaches: " + ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
  
−
}
+
            }
−
});
+
        });
−
}
+
    }
  
−
@Override
+
    @Override
−
public boolean onCreateOptionsMenu(Menu menu) {
+
    protected void onCreate(Bundle savedInstanceState) {
−
// Inflate the menu; this adds items to the action bar if it is present.
+
        super.onCreate(savedInstanceState);
−
getMenuInflater().inflate(R.menu.u4_03__list_view, menu);
+
        setContentView(R.layout.activity_ud04_01__list_views);
−
return true;
 
−
}
 
  
 +
        cargarListas();
 +
        xestionarEventos();
 +
    }
 
}
 
}
 +
 
</syntaxhighlight>
 
</syntaxhighlight>
−
*'''Liña 24''': Ao igual que no Spinner, creamos unha fonte de datos, neste caso cun array estático.
+
*'''Liña 18''': Ao igual que no Spinner, creamos unha fonte de datos, neste caso cun array estático.
−
*'''Liña 27''': Do mesmo xeito creamos o adaptador
+
*'''Liña 21''': Do mesmo xeito creamos o adaptador
−
*'''Liña 30''': E finalmente, vinculamos o adaptador ao ListView
+
*'''Liña 25''': E finalmente, vinculamos o adaptador ao ListView
−
*'''Liña 33''': O Escoitador asociado ao ListView.
+
*'''Liña 31''': O Escoitador asociado ao ListView.
−
*'''Liñas 38,39''': Ao igual que no spinner, neste caso a vista que recibimos cando facemos click nun ítem da view é do tipo TextView.
+
*'''Liñas 36,37''': Ao igual que no spinner, neste caso a vista que recibimos cando facemos click nun ítem da view é do tipo TextView.
  
 
==ListView usando un recurso XML ou un array dinámico==
 
==ListView usando un recurso XML ou un array dinámico==

Revisión del 19:54 12 oct 2018

Introdución

  • Un ListView é unha view de que lle permite ao usuario seleccionar un elemento.
  • A diferencia dun Spinner unha lista amosa todos os seus elementos na pantalla.

Listview.png

  • A imaxe recolle un exemplo de lista, cada item pode conter un só dato, ou múltiples datos. O primeiro caso é o que se vai ver neste curso.



  • Ao igual que no Spinner usaremos unha fonte de datos (array estático, array dinñamico, recurso xml, etc) para enlazalo co adaptador e este co ListView.


Caso Práctico

Se non o temos creado antes, crearemos un novo paquete de nome: Adaptadores como un subpaquete do teu paquete principal.



  • Dentro do paquete Adaptadores crear unha nova 'Empty Activity' de nome: UD04_01_ListViews de tipo Launcher e sen compatibilidade.
Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.




XML do Layout

  • Definimos no Layout unha vista de tipo ListView (Liñas 14-17).
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="match_parent"
 9         android:textSize="20sp"
10         android:layout_height="wrap_content"
11         android:text="Selecciona unha froita" />
12 
13     <ListView
14         android:id="@+id/lvFroitas_UD04_01_ListViews"
15         android:layout_width="match_parent"
16         android:layout_height="wrap_content" />
17 
18 </LinearLayout>



O código Java da aplicación

  • A filosofía do código Java é moi semellante ao do Spinner.
 1 package es.cursoandroid.cifprodolfoucha.aprendiendo.Adaptadores;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.widget.AdapterView;
 7 import android.widget.ArrayAdapter;
 8 import android.widget.ListView;
 9 import android.widget.TextView;
10 import android.widget.Toast;
11 
12 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
13 
14 public class UD04_01_ListViews extends Activity {
15 
16     private void cargarListas(){
17         //Fonte de datos
18         String[] froitas = new String[] { "Pera", "Mazá", "Plátano" };
19 
20         //Enlace do adaptador coa fonte de datos
21         ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, froitas);
22 
23         ListView lvFroitas = findViewById(R.id.lvFroitas_UD04_01_ListViews);
24         //Enlace do adaptador co ListView
25         lvFroitas.setAdapter(adaptador);
26     }
27     private void xestionarEventos(){
28 
29         ListView lvFroitas = findViewById(R.id.lvFroitas_UD04_01_ListViews);
30         //Escoitador
31         lvFroitas.setOnItemClickListener(new AdapterView.OnItemClickListener() {
32 
33             @Override
34             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
35                 // TODO Auto-generated method stub
36                 //Toast.makeText(getBaseContext(), "Seleccionaches: " + parent.getItemAtPosition(position), Toast.LENGTH_SHORT).show();
37                 Toast.makeText(getApplicationContext(), "Seleccionaches: " + ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
38 
39             }
40         });
41     }
42 
43     @Override
44     protected void onCreate(Bundle savedInstanceState) {
45         super.onCreate(savedInstanceState);
46         setContentView(R.layout.activity_ud04_01__list_views);
47 
48         cargarListas();
49         xestionarEventos();
50     }
51 }
  • Liña 18: Ao igual que no Spinner, creamos unha fonte de datos, neste caso cun array estático.
  • Liña 21: Do mesmo xeito creamos o adaptador
  • Liña 25: E finalmente, vinculamos o adaptador ao ListView
  • Liña 31: O Escoitador asociado ao ListView.
  • Liñas 36,37: Ao igual que no spinner, neste caso a vista que recibimos cando facemos click nun ítem da view é do tipo TextView.

ListView usando un recurso XML ou un array dinámico

  • Neste caso funciona igual que o visto no Spinner que fai uso dun adaptador.





-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).