pdm_aula07C_ListView_Basico_Pessoa

Prévia do material em texto

PDM - Aula07- Ver 01 - 31/10/2012 14:36
Programação de Dispositivos Móveis
Aula 07
Interface Gráfica – ListView (ArrayAdapter, SimpleAdapter, PessoaAdapter)
Um elemento muito utilizado em aplicativos é o ListView, com ele pode-se criar uma lista de objetos. Objetos porque pode-se fazer uma lista de qualquer coisa, mostrando qualquer informação. E esta lista pode conter ações e mostrar outras listas.
Exemplos
Para se fazer uma lista de palavras basta fazer:
No arquivo de layout criar um elemento <ListView /> com ID;
Na activity criar um ArrayAdapter que receberá uma List<String>;
Ainda na activity pegar essa ListView e adicionar um adapter através de um setAdapter
Aplicação Android (Aula07C)
O aplicativo Aula07C vai permitir verificar a funcionalidade de três formas de ListView, usando ArrayAdapter, SimpleAdapter e PessoaAdapter. Primeiro vamos definir o layout que com o ListView que vai ser usado nas três formas. O layout básico aparece na listagem 1.
Listagem 1. exemplo_listview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
 
	<TextView
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="@string/listViewTitulo" />
	
	<ListView android:id="@+id/listviewBasico"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content" 
		android:textColor="#000000" />
</LinearLayout>
XML de layout com a ListView que apresentará a lista de palavras
Código Java para o preenchimento de uma ListView com um ArrayAdapter simples. 
Listagem 2. ExemploListViewBasico1.java
package com.pdm.aula07c;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ExemploListViewBasico1 extends Activity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.exemplo_listview);
		List<String> lista = getExampleList();
		ArrayAdapter<String> ad = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_2, android.R.id.text1, lista);
		ListView lv = (ListView) findViewById(R.id.listviewBasico);
		lv.setAdapter(ad);
	}
	
	private List<String> getExampleList() {
		List<String> lista = new ArrayList<String>();
		for (int i = 0; i < 10; i++) {
			lista.add("exemplo " + i);
		}
		return lista;
	}
}
E o resultado é mostrado abaixo:
O exemplo acima pode ser modificado para ter duas linhas (para cada linha da ListView), como é normalmente utilizado. Para essa tarefa basta mudar de ArrayAdapter para SimpleAdapter, e de List<String> para List<Map<String, String>>, como mostrado abaixo:
Listagem 3. ExemploListViewBasico2.java
package com.pdm.aula07c;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class ExemploListViewBasico2 extends Activity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.exemplo_listview);
		
		List<Map<String, String>> lista = getExampleList();
		
		String[] chave = { "linha1", "linha2" };
		int[] conteudo = { android.R.id.text1, android.R.id.text2 };
		SimpleAdapter ad = new SimpleAdapter(this, lista, android.R.layout.simple_list_item_2, chave, conteudo);
		ListView lv = (ListView) findViewById(R.id.listviewBasico);
		lv.setAdapter(ad);
	}
	
	private List<Map<String, String>> getExampleList() {
		List<Map<String, String>> lista = new ArrayList<Map<String, String>>();
		for (int i = 0; i < 10; i++) {
			Map<String, String> mapa = new HashMap<String, String>();
			mapa.put("linha1", "Outro Valor " + String.format("%c", i + 65));
			mapa.put("linha2", "Alguma coisa mais " + i);
			lista.add(mapa);
		}
		return lista;
	}
}
Código Java para o preenchimento de uma ListView com um SimpleAdapter mostrando duas informações por linha.
O arquivo de layout não mudou em nada para que seja mostrada essas informações. E o resultado é mostrado abaixo:
O problema está em listas mais complexas com mais informações, imagens, minimapas, Ids, Nomes... Todas as informações ao mesmo tempo. E se a ListView precisar de um checkBox que faça alguma ação? E se cada linha precisar de um botão ou uma imagem customizada? Para isso se faz necessário um "custom adapter" ele é o responsável por preencher a view com os elementos necessários (textos, imagens, botões...) e customizar esses elementos.
Existem dois passos para fazer a montagem: O primeiro é criar o layout que se quer isso é, como as informações serão dispostas em cada linha da ListView; O segundo é a criação do adapter para preencher essa View.
O primeiro passo:
Para o layout será seguida a linha de pensamento abaixo como mostrado no desenho:
Esse é como deve ser cada item da ListView, depois de feito o rascunho basta implementa-lo no XML de layout. Para isso é criado um novo arquivo XML de layout como descrito abaixo:
Listagem 4. pessoa_layout.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="70dip"
	android:paddingTop="5dip"
	android:paddingBottom="5dip"
	android:orientation="horizontal" >
	
	<ImageView android:id="@+id/image"
		android:layout_width="40dip"
		android:layout_height="40dip" />
