Componente Listview no Android Studio

O ListView é um componente visual utilizado para o Android onde sua finalidade é de armazenar uma ampla quantidade de informações e com o poderio de atualizar, receber e enviar eventos dinamicamente. Nesse artigo o ambiente de desenvolvimento a ser utilizado é o Android Studio, que além de possuir uma estrutura poderosa dividida em layouts de tela e de códigos, é muito leve e de fácil manipulação do usuário. O objetivo desse artigo é criar um aplicativo através de uma lista contendo menus e eventos em cada um, configurar permissões para internet e chamadas telefônicas e também desenvolver uma tela “Sobre” para a prática na navegação entre telas.

O emulador da máquina virtual compatível com o Android Studio e recomendado é o Genymotion, com o dispositivo virtual Google Nexus 5 – 5.0.0 – API 21 – 1080x1920 e também é necessário ter o JDK (Java SE Development Kit) com a versão 7 ou superior instalado na máquina.

Um Pouco sobre Android

Android é um sistema operacional voltado para dispositivos móveis. Possui interface por manipulação direta através de touch e seus elementos são de forma robusta, mudança de orientação de tela, os seus aplicativos em sua maioria estão na loja Google Play, tem alta recepção no mercado, o seu gerenciamento de memória por padrão é com economia de energia.

Algumas das vantagens do Android são: segurança, privacidade, possibilidade de uso em modo anônimo e seu código é aberto.

A arquitetura do Android é dividida em camadas, ou seja, cada parte é responsável por gerenciar seus respectivos processos. Essas camadas podem ser divididas em níveis zero, um, dois e três.

Nível 3: Camada de Aplicações

• Constituem de funções básicas do dispositivo;
• Possui interação entre o usuário e o dispositivo móvel;
• Organizam também em aplicativos, cliente de e-mail, programa de SMS, calendário, mapas, navegador, contatos entre outros.

Nível 2: Camada de Framework de Aplicação

• Contém programas que gerenciam as aplicações básicas do telefone;
• Tem acesso total ao framework como um conjunto de ferramentas simples com o qual possibilita construir ferramentas mais complexas;

Nível 1: Bibliotecas

• São um conjunto de instruções que dizem ao dispositivo como lidar com diferentes tipos de dados, incluindo um conjunto de biblioteca C/C + +;
• Possui relações com a parte Multimídia;
• Organizam se também em camadas 2D e 3D;
• Possibilitam a navegação Web;
• Armazenam gráficos, funções, imagens e acesso ao banco de dados SQLite.

Nível 1: Runtime

• Constitui em um conjunto de bibliotecas do núcleo Java (Core Libraries);
• Para desenvolver aplicações para o Android, se utiliza a linguagem de programação Java;
• Contém a Máquina Virtual Dalvik (para cada aplicação no Android) trazendo melhor desempenho e executa vários processos paralelamente.

Nível 0: Kernel (Linux)

• Camada derivada do kernel 2.6 do Linux;
• Contém programas de gerenciamento de memória;
• Gerenciam configurações de segurança;
• Possui drivers de hardware;
• Faz os controles de processos;
• Controla o gerenciamento de memória, threads, rede e segurança.

Genymotion

Genymotion é um software de emulação do Android onde permite que o usuário execute o sistema operacional do Google no Windows.

A vantagem desse aplicativo é que ele oferece imagens de edições diversas desse sistema operacional incluindo Jelly Bean, posteriormente denominado Nexus S e suas evoluções, dentre outros dispositivos.

Quando o Genymotion é emulado, ele não apenas roda o Android na máquina, ele também conta com suporte para redes de conexão à internet (Wi-Fi), recursos como GPS, ADB e integrações com Android Studio e Eclipse.

Talvez a única 'desvantagem' seja ter que fazer cadastro, mas depois de feito isso, poderá fazer downloads necessários. Para usar o Genymotion, basta autenticar a inicialização do programa inserindo os dados de login recém-criados.

Após isso, o aplicativo exibe uma tela com a lista de imagens do Android disponíveis. Tem que selecionar a versão requerida e carregá-la. Após o término desse processo, para iniciar a emulação, é só clicar em 'Play' ou 'Start' em outras versões. Feito todos esses procedimentos, é só esperar o carregamento do sistema

O Projeto

Tendo o Android Studio instalado, será criado o projeto clicando no menu Quick Start, bastando clicar em “Start a new Android Studio project", como mostra a Figura 1.

Será apresentada a janela seguinte para configurar as seguintes sugestões:

• Nome: Listas;
• Domínio (obrigatório estar separado por pontos): listas.devmedia.br.listas
• Localização: D:\Listas.

Veja como fica na Figura 2.

Ao clicar em Next, será apresentada uma janela para escolher a plataforma do projeto. Vamos usar a Phone/Tablet, como mostra a Figura 3.

