Desenvolvimento para Android - Utilizando uma ListView

17 Feb 2012 . category: article . Comments
#android #java #mobile #desenvolvimento #carnandroid

Introdução

Pretendo neste carnaval escrever uma série de artigos sobre desenvolvimento de aplicações Android. Como em todos os artigos sobre desenvolvimento que escrevo, os códigos utilizados estão disponíveis no github do site.

Pretendo escrever cerca de três posts, sempre incrementando o mesmo exemplo. No repositório, irei criar uma tag separando as mudanças em cada post.

Objetivo deste artigo

Este primeiro artigo da série irá mostrar uma forma de criar uma lista persionalizada. No exemplo será apresentado uma lista de linguagens de programação com o título da linguagem em destaque e logo abaixo, como uma fonte menor, com uma pequena descrição. Bom, de qualquer forma o conteúdo é irrelevante, o importante é a forma de fazê-lo.

Estou levando em consideração que você já tem alguma familiaridade com o desenvolvimento de aplicações para Android e que você já tem o seu ambiente rodando.

Implementação

O primeiro passo é criar um novo arquivo de layout. Abaixo está o arquivo criado para esse exemplo. É algo bem simples, um LinearLayout contento dois TextView’s, o primeiro exibirá o nome da linguagem e o segundo a descrição.

Os TextView’s deveram conter o atributo “android:id”, é por meio dele que iremos recuperar a referência destes elementos.

Arquivo: linguagem.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:layout_margin="5dip"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/txtLinguagem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/txtDescricao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

Temos que criar uma classe que irá ligar nossos dados à interface. Essa classe deve herdar a classe ArrayAdapter, essa classe realmente servirá como adaptador das nossas informações com a interface. Vamos criar a classe chamada LinguagemArrayAdapter. O código está comentado, mas se houver alguma dúvida, por favor, utilize os comentários do post.

Arquivo: LinguagemArrayAdapter.java

package com.diegorubin.search_list;

import java.util.ArrayList;
import java.util.List;

import org.json.JSONObject;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

/*
 * Criaremos um ArrayAdapter para uma lista de objetos json.
 * Podemos criar um ArrayAdapter para qualquer tipo de objeto.
 * 
 */
public class LinguagemArrayAdapter extends ArrayAdapter<JSONObject> {
  private static final String tag = "LinguagemArrayAdapter";
  private Context context;
  private String directory;

  // Elementos de cada linha da lista
  private TextView txtLinguagem;
  private TextView txtDescricao;
  
  private List<JSONObject> elements = new ArrayList<JSONObject>();

  public LinguagemArrayAdapter(Context context, int textViewResourceId,
      List<JSONObject> objects) {
    super(context, textViewResourceId, objects);
   
    // Salva o contexto da aplicação
    this.context = context;
    
    // Lista de elementos que serão utilizados para a contrução da lista
    this.elements = objects;
  }

  public int getCount() {
    return this.elements.size();
  }
  
  public JSONObject getItem(int index) {
    return this.elements.get(index);
  }
  
  /*
   * Setando os valores dos objetos em cada linha da lista
   */
  public View getView(int position, View convertView, ViewGroup parent) {
    View row = convertView;
    if (row == null) {
      LayoutInflater inflater = (LayoutInflater) this.getContext()
          .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      
      // layout que será utilizado na criação de cada linha da lista
      row = inflater.inflate(R.layout.linguagem, parent, false);
    }

    // Get item
    JSONObject category = getItem(position);

    // Recuperando referencia dos elementos da interface
    txtLinguagem = (TextView) row.findViewById(R.id.txtLinguagem);
    txtDescricao = (TextView) row.findViewById(R.id.txtDescricao);
    
    // Setando valores
    txtLinguagem.setText(category.optString("nome", ""));
    txtDescricao.setText(category.optString("descricao", ""));
    
    return row;
  }
}

Feito isso, nossa próxima etapa será exibir nossas informações na tela. Para isso iremos adicionar ao nosso arquivo de layout principal um widget do tipo ListView. O arquivo de layout em questão é o main.xml.

Arquivo: 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" >

    <ListView android:id="@+id/lstLinguagens"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:dividerHeight="1dip">
    </ListView>

</LinearLayout>

Agora em nossa classe principal, no método onCreate iremos criar um lista de dados fake para podermos testar nossa lista.

Arquivo: SearchListActivity.xml

import java.util.ArrayList;
import java.util.List;

import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Toast;

public class SearchListActivity extends Activity {
  
    private ListView lstLinguagens;
    private List<JSONObject> linguagens;
    private LinguagemArrayAdapter adapter;
  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // Criação de uma lista quer será utilizada em nosso adapter
        linguagens = new ArrayList<JSONObject>();
        
        // Informações que serão utilizados no exemplo
        try {
          JSONObject ruby = new JSONObject();
          ruby.put("nome", "Ruby");
          ruby.put("descricao", "Sobre a linguagem Ruby");
          linguagens.add(ruby);
          
          JSONObject python = new JSONObject();
          python.put("nome", "Python");
          python.put("descricao", "Sobre a linguagem Python");
          linguagens.add(python);
          
          JSONObject perl = new JSONObject();
          perl.put("nome", "Perl");
          perl.put("descricao", "Sobre a linuguagem Perl");
          linguagens.add(perl);
          
        } catch (JSONException e) {
          // Tratando possivel exception ao adicionar informacoes no json
        }
        
        // Passamos a lista de exemplo para gerar nosso adpater
        adapter = new LinguagemArrayAdapter(getApplicationContext(), R.layout.linguagem, linguagens);
        
        // Buscando o elemento Listview da nossa interface principal interface 
        lstLinguagens = (ListView) findViewById(R.id.lstLinguagens);
        // Setando o adapter em nossa ListView
        lstLinguagens.setAdapter(adapter);
        
        // Setando callback ao selecionar um item da lista
        lstLinguagens.setOnItemClickListener(new OnItemClickListener() {
          
          public void onItemClick(AdapterView<?> parent, View view,
                                  int position, long id) {
            
            try{
              JSONObject linguagem = linguagens.get(position);
              String descricao = linguagem.getString("descricao");
              Toast.makeText(getApplicationContext(), descricao, 10000).show();
            }catch (JSONException e) {
            }
          }
          
        });
        
    }
}

Além de criar o adpatador iremos criar um callback para a nossa lista. Quando um item da lista receber um toque(ou clique) um pequeno “alerta” será exibido com a descrição do item selecionado. Esse é um modo de fazê-lo, se o callback for muito grande, recomento criar uma classe que herde de Adapterview.OnItemClickListener que deverá implementar o método publico onItemClick.

Conclusão

Este exemplo é bem simples porém recorrente. Ao entender o exemplo e os conceitos nele contido uma gama muito grande de possibilidades é aberta.

Esse foi o primeiro artigo da série, no próximo quero abordar o uso do banco de dados SQLite nas aplicações.

E reforçando, qualquer dúvida ou sugestão, utilize o sistema de comentários do site.

[]’s


Me

Tenho estudado esse mundo mágico da programação desde 2005. Já consegui sustentar minha família usando Ruby, Java, Python, C++ e Javascript. O resto tenho usado para diversão ou aprendizado.