Android: Conhecendo o componente AutoCompleteTextView

Bom pessoal, na programação de um aplicativo existem várias funcionalidades, como podemos analisar nos códigos de posts mais antigos: Comunicação Bluetooth entre Arduino , Android Programação Bluetooth no Android e Android, Activities e como alternar entre várias telas. Notamos em alguns componentes para geração desses aplicativos suas estruturas de Layouts, TextView’s, Buttons. No Android são disponibilizadas diversas funcionalidades que ajudam na criação de um aplicativo interativo. Alguns outros componentes gráficos são: AlertDialog, Toast, Radio buttons, Spinners, Checkboxes, dentre outros.

 Ao longo do meu estudo sobre a programação android me deparei com alguns desses componentes citados acima. Mas hoje me dedicarei a mostrar para vocês um componente, de um campo de texto, que quando o usuário está digitando uma informação, será mostrado sugestões em uma lista automaticamente. Nesse post irei demonstrar alguns aplicações do AutoCompleteTextView. Para essa aplicação foi utilizado o Android Studio 2.1. O post está dividido na seguintes temáticas:

      1. AutoCompleteTextView – Usando um vetor de string;
      2. AutoCompleteTextView – Usando uma lista do arquivo string.xml;
      3. AutoCompleteTextView – Mudança na caixa de cores;
      4. AutoCompleteTextView – Com imagem, junto ao texto.

 

1 – AutoCompleteTextView – Usando um vetor de string

 Nessa aplicação irei demonstrar uma das maneiras mais simples da criação dessa funcionalidade, e também uma das maneiras que particularmente acho um pouco desorganizada, pois na criação de aplicativos geralmente é disponibilizado ao programador certas pastas para que possa organizar as funcionalidades do programa como arquivos: som, imagens, strings, outros códigos xml.

Mas vamos lá para ação, primeiramente a criação do aplicativo. Se você tiver alguma dúvida sobre como começar um aplicativo, confirar nosso post Usando Android Studio para criação de aplicativos, lá você poderá ter uma noção maior das hierarquia de diretórios de um projeto, é um conceito importante para entender tudo que será abordado aqui.

Sem mais delongas vamos lá, supondo que o projeto do aplicativo já está criado, ainda com código padrão (Hello Word). Vamos fazer a primeira alteração.

1.1 – Strings.xml

  Essa parte é bem simples, ela apresenta as seguintes características:

      • app_name: Nome que será atribuído ao aplicativo;
      • logo_do_dragao: Descrição de uma imagem colocada na activity (Coloquei para deixar o aplicativo bonitinho ;P);
      • digitar_o_mes: Um texto para o usuário visualizar antes de digitar a informação.

1.2 – Layout.xml

 Bom pessoal, vamos agora editar a activity_main.xml:

 A imagem abaixo da uma melhor noção de como fica a estrutura do Layout e as informações colocadas na strings.xml.

Figura 1 – Tela AutoCompleteTextView.Figura 1 - Tela AutoCompleteTextView

Parte da activity_main.xml foi gerada automaticamente, quando o projeto foi criado. Então, não comentarei sobre essa parte do código. As partes que irei abordar aqui serão as que estão grifadas no Código 2. Vamos lá esclarecer todas as mudanças:

      • RelativeLayout:
        • android:background="#FF40CC38": Estrutura para mudar a cor de fundo da tela (Cor verde, como demonstrado na Figura 1);
        • android:orientation="vertical": Especifica a direção do layout, nesse caso vertical.
      • ImageView: Uma estrutura de imagem
        • android:id="@+id/imageView":A identificação;
        • android:layout_width="100dp": Tamanho da largura que ocupa na tela, com uma dimensão 100dp;
        • android:layout_height="100dp": Tamanho da altura que ocupa na tela, com uma dimensão 100dp;
        • android:src="@drawable/logo": Local onde se encontra o arquivo de imagem;
        • android:contentDescription="@string/logo_do_dragao": Descrição da imagem;
        • android:layout_centerHorizontal="true":  Posição da imagem, nesse caso ela vai se posicionar no centro no sentido horizontal.
      • AutoCompleteTextView: Estrutura do auto complemento
        • android:id="@+id/acTexto": A identificação, importante para fazer a chamada no código java;
        • android:layout_width="wrap_content": Tamanho da largura que ocupa na tela, se adapta automaticamente;
        • android:layout_height="wrap_content": Tamanho da altura que ocupa na tela, se adapta automaticamente;
        • android:hint="@string/digitar_o_mes": A string que vai se mostrada dentro da caixa de texto;
        • android:layout_below="@+id/imageView": Posicionar a caixa de texto abaixo da imagem;
        • android:layout_centerHorizontal="true": Posição da imagem, nesse caso ela vai se posicionar no centro no sentido horizontal.