Escolha a opção Blank Activity para iniciarmos. Clicando em Next vai aparecer a janela para colocar o nome da Atividade, o nome do layout, título e o nome do recurso. Para o nosso projeto pode deixar por padrão o que foi gerado automaticamente. Finalize clicando em Finish.

Hierarquia das Partes no Android Studio

Após ter criado o projeto, será gerada uma hierarquia pronta para desenvolvimento, como mostra a Figura 4.

Os nossos arquivos principais são activity_main.xml (na pasta layout) e a Atividade Principal: MainActivity (no diretório listas.devmedia.br.listas).

Já na parte central da tela do Android Studio será apresentado a estrutura da Figura 5.

Na parte centralizada da figura vemos o dispositivo móvel pronto para receber os elementos. Na parte superior estão as configurações do smartphone e a versão do Android instalado. Na parte inferior temos as abas Design e Text (programação).

Tela 'Sobre'

Vamos criar uma nova atividade para tela Sobre da nossa aplicação. Para isso, basta clicar com o botão direito no diretório listas.devmedia.br.listas e ir em New → Activity → Blank Activity. Será aberta uma nova janela e configure de acordo com os dados a seguir:

• Nome: actSobre;
• Título: Sobre;
• Hierarchical Parent: clique no botão [...] e selecione automaticamente a tela ancestral que nesse caso é o MainActivity

Veja como fica na Figura 6.

Clique em Finish para confirmar as configurações. No arquivo menu_main.xml devemos inserir os códigos referentes a Listagem 1, responsável por nomear o diretório atual, tornar a página MainActivity como principal, criar um botão denominado Setting (configurações) e outro botão denominado Gravar, demonstrando que é possível criar botões dentro do menu principal.

<menu 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" tools:context=".MainActivity">
    <item android:id="@+id/action_settings" android:title="@string/action_settings"
        android:orderInCategory="100" app:showAsAction="never" />
    <item android:id="@+id/action_gravar" android:title="Gravar"
        android:orderInCategory="101" app:showAsAction="always" />
</menu>

No arquivo menu_actSobre.xml será colocado o código referente a Listagem 2, responsável por manter o controle de navegação e identidade de esquemas com relação a tela Sobre, e permitir receber eventos.

<menu 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" tools:context="br.unoeste.listas.ActSobre">
    <item android:id="@+id/action_settings" android:title="@string/action_settings"
        android:orderInCategory="100" app:showAsAction="never" />
</menu>

No arquivo activity_act_sobre.xml, localizado no caminho res/layout, acrescente o código da Listagem 3, responsável em definir as dimensões da altura e largura do layout, além de definir a orientação superior, inferior direita e esquerda da tela. Além disso, inserimos um componente TextView (texto), onde está configurado um texto para exibição, a largura, altura, tamanho, cor e posições com relação a tela

<RelativeLayout 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="listas.devmedia.br.listas.actSobre">
 
    <TextView android:text="Tela de Sobre DEVMEDIA" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textColor="#ff0e18ff"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
 
</RelativeLayout> 

No arquivo actSobre (localizado no diretório listas.devmedia.br.listas) será inserido o código referente a Listagem 4.

package listas.devmedia.br.listas;
 
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
 
 
public class actSobre extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_act_sobre);
    }
 
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_act_sobre, menu);
        return true;
    }                                                                                                                                                           
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (id == R.id.action_settings) {
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
}

Esse código é gerado automaticamente no momento da criação da Atividade Sobre e é responsável em manter um controle sobre as ações e interações do arquivo actSobre.

Tela Principal com Lista

No arquivo activity_main.xml na aba Text será colocado o código da Listagem 5.

<RelativeLayout 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=".MainActivity">
 
    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lvopcoes"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />
 
</RelativeLayout>

Esse código é responsável por definir os controles sobre a tela e suas configurações. Além disso, é adicionado o componente ListView que contém suas especificações de altura, largura, id, dimensões e propriedades.

Implementação da Tela Principal

A tela principal será composta de uma lista onde cada item será responsável por um evento diferente. Dentro do arquivo MainActivity (localizado no diretório listas.devmedia.br.listas), coloque o seguinte código da Listagem 6.

package listas.devmedia.br.listas;
 
import android.content.Intent;
import android.net.Uri;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
 
import java.util.ArrayList;
import java.util.List;
 
 
public class MainActivity extends ActionBarActivity {
    List<String> opcoes;
    ArrayAdapter<String> adaptador;
    ListView lvOpcoes;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lvOpcoes = (ListView) findViewById(R.id.lvopcoes);
 
        opcoes = new ArrayList<String>();
 
        opcoes.add("Navegar na Internet");
        opcoes.add("Fazer uma ligação");
        opcoes.add("Sobre");
        opcoes.add("Sair");
 