<!-- layout onde ficam os dois textos -->
	<LinearLayout
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:layout_weight="1"
		android:orientation="vertical" >
		
		<TextView android:id="@+id/tv1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" />
		
		<TextView android:id="@+id/tv2"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" />
		
		<TextView android:id="@+id/tv3"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" />
	</LinearLayout>
<!-- layout onde fica o radio group -->
	<LinearLayout
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:layout_width="110dip"
		android:layout_height="match_parent"
		android:gravity="center_vertical"
		android:orientation="horizontal" >
		
		<RadioGroup android:id="@+id/radios"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:orientation="horizontal"
			android:layout_marginRight="15dip" >
		<RadioButton android:id="@+id/rd1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="8dip"
			android:text="M"/>
		
		<RadioButton android:id="@+id/rd2"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="8dip"
			android:text="F" />
		</RadioGroup>
	</LinearLayout>
<!-- layout onde fica o checkbox -->
	<LinearLayout
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:layout_width="40dip"
		android:layout_height="match_parent"
		android:gravity="right|center_vertical"
		android:orientation="vertical" >
		
		<CheckBox android:id="@+id/ch1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" />
			
	</LinearLayout>
</LinearLayout>
Listagem 5. Pessoa.java
package com.pdm.aula07c;
public class Pessoa {
	private String name;
	private String phone;
	private String email;
	private Type type;
	private boolean client;
	
	public Pessoa() {}
	
	public Pessoa(String name, String phone, String email, Type type, boolean client) {
		this.name = name;
		this.phone = phone;
		this.email = email;
		this.type = type;
		this.client = client;}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public Type getType() {
		return type;
	}
	public void setType(Type type) {
		this.type = type;
	}
	public boolean isClient() {
		return client;
	}
	public void setClient(boolean client) {
		this.client = client;
	}
	public enum Type {
		FEMALE, MALE;
	}
}
Segundo Passo: 
Para o adapter vamos criar o PessoaAdapter. Depois de feito o layout é criada uma classe que extende de ArrayAdapter<Qualquer>, o objeto Qualquer é a representação do que significaria cada linha da ListView, ele pode ser uma "tarefa", "vistoria", "todo", "Pessoa", "cadastro", e por ai vai. Neste caso cada linha representa o cadastro de uma pessoa logo, o objeto Pessoa tem uma imagem, duas strings, um enum e um boolean.
Para o adapter funcionar são necessários sobre-escrever alguns métodos, o unico obrigatório neste momento é o método getView.
Tem-se uma instancia de LayoutInflater responsável por "inflar" uma view e ter acesso aos seus atributos.
Tem-se o método responsável por criar cada linha da ListView, ele é invocado conforme a necessidade (itens aparecendo na tela) e no momento não se teve preocupação com reutilização de views ou view holder ou outras melhores práticas. Dentro desse método é capturado cada item do layout e adicionado uma ação ou feito algo com ele.
Listagem 6. PessoaAdapter.java
package com.pdm.aula07c;
import java.util.List;
import com.pdm.aula07c.Pessoa.Type;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.TextView;
public class PessoaAdapter extends ArrayAdapter<Pessoa> {
	/*
	* Usado para instanciar layout XML com os seus correspondentes Views
	*/
	private final LayoutInflater inflater;
	/*
	* cada list item layout tem um ID
	*/
	private final int resourceId;
	
	public PessoaAdapter(Context context, int resourceId, List<Pessoa> objects) {
		super(context, resourceId, objects);
		this.inflater = LayoutInflater.from(context);
		this.resourceId = resourceId;
	}
	
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		//get the pessoa from position
		Pessoa pessoa = getItem(position);
		
		// get a new View no matter recycling or ViewHolder FIXME
		convertView = inflater.inflate(resourceId, parent, false);
		
		//get all object from view
		ImageView image = (ImageView) convertView.findViewById(R.id.image);
		TextView name = (TextView) convertView.findViewById(R.id.tv1);
		TextView phone = (TextView) convertView.findViewById(R.id.tv2);
		TextView email = (TextView) convertView.findViewById(R.id.tv3);
		RadioButton male = (RadioButton) convertView.findViewById(R.id.rd1);
		RadioButton female = (RadioButton) convertView.findViewById(R.id.rd2);
		CheckBox client = (CheckBox) convertView.findViewById(R.id.ch1);
		