1.3 – MainActivity.java

  Agora para parte final do código onde a magia acontece:

 Figura 2 – Tela do aplicativo Autocomplemento.Figura 2 - Tela AutoCompleteTextView, funcional

 

 Como foi mostrado secção anterior não irei abordar partes que são criadas automaticamente, irei abordar aqui serão as que estão grifadas no Código 3. Vamos lá esclarecer todas as mudanças:

 Essa foi a primeira mudança onde são adicionado duas bibliotecasas:

      • ArrayAdapter: Onde você pode adicionar listas ou matrizes de objetos personalizados;
      • AutoCompleteTextView: Pacote onde você pode ativar a funcionalidade de autocomplemento.

Segunda parte adicionada:

      • MesesVetor: Criação de um objeto vetor do tipo string, onde será atribuído a ele todos os meses do ano.

Terceira parte adicionada:

      • Simplesmente adicionar um ícone na parte superior do aplicativo, como podemos observar na imagem abaixo.

Figura 3 – Ícone do aplicativo Autocomplemento.Terceira Tela-AutoCompleteTextView - Copy

 Quarta parte adicionada:

      • Essa parte já faz a ligação da activity_main.xml com MainActivity.java através do Id do componete,  pela função findViewById.

A quinta parte e última, foi declarado a estrutura ArrayAdapter que tem seguintes características:

      • Do tipo string;
      • This: Onde é aplicado a classe atual;
      • R.layout.simple_list_item_1: Tipo de layout para ser mostrado a lista;
      • MesesVetor: Vetor com as strings;

Depois colocamos todas as configurações do objeto adapter, na AutoCompleteTextView através da função acObjText.setAdapter(adapter).


– Nota

Para maiores informações você pode consultar o código completo e comentado na nossa página do GitHub:

Código AutoCompleteTextView – Usando um vetor de string

 


2 – AutoCompleteTextView – Usando uma lista do arquivo string.xml

 Bom pessoal, agora que já aprendemos uma forma de criar um aplicativo usando AutoCompleteTextView, vamos agora otimizar o código anterior. Como eu citei acima o android disponibiliza pastas e arquivos onde você pode organizar sua aplicação. Como todo o conteúdo de texto se encontra no arquivo strings.xml. Então iremos colocar todas as informações dos meses do ano no arquivo strings.xml.

2.1 – Strings.xml

      • MesesLista: É o nome de um vetor de strings que contém todos os meses do ano.

2.2 – MainActivity.java

 Bom vamos agora editar MainActivity.java, pois o layout da activity_main.xml vai ter a mesma configuração do código anterior. Vamos lá.

Vamos agora esclarecer as mudanças. Na primeira adicionamos duas novas bibliotecas:

      • Array: Esta classe contém vários métodos para a manipulação de matrizes e vetores;
      • List: Essa interface tem um controle preciso sobre onde na lista é inserida cada elemento. O usuário pode acessar os elementos pelo seu índice inteiro (posição na lista), e procurar elementos na lista.

      • tipoLayoutId: Uma simples variável onde será atribuído, o tipo de layout para ser mostrado a lista nesse caso R.layout.simple_list_item_1  ;

      • MesesVetor:  Contém uma lista de strings dos meses do ano, isso atravês do vetor que está contido na variável MesesLista no arquivo strings.xml ;

