Android Studio - ExpandableListView
Hola amigos hemos llegado lejos ya creciendo cada día mas en conocimiento, espero que todo sea claro para ustedes y si tienen dudas como siempre dejar su comentario y responderé cualquier duda que tengan.Bueno comenzamos con este tutorial en esta ocasión les traigo el siguiente Container ExpandableListView se utiliza para agrupar los datos de la lista por categorías. Tiene la capacidad de expandir y contraer los grupos cuando el usuario toca la cabecera.
Crear Nuevo Proyecto Android Studio
Para comenzar necesitamos crear nuestro proyecto puedes verificar el siguiente enlace (Aquí) para saber como se logra hacer y seguir con este ejemplo del uso del ExpandableLisView.Diseño de Aplicación Layout
Ahora comenzaremos con el diseño de nuestra aplicación presta mucha atención en el proceso para que puedas entender lo que estoy haciendo. Continuamos.
El Container lo encontraremos en la sección de Containers.
Ahora colocaremos nuestro Container en nuestro activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#f4f4f4" >
<ExpandableListView
android:id="@+id/ExpandableListView"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
Seguiremos agregando otro Layout.xml ya que este control funciona de forma agrupada. Es de los controles que necesita complementos combinados para funcionar.
Para ello nos vamos a la sección siguiente.
Para ello nos vamos a la sección siguiente.
Presionamos clic derecho sobre el directorio layout.
Le pondremos lista_encabezado.xml nos aseguramos que en RootElement sea un LinearLayout.
Presionamos Ok. y listo tendríamos agregado nuestro layout. Agregamos un textView para que este contenga el nombre de los encabezados. Nos quedaría de la siguiente forma.
El código de este layout es el siguiente.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp"
android:background="#000000">
<TextView
android:id="@+id/lblListHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:textSize="17dp"
android:text="Encabezado"
android:textColor="#f9f93d" />
</LinearLayout>
Ahora agregaremos el layout encargado de contener las filas que serian los nodos hijos en nuestra lista desplegable. De igual manera que el anterior agregamos el layout nos aseguramos de que sea un LinearLayout y le pondremos lista_contenido.xml. el código de nuestro Layout seria el siguiente.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="vertical" >
<TextView
android:id="@+id/lblListItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dip"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
</LinearLayout>
Y con esto quedaría listo nuestro diseño para nuestra aplicación.
Código MainAcitivity
Comenzaremos ahora con el código de nuestra aplicación. Agregaremos una clase que necesitaremos para el adaptador de nuestro ExpandableListView, los pasos son los siguientes. nos dirigimos a la sección donde se encuentran las clases java.
En el paquete de nuestro proyecto presionaremos clic derecho.
Presionaremos Java Class y nos mostrara la siguiente ventana.
Escribiremos el nombre de nuestra clase ExpandableListAdapter y presionamos Ok. Teniendo lista nuestra clase comenzaremos con la programación de la misma.
import java.util.HashMap;
import java.util.List;
import android.content.Context;
import android.graphics.Typeface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;
public class ExpandableListAdapter extends BaseExpandableListAdapter {
//--Declaramos las variables que utilizaremos
private Context _context;
private List<String> _listDataHeader;
private HashMap<String, List<String>> _listDataChild;
//--Constructor de nuestra clase
public ExpandableListAdapter(Context context, List<String> listDataHeader,
HashMap<String, List<String>> listChildData) {
//--Asigna las variables los datos recibidos
this._context = context;
this._listDataHeader = listDataHeader;
this._listDataChild = listChildData;
}
//--Retorna la posicion del encabezado
@Override
public Object getChild(int groupPosition, int childPosititon) {
return this._listDataChild.get(this._listDataHeader.get(groupPosition))
.get(childPosititon);
}
//--Retorna la posicoin del indice del contenido
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
//--Funcion donde se asignara el contenido
@Override
public View getChildView(int groupPosition, final int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
//--Declaramos la variable que tomara la posiciones
final String childText = (String) getChild(groupPosition, childPosition);
//--Verifica el layout para generar el diseño
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.lista_contenido, null);
}
//--Asigana las propiedades del control textView que se encuentra en el Layout lista_contenido
TextView txtListChild = (TextView) convertView
.findViewById(R.id.lblListItem);
//--Asigna el valor recibido en el textView
txtListChild.setText(childText);
//--Retorna el diseño
return convertView;
}
@Override
public int getChildrenCount(int groupPosition) {
return this._listDataChild.get(this._listDataHeader.get(groupPosition))
.size();
}
@Override
public Object getGroup(int groupPosition) {
return this._listDataHeader.get(groupPosition);
}
@Override
public int getGroupCount() {
return this._listDataHeader.size();
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
//--Funcion para agregar el encabezado
@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
//--Variable que toma la posicion del encabezado
String headerTitle = (String) getGroup(groupPosition);
//--Verifica la variable de diseño para el layout
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//--Asigna el Layout lista_encabezado
convertView = infalInflater.inflate(R.layout.lista_encabezado, null);
}
//--Asigna las propiedades del textView en el layaout lista_encabezado
TextView lblListHeader = (TextView) convertView
.findViewById(R.id.lblListHeader);
lblListHeader.setTypeface(null, Typeface.BOLD);
//--Asigna el valor al textview
lblListHeader.setText(headerTitle);
//--Retorna la variable para generar el diseño
return convertView;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
Ahora continuamos con nuestra clase principal MainActivity el código de la clase sería el siguiente.
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ExpandableListView.OnGroupCollapseListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
import android.widget.Toast;
public class MainActivity extends Activity {
//--Declaramos las variables que utilizaremos
//--Variable para acceder a nuestra clase Adapter
ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List<String> listDataHeader;
HashMap<String, List<String>> listDataChild;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//--Asignamos las propiedades de nuestra ExpandableListView a la variable
expListView = (ExpandableListView) findViewById(R.id.ExpandableListView);
//--Funcion para preprar el contenido de nuestro lista
prepareListData();
//--Enviamos los valores a nuestra clase ExpandableListAdapter que generara el diseño
listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);
//--Asigamos el resultado de nuestro Container ExpandableListView
expListView.setAdapter(listAdapter);
}
//--Funcion que genera el contenido
private void prepareListData() {
//--Variables que utilizaremos para definir el encabezado y el contenido
listDataHeader = new ArrayList<String>();
listDataChild = new HashMap<String, List<String>>();
//--Asignamos los valores que iran en el encabezado
listDataHeader.add("Verduras");
listDataHeader.add("Frutas");
listDataHeader.add("Golosinas");
//--Añadimos el contenido
List<String> Verduras = new ArrayList<String>();
Verduras.add("La Zanahoria");
Verduras.add("La Cebolla");
Verduras.add("El Tomate");
Verduras.add("La Lechugan");
Verduras.add("El Nabo");
Verduras.add("Las Espinacas");
List<String> Frutas = new ArrayList<String>();
Frutas.add("La Manzana");
Frutas.add("La Sandia");
Frutas.add("La Pera");
Frutas.add("La Piña");
Frutas.add("Las Cerezas");
Frutas.add("Las Fresas");
List<String> Golosinas = new ArrayList<String>();
Golosinas.add("Chocolates");
Golosinas.add("Caramelos");
Golosinas.add("Icre Cream");
Golosinas.add("Algodon Azucar");
//--Asignamos el contenido al nodo que representa el indice del encabezado
listDataChild.put(listDataHeader.get(0), Verduras);
listDataChild.put(listDataHeader.get(1), Frutas);
listDataChild.put(listDataHeader.get(2), Golosinas);
}
}
Y de esta forma quedaría todo. Si no entiendes alguna parte escríbeme tu comentario. Con esto quedaría todo listo.
Crear Emulador AVD (Aquí)
Crearemos el emulador AVD para ver el resultado de nuestra aplicación.
Ejecutamos Aplicación Android
Ahora ejecutamos nuestra aplicación para ver el resultado de nuestro ejemplo del uso del ExpandablelistView.
Y este seria el resultado. Puede probar creando tus propios diseños y presentaciones practica para que entiendas como funciona. Y prueba lo en tus aplicaciones.
Descargar: Aquí
Espero el contenido haya sido claro cualquier duda déjame tu comentario y con gusto te responderé. Gracias por tu tiempo.
Si deseas empezar y desarrollar algo grandioso, no necesitas millones de dólares de capitalización. Necesitas suficiente pizza y Diet Coke en la nevera, una PC barata y trabajo y dedicación para realizar tu idea. (John Carmack).
Android Studio - Curso Español
No hay comentarios:
Publicar un comentario