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.
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.
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.
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