– Nota

Para maiores informações você pode consultar o código completo e comentado na nossa página do GitHub:

Código AutoCompleteTextView – Usando uma lista do arquivo string.xml

 


3 – AutoCompleteTextView – Mudança na caixa de cores

 Bom pessoal agora que mudamos a organização do texto, para melhorá na interação do código, que tal agora mudar um pouco as cores do aplicativo ? Vamos lá primeiramente selecionar umas cores para fundo, e uma cor para caixa de texto.

2.1 – Colors.xml

      • amber500: Adiciona a estrutura color a cor âmbar;
      • ciano500: Adiciona a estrutura color a cor ciano.

 

2.2 – Styles.xml

      • Autocomplete: Criar um estilo com as configurações:
        • Widget.AppCompat.Light.AutoCompleteTextView: Tema que será usado;
        • android:background: Configuração da cor de fundo do estilo;
        • colorControlActivated: Configuração da cor da caixa de texto do estilo.

3.3 – Layout.xml

      • Autocomplete: Essa parte é a declaração de tema que vamos adotar para o AutoCompleteTextView.

Na Figura abaixo podemos analisar o resultado dessas modificações:

Figura 4 – Ícone do aplicativo Autocomplemento.
Quarta Tela-AutoCompleteTextView

– Nota

Para maiores informações você pode consultar o código completo e comentado na nossa página do GitHub:

Código AutoCompleteTextView – Mudança na caixa de cores

 


4 – AutoCompleteTextView – Com imagem, junto ao texto

 Agora vamos implementar boa parte do código para que quando o usuário digite um texto ele mostra uma imagem do seu lado. Primeiramente vamos aos arquivos de imagens.

4.1 – Arquivo de imagens

 No link abaixo você pode encontrar todas as imagens referente aos meses do ano, são imagens com as abreviações dos meses exemplo, janeiro: JAN.

Downloads do Repositório: Arquivos de imagens do projeto

Figura 4 – Ícone do mês de janeiro.
imagem janeiro

Depois do download das imagens, vamos colocar na pasta de onde está localizado o projeto, por exemplo no caminho abaixo:

D:\Android\Projects\PrjDragaoAutoCompleteTextView\app\src\main\res\drawable

 Onde está o projeto do aplicativo você deve colocar todas as imagens dentro da pasta drawable, para que possamos fazer a ligação no código em java. Depois quando você abrir o projeto no android studio podera notar a seguinte característica na imagem abaixo:

Figura 5 – Conteúde da pasta drawable.

Quinta - Arquivos de imagens

4.2 – Activity_main.xml

 Vamos agora fazer uma pequena edição na activity_main.xml:

Vamos analisar as mudanças:

      • com.dragao.sem.chama.ClassAutoCompleteTextView: Estrutura que vai está ligada ao uma classe java que vamos criar.

      • android:layout_width="match_parent": Mudamos a largura para ocupar toda a tela.

      • android:completionThreshold="2": Realiza a função de só ativar o complemento depois que for digitado dois caracteres.

      • TextView:
        • android:id="@+id/seleMes": A identificação, importante para fazer a chamada no código java;
        • android:layout_width="wrap_content": Tamanho da largura que ocupa na tela, se adapta automaticamente;
        • android:layout_height="wrap_content": Tamanho da altura que ocupa na tela, se adapta automaticamente;
        • android:layout_centerHorizontal="true": Posição da texto, nesse caso ele vai se posicionar no centro no sentido horizontal.
        • android:layout_below="@id/acTexto": Posicionar a mensagem de texto abaixo da caixa de texto;