		//fill the view objects according values from pessoa object
		name.setText(pessoa.getName());
		phone.setText(pessoa.getPhone());
		email.setText(pessoa.getEmail());
		
		if(pessoa.getType() == Type.FEMALE){
			female.setChecked(true);
			image.setImageResource(R.drawable.smile1);
		}else{
			male.setChecked(true);
			image.setImageResource(R.drawable.smile2);
		}
		if(pessoa.isClient()){
			client.setChecked(true);
		}
		return convertView;
	}
}
Agora a Activity que trabalha com o ListView. Como pode ser visto, a activity é igual a qualquer outra que contenha uma ListView. A mágica é feita pelo PessoaAdapter.
package com.pdm.aula07c;
import java.util.ArrayList;
import java.util.List;
import com.pdm.aula07c.Pessoa.Type;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ExemploListViewPessoa extends Activity{
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.exemplo_listview);
		
		List listaPessoas = criarListaPessoas();
		ArrayAdapter ad = new PessoaAdapter(this, R.layout.pessoa_layout, listaPessoas);
		ListView lv = (ListView) findViewById(R.id.listviewBasico);
		lv.setAdapter(ad);
	}
	
	private List criarListaPessoas(){
		List pessoas = new ArrayList();
		pessoas.add(new Pessoa("Grace L. Carnell","gcarnell@we.com", "410-754-5031",Type.FEMALE, true));
		pessoas.add(new Pessoa("Earl A. Palacios","epalacios@we.com","805-201-0095",Type.MALE, false));
		pessoas.add(new Pessoa("Christopher H. Keith","ckeith@we.com","209-622-9306",Type.MALE, false));
		pessoas.add(new Pessoa("Sandra E. Jones","sjones@we.com","765-412-3886",Type.FEMALE, true));
		pessoas.add(new Pessoa("Julie A. Miller","jmiller@we.com","818-753-1270",Type.FEMALE, true));
		pessoas.add(new Pessoa("Chantelle V. Bui","cbui@we.com","501-346-6679",Type.FEMALE, true));
		pessoas.add(new Pessoa("Stephen V. Stpeter","sstpeter@we.com","203-523-2737",Type.MALE, false));
		pessoas.add(new Pessoa("Lisa J. Ayala","layala@we.com","940-382-5503",Type.FEMALE, true));
		return pessoas;
	}
}
Agora o layout da tela principal.
	
Listagem 7. 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" >
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/hello" />
 
 	<Button android:id="@+id/buttonListViewBasico"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="ListView Básico1" />
 
 <Button android:id="@+id/buttonListViewBasico2"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="ListView Básico2" />
 <Button android:id="@+id/buttonListViewItem"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="ListView Pessoa" /> 
</LinearLayout>
Agora a activity principal que representa a primeira tela.
Listagem 8. Aula07CActivity.java
package com.pdm.aula07c;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class Aula7CActivity extends Activity implements OnClickListener{
	
	Button b1,b2,b3;
	
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 b1 = (Button) this.findViewById(R.id.buttonListViewBasico);
 b1.setOnClickListener(this);
 b2 = (Button) this.findViewById(R.id.buttonListViewBasico2);
 b2.setOnClickListener(this);
 b3 = (Button) this.findViewById(R.id.buttonListViewItem);
 b3.setOnClickListener(this); 
 }
 
	public void onClick(View v){
		if (v.getId() == b1.getId()){
			startActivity(new Intent(this, ExemploListViewBasico1.class));
		}
		if (v.getId() == b2.getId()){
			startActivity(new Intent(this, ExemploListViewBasico2.class));
		}
		if (v.getId() == b3.getId()){
			startActivity(new Intent(this, ExemploListViewPessoa.class));
		}		
	}	
}
Listagem 9. AndroidManifest.xml
	
	<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.pdm.aula07c"
 android:versionCode="1"
 android:versionName="1.0" >
 <uses-sdk android:minSdkVersion="8" />
 <application
 android:icon="@drawable/ic_launcher"android:label="@string/app_name" >
 <activity
 android:name=".Aula7CActivity"
 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=".ExemploListViewBasico1" />
 <activity android:name=".ExemploListViewBasico2" />
 <activity android:name=".ExemploListViewPessoa" />
 </application>
</manifest>
O mais importante é entender que uma ListView é uma simples listagem. Ela listará uma série de outras views.
Página 9 de 9