        adaptador = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, opcoes);
        lvOpcoes.setAdapter(adaptador);
        lvOpcoes.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                switch (position){
                    case 0: navegarInternet();
                        break;
                    case 1: fazerLigacao();
                        break;
                    case 2: exibirSobre();
                        break;
                    case 3: finish();
                        break;
                }
            }
        });
    }
 
    private void exibirSobre() {
        Intent it = new Intent(MainActivity.this, actSobre.class);
        startActivity(it);
    }
 
    private void fazerLigacao() {
        Uri uri = Uri.parse("tel:0123456789012"); 
        Intent itNavegar = new Intent(Intent.ACTION_DIAL,uri);
        startActivity(itNavegar);
    }
 
    private void navegarInternet() {
        Uri uri = Uri.parse("//www.devmedia.com.br");
        Intent itNavegar = new Intent(Intent.ACTION_VIEW,uri);
        startActivity(itNavegar);
    }
 
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.action_settings) {
            Toast.makeText(this,"Selecionou em configuração",Toast.LENGTH_SHORT).show();
            return true;
        }
 
        if (item.getItemId() == R.id.action_gravar) {
            Toast.makeText(this,"Selecionou em gravar",Toast.LENGTH_SHORT).show();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Esse código é responsável por exibir uma lista de opções na tela.

Através de um List (denominado de opções) são armazenados os dados através de um ArrayList, que é um conjunto de menus.

O ArrayAdapter (com o nome de adaptador) é responsável por manter uma ligação entre os dados a serem inseridos na tela e o componente em si (localizado na parte layout).

O ListView (chamado de lvOpcoes) é o componente que recebe o adaptador e todos os seus eventos que passam a ser incrementados.

É criado um método onItemClick do tipo AdapterView que descrimina cada item da posição caso o usuário aperte em algum elemento da lista na tela. Assim, o método será chamado:

• A Posição 0 (ou seja o primeiro item da lista) chama o método navegarInternet();
• A Posição 1 (segundo item) chama o método fazerLigacao();
• A Posição 2 (terceiro item), chama o método exibirSobre();
• E caso o usuário selecione a Posição 3, então é chamado o método finish(), responsável por sair da aplicação.

O método exibirSobre() ilustra um dos objetivos desse artigo que é chamar a outra tela Sobre que contém instruções de navegações de tela.

O método fazerLigacao() é responsável por chamar uma outra tela e ao mesmo tempo passar por parâmetro o número para fazer uma ligação. O código Intent.ACTION_DIAL é o que realiza essa interação.

O método navegarInternet(), que contém o código Intent.ACTION_VIEW, é responsável por fazer uma transição de tela onde o navegador de Internet entra em ação, passando por parâmetro (uri) o endereço do site.

O método onOptionsItemSelected(MenuItem item) passa por parâmetro o item que o usuário selecionou. Esse menu se localiza na parte superior da tela, onde é criada uma condição (if) na qual se é selecionado o item action_settings então surge uma mensagem afirmando que selecionou a Configuração, se é selecionado o item action_gravar, então aparece na tela afirmando que selecionou Gravar.

Arquivo ANDROIDMANIFEST.XML

O AndroidManifest.xml é o arquivo principal do projeto e nele ficam todas as configurações. Obrigatoriamente ele tem que ficar na pasta raiz do projeto e conter todas as configurações necessárias para executar o projeto, como o nome do pacote que está sendo utilizado, os nomes das classes de cada atividade e várias outras configurações.

No interior da tag é preciso declarar o pacote principal do projeto: por conta disso é utilizada a tag .

Cada activity do projeto deve ser obrigatoriamente declarada no arquivo AndroidManifest.xml. Caso não esteja, então não é possível utilizar a atividade. Ao declarar a activity é utilizada a tag , recebendo o nome da classe, que é sempre relativa ao pacote principal.

Nesse arquivo serão anexados o seguinte código da Listagem 7.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="listas.devmedia.br.listas" >
 
    <uses-permission android:name="INTERNET" />
    <uses-permission android:name="android.permission.CALL_PHONE" />
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".actSobre"
            android:label="@string/title_activity_act_sobre"
            android:parentActivityName=".MainActivity" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="listas.devmedia.br.listas.MainActivity" />
        </activity>
    </application>
 
</manifest>

Para que o aplicativo utilize as permissões para Internet, então é implementado o código . Além disso, para que o aplicativo utilize as permissões de chamadas telefônicas, usamos o código .

O restante do arquivo foi gerado automaticamente desde a criação do projeto até a criação de novas atividades.

Para finalizar, basta iniciar o ambiente de virtualização Genymotion com o dispositivo virtual já instalado por fins de emulação. Execute o projeto indo no Android Studio e clicando em Run, localizado na parte superior do ambiente ou aperte as teclas de atalho Shift+F10.

A tela principal do aplicativo deve ficar idêntica a Figura 7.

Veja como é simples trabalhar com o Android Studio, pois boa parte da programação é gerada pelo mesmo, ajudando na produtividade do programador.

Aprenda mais sobre Android

Android Layouts: Aprendendo técnicas de Layout no Android

Artigo

Desenvolvimento com Android: Recursos da Plataforma Android

Artigo

Android MVC: Criando um Framework Model-View-Controller para Android

Artigo