4.3 – Autocomplete_layout.xml

 Vamos criar um simples layout com o nome, autocomplete_layout ,para receber a imagem e texto do complemento.

      • LinearLayout:
        • android:layout_width="match_parent": Tamanho da largura para ocupar toda a tela;
        • android:layout_height="match_parent": Tamanho da altura para ocupar toda a tela;
        • android:orientation="horizontal": Especifica a direção do layout, nesse caso horizontal.
      • ImageView:
        • android:id="@+id/imaViewMes": A identificação, importante para fazer a chamada no código java;
        • android:layout_width="wrap_content": Tamanho da largura que ocupa na tela, se adapta automaticamente;
        • android:layout_height="wrap_content":  Tamanho da altura que ocupa na tela, se adapta automaticamente;
        • android:padding="10dp": Empurra o conteúdo 10 posições da tela.
      • TextView:
        • android:id="@+id/mesTexto": A identificação, importante para fazer a chamada no código java;
        • android:layout_width="wrap_content": Tamanho da largura que ocupa na tela, se adapta automaticamente;
        • android:layout_height="wrap_content": Tamanho da altura que ocupa na tela, se adapta automaticamente;
        • android:textSize="15dp": Tamanho do texto;
        • android:padding="10dp": Empurra o conteúdo 10 posições da tela.

4.4 – ClassAutoCompleteTextView.java

Vamos criar uma classe para personalizar a estrutura AutoCompleteTextView. Como essa classe vai retornar o item que foi selecionado na caixa de texto, então básicamente ele completa o texto digitado, depois da seleção, além de fazer a ligação com a estrutura criada na activity_main.xml.

4.5 – MainActivity.java

Vamos agora para estrutura principal.

Agora vamos analisar a estrutura do código.

Na primeira mudança adicionamos sete novas bibliotecas:

      • import android.view.View: Da acesso as funções que podem ser usados para construir uma interface de usuário;
      • import android.widget.AdapterView: Da acesso as funções do adapter para ter também acesso as pacotes OnItemClickListener;
      • import android.widget.SimpleAdapter: Da acesso as funções de uma lista de vetores;
      • import android.widget.TextView: Da acesso as funções de exibir o texto para o usuário.
      • import java.util.ArrayList: Da acesso as funções implementadas na interface List, ArrayList fornece métodos para manipular o tamanho da matriz que é usada internamente para armazenar a lista;
      • import java.util.HashMap: Da acesso as funções de operações de mapas, sobre certas informações;
      • import java.util.List: Da acesso as funções que implementa todas as operações de lista.

      • imagensMes: É um vetor com todas as localizações das imagens dos mesês.

      • objAqui: Objeto que vai receber os nomes que serão atribuidos para estrutura Hashmap;
      • objPara: Objeto que vai receber os endereços onde será colocado a imagem e texto com o mês.

      • MesesVetor: Vai receber todas as strings dos meses, que estão localizadas no arquivo strings.xml.

      • armListMesIma: Variável que vai ter como função de armazenar os locais da imagem e do texto em ordem.

      • Através dessa função, que tem o tamanho do vetor imagensMes, podemos, atribuir o endereço e o texto do mês ao uma lista que tem o nome armListMesIma.

      • adapter: Colocamos todas as configurações do objeto e conteúdos nessa variável.

      • acObjTex: Objeto que será da referência pela classe ClassAutoCompleteTextView.java e está ligado ao conteúdo do layout activity_main.xml.

      • É o evento que realiza, a função de monstrar ao usuário, o texto que foi selecionado ao clicar.

      •  Configurações finais para colocar as informações para ser visualizadas ao usuário.

 Por fim podemos ver o resultado na imagem abaixo.

Figura 5 -Tela do aplicativo Autocomplemento.

Quinta Tela-AutoCompleteTextView


– Nota

Para maiores informações você pode consultar o código completo e comentado na nossa página do GitHub:

Código AutoCompleteTextView – Com imagem, junto ao texto



– Referências:


Obrigado ;)

 

Márcio Albuquerque

Estudante de Engenharia de Computação – UFC
Conhecimentos:
Em Programação Android, Arduino, C/C++, Blender, Raspberry Pi entre outros.

Amante de fotografia e livros;

Mais sobre mim: http://lattes.cnpq.br/2965285710576270

One thought to “Android: Conhecendo o componente AutoCompleteTextView”

Leave a Reply

Your email address will not be published. Required fields are marked *