Xamarin Android - Ordenando uma ListView

Neste artigo vou mostrar como fazer a ordenação dos dados exibidos em uma ListView no Xamarin Android usando o Visual Studio 2015 e a linguagem C#.

Este é um artigo para inciantes que mostra de forma bem simples como podemos ordernar informações em um controle ListView.

O artigo trabalha basicamente com array de dados e, não usa MVVM, o que seria mais indicado para o caso.

Em meu artigo Apresentando e usando o controle ListView  eu apresentei o controle ListView e mostrei uma forma de utilizar o controle em aplicações Xamarin Android.

O ListView é um componente UI importante de aplicações Android, muito usado para exibir listas curtas de opções de menu a até longas listas de opções. Ele fornece uma maneira simples de apresentar uma lista de rolagem de linhas que podem ser formatadas com um estilo embutido ou personalizados.

O ListView requer um adaptador para alimentá-lo com dados e, de maneira geral para adicionar linhas em um ListView, precisamos incluí-lo em nosso Layout e implementar um IListAdapter com os métodos que o ListView chama para se auto preencher.

Usar um ArrayAdapter<string> é a maneira mais fácil de usar o ListView devido à sua simplicidade, mas ele serve basicamente para exibir apenas uma linha por vez e seus recursos são limitados.

Vamos usar essa abordagem e mostrar como ordenar os itens em uma ListView.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando o projeto no VS Community 2017

Abra o VS 2015 Community e clique em New Project;

Selecione a linguagem Visual C# e o template Android -> Blank App(Android)

Informe o nome Droid_ListView_Ordem e clique no botão OK;

Abra o arquivo Main.axml na pasta Resources/layout e no modo Designer e a seguir inclua a partir da ToolBox os seguintes controles:

Abaixo vemos o leiaute no emulador do Xamarin e ao lado o respectivo código XML gerado :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#d3d3d3"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
       android:text="Planetas do Sistem Solar"
       android:background="@android:color/black"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/lblPlanetas" />
    <ListView
        android:background="#009968"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:id="@+id/lv" />
    <Button
        android:text="Ordenar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:padding="10dp"
        android:id="@+id/btnOrdenar"
        />
</LinearLayout

Agora vamos definir o código no arquivo MainActivity.cs vinculado a nossa view Main.axml.

Definindo os dados e fazendo a ordenação

Abra o arquivo MainActivity.cs e altere o código desse arquivo conforme abaixo:

using System;
namespace Droid_ListViewCrud_Array
{
    [Activity(Label = "Droid_ListView_Ordenacao", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        //Views ListView e Button
        private ListView lv;
        private Button btnOrdenar;
        //define um array de strings como dados e define a ordem ascendente 
        private readonly string[] planetas = { "Júpiter", "Netuno", "Urano", "Saturno", "Marte", "Terra", "Mércurio", "Vênus" };
        private bool ascendente = true;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);
             //inicializa as views e ordena os dados
            this.InicializarViews();
            this.OrdenaDados(ascendente);
            this.ascendente = !ascendente;
            btnOrdenar.Click += BtnOrdenar_Click;
        }
        private void BtnOrdenar_Click(object sender, EventArgs e)
        {
           //ordena os dados ascendente
            OrdenaDados(ascendente);
            this.ascendente = !ascendente;
        }
        //Inicializar Views
        private void InicializarViews()
        {
            lv = FindViewById<ListView>(Resource.Id.lv);
            btnOrdenar = FindViewById<Button>(Resource.Id.btnOrdenar);
            lv.ItemClick += Lv_ItemClick;
        }
            //exibe o nome o planeta selecionado ao clicar em um item no ListView
        private void Lv_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            using (var dialog = new AlertDialog.Builder(this))
            {
                int posicao = e.Position;
                string valor = planetas[posicao];
                dialog.SetTitle("Planeta Selecionado");
                dialog.SetMessage(valor);
                dialog.Show();
            }
        }
        //Preencher Listview
        private void PopularListView()
        {
            lv.Adapter = new ArrayAdapter(this, Android.Resource.Layout.SimpleListItem1, planetas);
        }
        /*
         * Ordenar
         */
        private void OrdenaDados(bool asc)
        {
            //Ordena o array :  ascendente e descendente
            if (asc)
            {
                Array.Sort(planetas);
            }
            else
            {
                Array.Reverse(planetas);
            }
            //Limpa e preenche o Listview (sem MVVM)
            PopularListView();
        }
    }
}

O código é bem simples e já esta comentado mas basicamente definimos os controles a serem usados , preenchemos o ListView e implementamos o método OrdenaDados() para ordenação.

A ordenação utiliza os seguintes métodos da classe Array:

No exemplo estamos usando a lista de strings definida em planetas, e estamos usando um leiaute de linha existente chamado SimpleListItem1, que representa uma única linha de texto, para definir a aparência do ListView. Este layout de item contém um único TextView permitindo exibir uma única linha de texto.

Nota:  Existem diversos layouts de itens de lista incorporados ao Xamarin.Android como : SimpleListItem2 , TwoLineListItem , ActivityListItem , SimpleListItem2 , TestListItem , etc.

 lv.Adapter = new ArrayAdapter(this, Android.Resource.Layout.SimpleListItem1, planetas);

Os argumentos usados são:

- O primeiro argumento é this :  é o contexto da aplicação;
- O segundo argumento é o leiaute definido no arquivo XML que possui o TextView para cada item do array. Estamos usando :  SimpleListItem1
- O terceiro argumento é o array de strings que será usado para preencher o texto da view;

Executando o projeto usando o emulador Genymotion iremos obter o seguinte resultado:

Na primeira imagem temos a ordenação ascendente, ao clicar no botão a ordenação e invertida e ao selecionar um item o nome o item é exibido na mensagem de alerta:

Pegue o projeto aqui :   Droid_ListView_Ordem.zip (sem as referências)

O Senhor reinará eterna e perpetuamente; Êxodo 15:18

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti