➜ Catálogo Categorías
¿Cómo inflar un ListView usando un Adapter con una API Rest? | Mostrar en un ListView las Categorías de productos de la pizzería.
Diseño e implementación de StoreActivity
FUNCIÓN: Cargar las categorías desde el servidor web y asignarles el evento click.
APRENDERÁS A : ¿Cómo inflar un ListView usando un Adapter con una API Rest?
Pasos:
- API Rest: Modificar la ruta categorias de GET a POST en api.php
- SessionManager: Agregar un método getAccessToken()
- Clase: Implementar un modelo para categorías{}
- Adapter: Agregar una vista categoria.xml
- Adapter: Implementar una clase CategoriaAdapter{}
- ApiService: Agregar el método getCategorias()
- Listview: Agregar el ListView id=listViewCategoria
- Listview: Crear el método getListaCategorias()
- ListView: Inflar el ListView
- ListView: Asignar el evento click a cada categoría
1.- API Rest: Modificar la ruta categorias de GET a POST en api.php
Modificamos la ruta categorias de GET a POST, además aprovechamos también para cambiar la ruta de productos a POST. Esto con el fin de dar un poco más de seguridad a nuestras rutas, recuerde que sanctum necesita del token para gestionar las rutas protegidas. Y es asi como debe de quedar el archivo routes/api.php del proyecto Laravel 9
...
Route::group(['middleware'=>["auth:sanctum"]],function () {
Route::get('logout', [UserController::class,'logout']);
Route::post('categorias', [JsonController::class,'categorias']);
Route::post('productos', [JsonController::class,'productos']);
});
....
2.- SessionManager: Agregar un método getAccessToken()
public String getAccessToken(){
return _preference.getString(KEY_ACCESS_TOKEN,null);
}
3.- Clase: Implementar un modelo para categorías{}
package codea.app.pizzeria9.modelo;
public class Categoria {
int id;
String nombre;
public Categoria(int id, String nombre) {
this.id = id;
this.nombre = nombre;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
}
4.- Adapter: Agregar una vista categoria.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.cardview.widget.CardView
android:layout_margin="20dp"
app:cardElevation="20dp"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="@color/tercerColor"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="20dp"
android:textAlignment="center"
android:textColor="@color/white"
android:textSize="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtNombre"/>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
5.- Adapter: Implementar una clase CategoriaAdapter{}
class CategoriaAdapter extends BaseAdapter{
private Context context;
private ArrayList<Categoria> listaCategoria;
public CategoriaAdapter(Context context, ArrayList<Categoria> listaCategoria) {
this.context = context;
this.listaCategoria = listaCategoria;
}
@Override
public int getCount() {
return listaCategoria.size();
}
@Override
public Object getItem(int i) {
return null;
}
@Override
public long getItemId(int i) {
return 0;
}
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
LayoutInflater inflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if(view == null){
view = inflater.inflate(R.layout.categoria,null);
TextView nombre = view.findViewById(R.id.txtNombre);
nombre.setText(listaCategoria.get(i).getNombre());
}
return view;
}
}
6.- ApiService: Agregar el método getCategorias()
Este método se determina POST con la ruta categorias, declaramos un arrayList de Categoria con un encabezado con el token para autorizar el acceso del usuario a este tipo de información; la API Rest es quién controla el acceso del usuario con sanctum de Laravel
/// Extraer las categorías
@POST("categorias")
Call<ArrayList<Categoria>> getCategorias(
@Header("Authorization") String access_token
);
7.- Listview: Agregar el ListView id=listViewCategoria
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".StoreActivity">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listViewCategoria"/>
</androidx.appcompat.widget.LinearLayoutCompat>
En StoreActivity instanciamos el listView
...
private ListView _listViewCategoria;
....
....
_listViewCategoria = findViewById(R.id.listViewCategoria);
....
8.- Listview: Crear el método getListaCategorias()
Implementamos el método que al ser llamado, inflará el listview , para que se ejecute correctamente enviamos un encabezado con el token al servidor web, este debe devolvernos una objeto Json de Categorias.
...
private ArrayList<Categoria> listacategorias = new ArrayList<>();
....
private void getListaCategorias(){
Call<ArrayList<Categoria>> call = RetrofitClient.getApiService().getCategorias(
"Bearer "+_sessionManager.getAccessToken()
);
call.enqueue(new Callback<ArrayList<Categoria>>() {
@Override
public void onResponse(Call<ArrayList<Categoria>> call, Response<ArrayList<Categoria>> response) {
if(response.isSuccessful()){
listacategorias = response.body();
CategoriaAdapter adapter = new CategoriaAdapter(getApplicationContext(), listacategorias);
_listViewCategoria.setAdapter(adapter);
}
}
@Override
public void onFailure(Call<ArrayList<Categoria>> call, Throwable t) {
}
});
}
9.- ListView: Inflar el ListView
Simplemente llamamos al método getListaCategorias() que llenará el listview con las categorias desde el servidor web en StoreActivity.
...
getListaCategorias();
....
10.-ListView: Asignar el evento click a cada categoría
El evento click lanza la actividad ProductosActivity quien cargará todos los productos de la categoría elegida.
....
_listViewCategoria.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
startActivity(new Intent(getApplicationContext(),ProductosActivity.class)
.putExtra("categoria_id",listacategorias.get(i).getId())
);
}
});
....
1417 visitas
Capítulo 38 – Catálogo Productos »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar