Las listas en Android nos permiten mostrar de forma ordenada secciones o accesos en una aplicación, en este tutorial vamos a crear una lista muy sencilla con diferentes secciones, no vamos a profundizar en las acciones que se van a ejecutar al pulsar las secciones, tan solo crearemos una respuesta simple sobre cada acción.
Comenzamos creando un nuevo proyecto en Android Studio.
Elegimos un nombre para la aplicacion y hacemos clic en NEXT, la interfaz puede variar dependiendo de tu versión de Android Studio.
Elegimos la API minima requerida para Android 4.0 o versiones superiores
Elegimos una Blank Activity
Por ultimo elegimos un nombre y un titulo y hacemos clic en FINISH
Lo primero que hacemos es ir al archivo xml que se ha creado en la carpeta res/layout, si estas siguiendo este tutorial al pie de la letra, tu archivo deberia llamarse activity_didesweb_list.xml, y deberia tener este aspecto.
Modificamos el código de este archivo, cambiamos el RelativeLayout por un LinearLayout para mostrar las listas, eliminamos el TextView y añadiremos otra linea para mostrar las listas en vertical android:orientation=”vertical”;
Creamos un ListView en el que debemos prestar mucha atención al los nombres de id y array ya que los vamos a usar en breve.
El archivo activity_didesweb_list.xml debe de quedarse con el siguiente codigo:
<LinearLayout
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”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:paddingBottom=”@dimen/activity_vertical_margin” tools:context=”.DideswebList”
android:orientation=”vertical”>
<ListView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:entries=”@array/etiquetas”
android:id=”@+id/miLista”
/>
</LinearLayout>
Ahora vamos a abrir el archivo strings.xml y editarlo.
Este archivo contiene muy poco codigo, lo unico que debemos hacer es crear un strings-array con una lista de items y asignarle el mismo nombre que hemos asignado al android:entries=”@array/ en el archivo activity_didesweb_list.xml
strings.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<string name=”app_name”>MySimpleList</string>
<string name=”action_settings”>Settings</string>
<string-array name=”etiquetas”>
<item>Html 5</item>
<item>Css 3</item>
<item>Javascript</item>
<item>jQuery</item>
<item>PHP</item>
<item>MySQL</item>
<item>Java</item>
<item>XML</item>
<item>JSON</item>
<item>AngularJS</item>
</string-array>
</resources>
Con esto ya tenemos creada nuestra lista, para verla en funcionamiento debes ejecutarla en un dispositivo o en el emulador
Este es el resultado
Evidentemente la lista no responde a ninguna acción, para implementar acciones debemos editar el archivo MainActivity que en este caso se llama DideswebList y se encuentra en una subcarpeta de la carpeta java
Buscamos el método onCreate(), dentro de este método debemos invocar al método que vamos a crear, le asignamos el nombre etiquetaEvent()
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_didesweb_list);
etiquetaEvent();
}
A continuación añadimos un método nuevo dentro de la misma clase en la que estamos, en este caso DideswebList, su función será la de mostrar un mensaje al usuario mostrando el valor del item seleccionado
Este es el código
private void etiquetaEvent(){
ListView respEventLista = (ListView) findViewById(R.id.miLista);
respEventLista.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
String etiquetaSelect = adapterView.getItemAtPosition(i).toString();
Toast.makeText(getApplicationContext(), etiquetaSelect, Toast.LENGTH_SHORT).show();
}
});
}
El resultado al pulsar un item
Es posible que tengas que importar algunas clases como Toast, ListView o AdapterView, es tan sencillo como hacer un clic sobre la misma, pulsar ALT+ENTER y seleccionar Import Class para importar la clase.
Puedes ver el código de los tres archivos en GitHub
Valoraciones
Sé el primero en valorar