Android

Interfaces: widgets

Vida de uma Activity

• Acontece entre a primeira chamada para onCreate até a chamada do finally() que resulta no evento onDestroy().

• Uma Activity irá fazer toda a configuração do estado de suas propriedades no OnCreate() e liberar todos os recursos remanescentes em onDestroy().

2

Vida de uma Activity

3

Tempo de visibilidade de uma Activity

• Acontece entre uma chamada para onStart() até uma chamada correspondente para onStop().

• Durante este período o usuário pode ver a Activity na tela, embora não possa estar em primeiro plano e interagir com o usuário.

• Entre estes dois métodos que você pode manter os recursos que são necessários para mostrar a atividade para o usuário.

4

Tempo de visibilidade de uma Activity

5

Activity no topo da pilha

• Acontece entre uma chamada para onResume() até uma chamada correspondente para onPause().

• Durante esse tempo, a Activity está na frente de todas as outras atividades e pode interagir com o usuário.

6

Resumindo...

7

Interfaces das Activities

• Definição por XML

o Escolha normalmente usada pelos desenvolvedores

• Programação

o Usada para criação dinâmica de telas

8

Interface Gráfica com Usuário

• Baseada em View e ViewGroup

• View: base para subclasses denominadas Widgets que oferecem uma forma de implementar os elementos gráficos de um interface

o TextView, Button , TextEdit, RadioButton, Checkbox, etc

• ViewGroup: container de Views e ViewGroups.

o base para componentes de layouts, como LinearLayout, FrameLayout, AbsoluteLayout, RelativeLayout, TableLayout, etc.

9

View

• Estrutura de dados, cujas propriedades armazenam dados do layout e determinada área de interface.

• Capaz de gerenciar suas propriedades como proporção, posição, foco, aparência (baseado no status), scrolling.

10

Relembrando... • Após a criação do projeto, será criada uma

estrutura de diretórios necessária para um projeto Android.

• A pasta src contém os fontes das classe que representam as Activity, etc...

• A pasta gen contém uma classe utilitária “R.java”, gerada automaticamente

o Recomenda-se não alterar esta classe manualmente

o é utilizada para facilitar a obtenção dos componentes ou recursos apenas informando o seu nome.

11

Relembrando... • A pasta res contém os recursos que serão

utilizados pela aplicação.

• Estes recursos são organizados em pastas de acordo com o seu propósito:

o drawable: deve conter todos os recursos de imagens (PNG e JPG) utilizados na aplicação.

o layout: contém as definições dos layouts utilizados na aplicação que nada mais são do que arquivos no formato XML.

o values: contém valores estáticos (strings, por exemplo) que podem ser carregados de um arquivo XML.

12

android.widget

• O pacote android.widget reúne elementos gráficos para serem utilizados para interação humano aplicação

o TextView

o EditText

o Button

o Outros...

13

Widgets

• O pacote android.widget reúne elementos gráficos para serem empregados para interação homem-máquina da aplicação.

• Arraste um Button da Palette para a tela. Mantenha o Button selecionado e veja as propriedades na aba Properties

• Procure a propriedade Id e altere para: @+main/btnNavegar .

• Aproveite e também altere o Text para Navegar. 14

Interface de Usuário

Esta UI contém:

- um container Name;

- um container Address;

- um container Parente;

15

Editor de Layout

• Um ponto interessante na tecnologia adotada pelo Android:

o forma que é desenvolvida a interface

o Em Java costumamos criar interfaces pelo código

o Nesta plataforma as interfaces por padrão são feitas em arquivos .xml.

16

Associando XML ao Código Fonte

• Activity gerada no processo de criação do projeto será a principal

• Arquivo .XML gerado será carregado no onCreate() da Activity acima.

17

TextView

• utilizado para exibir um texto e permitir a sua edição.

• Por padrão sua configuração não permite a edição, substitui o Label utilizado nas outras tecnologias.

18

EditText

• Herdeiro de TextView

• sua configuração permite a edição de texto por padrão,

o similar ao TextBox (Framework .NET) ou

o do JTextFied (Java).

19

Button

• Controle utilizado para disponibilizar ações ao usuário

• Pode assumir o comportamento

o clicável (click-button) ou

o pressionado com estado (push-button).

Por padrão o comportamento é click-button.

20

Exemplo

• Neste novo projeto vamos exigir um texto e ao clicar no botão o texto será transformado em um texto todo maiúsculo.

21

Exercício

22

Exercício

23

ToggleButton

• botão que exibe um estado "ON" ou "OFF" no qual o usuário pode pressionar e alterar o estado caso queira.

• Exemplo:

o Crie um projeto simples com um ToggleButton na tela, e a medida que ele pressiona ou libera vamos escrever no output a ação executada.

24

Solução

25

RadioButton e RadioGroup • RadioButton : botão de dois estados: marcado ou

desmarcado.

o Quando está desmarcado, o usuário pode pressionar e marcar.

o Depois de marcado o RadioButton não pode ser desmarcado pelo usuário pela interface (diretamente).

o Não faz sentido usar um RadioButton isolado.

• Utiliza-se grupos de RadioButtons associados em um RadioGroup,

o Quando o usuário marca um RadioButton, o RadioGroup automaticamente desmarca os demais.

o Utiliza-se o RadioGroup para gerenciar um conjunto de RadioButton no qual exigimos uma escolha do usuário dentre o grupo, ou seja, exigir uma escolha somente.

26

Exemplo

• O usuário vai ter um RadioGroup na tela, e a medida que ele marca as opções vamos escrever na própria tela usando uma janelinha Toast

27

Lay-out do formulário

28

Código no onCreate

29

// Como sempre, pegando os objetos da interface e

// armazenando em atributos da classe

this.rdgGrupoOp01 = (RadioButton)this.findViewById(R.main.rdgGrupoOp01);

this.rdgGrupoOp02 = (RadioButton)this.findViewById(R.main.rdgGrupoOp02);

this.rdgGrupoOp03 = (RadioButton)this.findViewById(R.main.rdgGrupoOp03);

// Criando os eventos, só que em vez de criar um evento

// para cada componente conforme os demais exemplos

// vou criar um único tratador de evento (ver o código a seguir)

this.rdgGrupoOp01.setOnClickListener(this.rdgGrupo_Click);

this.rdgGrupoOp02.setOnClickListener(this.rdgGrupo_Click);

this.rdgGrupoOp03.setOnClickListener(this.rdgGrupo_Click);

// Marcar como a Opção 1 como padrão

this.rdgGrupoOp01.setChecked(true);

Tratador de eventos

30

/**

* Tratador do evento Click para todos as opções Radio

*/

private RadioButton.OnClickListener rdgGrupo_Click = new

RadioButton.OnClickListener() {

public void onClick(View v) {

String str = "Opção 1 : " + rdgGrupoOp01.isChecked() +"\n";

str += "Opção 2 : " + rdgGrupoOp02.isChecked() + "\n";

str += "Opção 3 : " + rdgGrupoOp03.isChecked();

// O Toast será estudado mais a frente, apenas use ele

// para exibir uma pequena janela com um texto

Toast.makeText(Main.this, str, Toast.LENGTH_SHORT).show();

}

};

CheckBox

• Ao contrário do RadioButton o CheckBox pode estar sozinho, ter mais de um CheckBox marcado ao mesmo tempo, e até não ter nenhum marcado.

• Não requer controlador de grupo.

31

Exemplo

• O usuário vai marcar CheckBox dizendo se tem gatos e cachorros

32

Código do onCreate

33

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// Como sempre, pegando os objetos da interface e

// armazenando em atributos da classe

this.ckbCachorro = (CheckBox)this.findViewById(R.main.ckbCachorro);

this.ckbGato = (CheckBox)this.findViewById(R.main.ckbGato);

// Criando os eventos, só que em vez de criar um evento

// para cada componente conforme os demais exemplos

// vou criar um único tratador de evento (ver o código

// mais abaixo)

this.ckbCachorro.setOnClickListener(this.rdgGrupo_Click);

this.ckbGato.setOnClickListener(this.rdgGrupo_Click);

}

Tratador do evento Click

34

/**

* */

private CheckBox.OnClickListener rdgGrupo_Click = new

CheckBox.OnClickListener() {

public void onClick(View v) {

String str = "Possui cachorros : " + ckbCachorro.isChecked() +

"\n";

str += "Possui gatos : " + ckbGato.isChecked();

Toast.makeText(Main.this, str, Toast.LENGTH_SHORT).show();

}

};

Spinner

• Este componente possui um nome diferente em cada tecnologia:

o JComboBox

o DropDownList

o ComboBox

• É um controle que permite a seleção de itens de uma lista, porem seu estado adormecido tem a aparência de uma caixa (com a descrição selecionada) associado a um botão, neste botão uma imagem de um triangulo.

35

Exemplo • Neste projeto o usuário deverá escolher uma

palavra de uma lista de palavras.

36

// crie a activity implementando os eventos para tratar a escolha do spinner

public class Main extends Activity implements

AdapterView.OnItemSelectedListener{

....

// Resgatando a referência do objeto

Spinner spinner = (Spinner) findViewById(R.id.spinner1);

// Criando um Adapter com os itens do array

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_dropdown_item_1line, OPCOES);

// Passando o Adapter com as opções para o Spinner

spinner.setAdapter(adapter);

// Criando o evento Selected

spinner.setOnItemSelectedListener(this);

}

Código

37

/**

* Evento que ocorre quando algum item é selecionado

*/

public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {

// Exibindo a seleção feita pelo usuário

Toast.makeText(parent.getContext(), "Você escolheu: " +

OPCOES[position], Toast.LENGTH_LONG).show();

}

/**

* Evento que ocorre quando a lista é aberta mais o usuário não seleciona nada

*/

public void onNothingSelected(AdapterView parent) {

// Não faça nada

}

// Array montado só para ter as opções

private static final String[] OPCOES = new String[] { "Cadeira", "Braço", "Cor", "Encosto", "Mola", "Estofada",

"Azul", "Vermelha" , "Rodinha"};

Atenção

• O evento do Spinner só deve ser usado quando a ação do usuário sobre ele influenciar a tela ou os atributos da classe.

• Se for uma escolha com posterior ação de salvar (em um botão por exemplo) então pegue o valor somente neste momento.

• Use o método getSelectedItemPosition(). Spinner s = (Spinner)findViewById(R.id.spinner1);

int x = s.getSelectedItemPosition();

38

Data e Hora

• DatePicker

o Componente destinado a edição de uma data contendo Ano, Mês e Dia.

o Possui botões grandes, visto que nesta plataforma não seu usa as famosas “canetinhas” e sim as pontas dos dedos.

39

Data e Hora

• TimePicker

o Componente destinado a edição de Hora e Minuto.

40

Exemplo

• Este aplicativo que permite que o usuário selecione uma data e uma hora e clique num botão “OK”.

• Quando clicar, exibir uma mensagem com os valores selecionados no DatePicker e TimePicker.

41

Código

42

// Recuperando objeto Data

DatePicker dtpData = (DatePicker) this.findViewById(R.main.dtpData);

// Alterando o objeto data

dtpData.updateDate(1972, 06, 12);

// Resgatando o controle Button e criando um evento par ele

Button btnVer = (Button) this.findViewById(R.main.btnVer);

btnVer.setOnClickListener (new OnClickListener() {

public void onClick(View v) {

btnVer_Click(v);

}

});

}

Código

43

/**

* Evento que ocorre quando botão é pressionado

*/

public void btnVer_Click(View v)

{

// Resgatando a referência

DatePicker dtpData = (DatePicker)this.findViewById(R.main.dtpData);

TimePicker pthHora = (TimePicker)this.findViewById(R.main.pthHora);

// Utilizando os métodos getMonth(), getDatyOfMonth(), getYear(),

getCurrentHour() e getCurrentMinute

// para pegar os valores dos controles alterados pelo usuário

Toast.makeText(this, "Data: " + dtpData.getDayOfMonth() + "/" +

dtpData.getMonth() + "/" + dtpData.getYear() + "\nHora: " +

pthHora.getCurrentHour() + ":" + pthHora.getCurrentMinute(), 30).show();

}});

}

CalendarView

• Widget desenvolvido para exibir e selecionar uma ou mais datas

• Este componente só pode ser utilizado a partir da versão 11 da API (Android 3.0).

44

Chronometer

• Implementa um temporizador simples.

• Iniciamos a contagem a partir da chamada do método start() e paralisamos a contagem chamando o método stop().

45

Código

46

public void btnIniciarParar_Click(View v) {

// Os métodos Start() e Stop() alteram o status do Cronometro

if(ligado)

this.chronometer.stop();

else

this.chronometer.start();

// Comutar o valor apenas

ligado = !ligado;

}

public void btnZerar_Click(View v){

this.chronometer.stop();

// Zeramos o contador usando stBase()

this.chronometer.setBase(SystemClock.elapsedRealtime());

ligado = false;

}

ImageView

• Classe que reúne membros destinados a exibição de imagem.

• Uma imagem pode ser carregada dentro da própria aplicação como uma Resource ou ser carregado a partir de um caminho dentro do Android

• Você pode organizar os recursos (Resources) do projeto Android baseado em vários critérios de configurações, incluindo a língua, a região, as características da tela, métodos de entrada, etc..

47

ImageView

• A plataforma Android possui um mecanismo muito robusto para o carregamento dos recursos apropriados em tempo de execução, imagine que precisamos exibir um logo na tela inicial, podemos criar três versões do logo com densidades diferentes, seriam adicionados nas pastas:

o drawable-hdpi : imagens de alta densidade,

o drawable-mdpi : de média densidade e

o drawable-ldpi de baixa densidade.

• Então nossas três versões de logo ficarão em:

o /res/drawable-ldpi/meuLogo.png

o /res/drawable-mdpi/meuLogo.png

o /res/drawable-hdpi/meuLogo.png

48

ImageView

• Crie um projeto com 3 imagens diferentes, com o mesmo nome e teste em densidades diferentes (para poder ver que ele busca as imagens em pastas diferentes)

49

ImageView

• Altere a densidade do dispositivo:

50

ImageView • Adicione um botão para trocar a imagem.

51

Button btnCarregar = (Button)this.findViewById(R.main.btnCarregar);

btnCarregar.setOnClickListener( new OnClickListener(){

public void onClick(View v)

{

btnCarregar_Click(v);

}

}); public void btnCarregar_Click(View v)

{

ImageView img = (ImageView) this.findViewById(R.main.imgLogo);

// Usamos o método setImageResource() par alterar a imagem quando

// ela está anexada ao projeto

img.setImageResource(R.drawable.outraImagem);

}

ImageView • Para usar uma imagem do sdcard

52

public void btnCarregar_Click(View v)

{

ImageView img = (ImageView) this.findViewById(R.main.imgLogo);

// Caminho da imagem

String imgPath = "/sdcard/outraImagem.jpg";

// Cria um File para validar se existe arquivo

File imgFile = new File(imgPath);

if (imgFile.exists() ){

// Criamos um Bitmap

Bitmap myBitmap = BitmapFactory.decodeFile(imgPath);

// método setImageBitmap() altera a imagem anexada

img.setImageBitmap(myBitmap);

}

else

{

// Imagem padrão, pois não existe a imagem que procuramos

img.setImageResource(R.drawable.icon);

} } }

ImageButton

• ImageButton realmente é uma junção de botão e imagem,

o terá bordas como um botão e uma imagem dentro,

53

AutoCompleteTextView

• AutoCompleteTextView permite que o usuário digite uma determinada informação, exibindo opções de palavras;

• Ou seja, a medida que o usuário digita a palavra desejada a aplicação sugere opções.

• Para caixa de texto com palavras simples o AutoCompleteTextView é o componente indicado.

54

AutoComplete

55

MultiAutoCompleteTextView

• Estende de AutoCompleteTextView,

• disponibiliza ao usuário uma série de opções, incluindo a opção de utilizar um MultiAutoCompleteTextView.Tokenizer para selecionar as opções sugeridas.

56

Exercícios

• Crie um projeto no qual o usuário deverá digitar algumas palavras e o sistema deverá ajudar exibindo uma lista de possíveis palavras.

• Comece montando um atributo na classe Main.java do tipo array de String (linha 30), neste array vamos adicionar as possíveis opções que eu acredito que o usuário encontre quando estiver em campo.

57

Exercício: Lay-out

58

<AutoCompleteTextView android:id="@+main/txtAuto" android:layout_width="match_parent" android:layout_height="wrap_content" /> <MultiAutoCompleteTextView android:id="@+main/txtMulti" android:layout_width="match_parent" android:layout_height="wrap_content" android:completionThreshold="1" />

Código

59

public class Main extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// Criando um Adapter para associar a um array de opções mais prováveis

ArrayAdapter<String> adapter = new

ArrayAdapter<String>(this,

android.R.layout.simple_dropdown_item_1line, OPCOES);

// Resgatando o objeto (definido no XML)

AutoCompleteTextView txtAutoComplete =

(AutoCompleteTextView)this.findViewById(R.main.txtAuto);

MultiAutoCompleteTextView txtMultiAutoComplete =

(MultiAutoCompleteTextView)this.findViewById(R.main.txtMulti);

Código

60

// Passando o Adapter para os dois objetos

txtAutoComplete.setAdapter(adapter);

txtMultiAutoComplete.setAdapter(adapter);

// Passando um Tokenizer para o Multi

txtMultiAutoComplete.setTokenizer(new

MultiAutoCompleteTextView.CommaTokenizer());

}

private static final String[] OPCOES = new String[] {

"Cadeira", "Braço", "Cor", "Encosto", "Mola", "Estofada",

"Azul", "Vermelha" , "Rodinha"

};

}

MultiAutoComplete

61

Crie EspaçoTokenizer

62

public class EspacoTokenizer implements Tokenizer {

// Precisamos sobrescrever 3 métodos, o primeiro está relacionado

// com a localicação do final do Token

@Override

public int findTokenEnd(CharSequence text, int cursor) {

int pos = text.toString().indexOf(' ', cursor);

return (pos < 0) ? (text.length() - 1) : (pos - 1);

}

// O segundo está relacionado com o início da sequência

@Override

public int findTokenStart(CharSequence text, int cursor) {

int pos = text.toString().lastIndexOf(' ', cursor);

return (pos < 0) ? 0 : (pos + 1);

}

Espaço Tokenizer

63

// O terceiro deve avaliar a palavra escolhida e escolher

// o Token que será usado após

@Override

public CharSequence terminateToken(CharSequence text) {

String textStr = text.toString();

// Se o texto excolhido finaliza com espaço então não vamos fazer nada

// caso contrário vamos adicionar um espaço no final

if(textStr.endsWith(" "))

return textStr;

else

return textStr + " ";

}

}

Código da Activity

64

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_dropdown_item_1line, OPCOES);

// Resgatando o objeto (definido no XML)

AutoCompleteTextView txtAutoComplete =

(AutoCompleteTextView)this.findViewById(R.main.txtAuto);

MultiAutoCompleteTextView txtMultiAutoComplete =

(MultiAutoCompleteTextView)this.findViewById(R.main.txtMulti);

// Passando o Adapter para os dois objetos

txtAutoComplete.setAdapter(adapter);

txtMultiAutoComplete.setAdapter(adapter);

// LINHA ALTERADA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

// Repare que estou fazendo uma instancia de EspacoTokenizer()

txtMultiAutoComplete.setTokenizer(new EspacoTokenizer());

ListView

• Componente simples e de fácil manipulação exibe uma coluna única, geralmente 6 itens por tela

• Para usar, basta colar um componente na tela e programar os eventos e a carga de seus dados.

65

Código

• Carregando com dados já conhecidos:

66

private String[] lista = { "primeiro", "segundo", "terceiro", "quarto","quinto", "sexto" };

lstV = (ListView) this.findViewById(R.id.listView1); // usando o adaptador padrao lstV.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, lista));

Código

• Carregando com dados a serem obtidos:

67

lstV = (ListView) this.findViewById(R.id.listView1); // criando um adapter ArrayAdapter<String> array = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1); // usando o adaptador padrao lstV.setAdapter(array); // carregando com os dados array.add("Opcao 1"); array.add("Opcao 2"); array.add("Opcao 3"); array.add("Opcao 4");

Código dos eventos

68

lstV.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { if (lstV.getSelectedItem() != null) {

AlertDialog.Builder dialogo = new AlertDialog.Builder(ListActivity.this); dialogo.setTitle("Contato selecionado"); dialogo.setMessage(lstV.getSelectedItem().toString()); dialogo.setNeutralButton("OK", null); dialogo.show();

} } });

Código dos eventos

69

lstV.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) { // TODO Auto-generated method stub Toast.makeText(ListActivity.this, lstV.getSelectedItem().toString(), Toast.LENGTH_SHORT) $ .show(); } @Override public void onNothingSelected(AdapterView<?> arg0) { // TODO Auto-generated method stub Toast.makeText(ListActivity.this, "Selecione uma opção!", Toast.LENGTH_SHORT).show(); } });

Exercício

• Crie uma activity para exibir uma ListView

70

ListView para seleção múltipla

71

// usando multipla escolha ArrayAdapter<String> array = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_multiple_choice); // precisa informar que a escolha é múltipla lstV.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE); if (lstV.getChoiceMode()==ListView.CHOICE_MODE_MULTIPLE) { lista_ItemClick(v, pos); } private void lista_ItemClick(View v, int pos) { String word = ( (lstV.isItemChecked (pos)) ? "selecionada" : "desselecionada"); Toast.makeText(ListActivity.this, "Opção "+word+": " + lstV.getItemAtPosition(pos), 300).show(); }

ExpandableListView

• Listas com sublistas;

• Para usá-la precisamos criar um Adapter para fornecer os dados para a Lista

o Lembram-se do ListView?

o Pois é, precisamos de um Adapter que forneça os elementos raízes e os filhos.

72

// criando um adapter ArrayAdapter<String> array = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1); // usando o adaptador padrao lstV.setAdapter(array);

MyAdapter

73

public class MyAdapter extends BaseExpandableListAdapter { private String[] groups = { "Cara Feias", "Caras Pintadas" }; private String[][] caras = { { "Ze", "Juca", "Cido", "Joca" }, { "Leo", "Fefa", "Cuca" } }; public ExpandListActivity main; // construtor public MyAdapter(ExpandListActivity main) { this.main = main; } // Retorna um elemento da matriz dado o grupo e a posição do filho @Override public Object getChild(int groupPosition, int childPosition) { return caras[groupPosition][childPosition]; }

MyAdapter

74

@Override public boolean hasStableIds() { return true; } @Override // Todos podem ser selecionados public boolean isChildSelectable(int groupPosition, int childPosition) { return true; }

MyAdapter

75

// Retorna uma TextView para montagem da lista private TextView getGenericView() { // LayoutParams é um objeto utilizado para passar parâmetros para o layout // MATCH_PARENT é o tamanho do elemento, utilizado a partir da API // vamos usar tamanho 25, mais lembre-se que quanto maior, lista menos // elementos quanto menor, fica mais difícil selecionar AbsListView.LayoutParams lp = new AbsListView.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, 25); // Cria a TextView para a Activity e passa os parametros TextView textView = new TextView(main); textView.setLayoutParams(lp); // Vamos centralizar o texto textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT); // dar 5 pixels para a esquerda para não colar na tela textView.setPadding(5, 0, 0, 0); return textView; }

MyAdapter

76

@Override // retorna o nro de filho no grupo public int getChildrenCount(int groupPosition) { return caras[groupPosition].length; } @Override // Retorna um grupo dado sua posição no array public Object getGroup(int groupPosition) { return groups[groupPosition]; } @Override // Retorna o numero de grupos existentes no array de grupos public int getGroupCount() { return groups.length; } @Override // Retorna o numero da posição do grupo public long getGroupId(int groupPosition) { return groupPosition; }

MyAdapter

77

// Retorna uma View para o grupo, vimos que existe o getChildView // esse método faz a mesma coisa porem par grupos, você pode // querer ter um layout diferente para grupo public View getGroupView(int groupPosition, boolean isExpanded,

View convertView, ViewGroup parent) { TextView textView = getGenericView(); // Para manter o layout diferente vou exibir o número de filhos textView.setText( getGroup(groupPosition).toString() + " (" + getChildrenCount(groupPosition) + ")"); // Será vermelho textView.setTextColor(Color.RED); textView.setTextSize(14); // Terá a fonte em negrito textView.setTypeface(Typeface.DEFAULT, Typeface.BOLD); return textView;

}

MyAdapter

78

// Retorna uma View para o grupo, vimos que existe o getChildView // esse método faz a mesma coisa porem par grupos, você pode // querer ter um layout diferente para grupo public View getGroupView(int groupPosition, boolean isExpanded,

View convertView, ViewGroup parent) { TextView textView = getGenericView(); // Para manter o layout diferente vou exibir o número de filhos textView.setText( getGroup(groupPosition).toString() + " (" + getChildrenCount(groupPosition) + ")"); // Será vermelho textView.setTextColor(Color.RED); textView.setTextSize(14); // Terá a fonte em negrito textView.setTypeface(Typeface.DEFAULT, Typeface.BOLD); return textView;

}

Exercício

• Altere o Exercício de ListView para usar uma ExpandableListView

79

GridView • Exibe Views na forma de grade

• Todas as colunas têm a mesma largura

• Faz scrolling do conteúdo

• Atributos

80

WebView e WebSettings • WebView

o Apresenta uma página de web

o Usa o mesmo componente que o navegador do celular

o Necessário permissão android.permission.INTERNET

• WebSettings

o Permite configurar o WebView

Permite JavaScript, Salvar senhas, etc.

• Métodos principais

81

Exercício - WebView • Criar um projeto que abra uma página da web

o Dentro do método onCreate() da Activity

82

WebView web = new WebView(this);

WebSettings webSettings = web.getSettings();

webSettings.setSavePassword(false);

webSettings.setSaveFormData(false);

webSettings.setJavaScriptEnabled(true);

webSettings.setSupportZoom(false);

web.loadUrl("http://www.google.com.br");

setContentView(web);

Exercício - WebView • Altere o AndroidManifest.xml

83

<?xml version="1.0" encoding="utf-8"?> <manifest ... > <application ... > <activity ... > ... </activity> </application> <uses-permission android:name="android.permission.INTERNET" /> </manifest>

Gallery e ImageSwitcher

• Gallery

o Mostra lista de componentes com rolagem horizontal

o Mantém o componente selecionado sempre no centro

• ImageSwitcher

o Exibe imagens e cria efeitos ao alterná-las

84

ProgressBar • Exibe um indicador de progresso de uma operação

• Estilos como percentual ou indeterminado

• Estilos (atributo style no XML):

85

?android:progressBarStyle (padrão) Indeterminado circular de tamanho médio

?android:progressBarStyleSmall Indeterminado circular de tamanho pequeno

?android:progressBarStyleLarge Indeterminado circular de tamanho grande

?android:progressBarStyleHorizontal Barra horizontal indeterminado ou com percentual

ProgressBar • Métodos

86

setProgress(int) Determina o nível de progresso para uma barra percentual

setSecondaryProgress(int) Determina o nível secundário de progresso para uma barra

percentual

boolean isIndeterminate() Retorna true se for indeterminado

ProgressBar - Exemplo <ProgressBar style="?android:progressBarStyleSmall" android:layout_width="wrap_content“ android:layout_height="wrap_content" /> <ProgressBar style="?android:progressBarStyle" android:layout_width="wrap_content“ android:layout_height="wrap_content" /> <ProgressBar style="?android:progressBarStyleLarge" android:layout_width="wrap_content“ android:layout_height="wrap_content" />

87

ProgressBar - Exemplo <ProgressBar style="?android:progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:indeterminate="true" /> <ProgressBar style="?android:progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:indeterminate="false" android:progress="45" /> <ProgressBar style="?android:progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:indeterminate="false" android:progress="45" android:secondaryProgress="80" />

88

Toast • Exibição de alertas por tempo determinado

• Sem interação com usuário

• View personalizada Toast toast = new Toast(this);

toast.setDuration(Toast.LENGTH_LONG);

toast.setView(view);

toast.show();

• Apenas mensagem de texto Toast.makeText(this, “Mensagem”, Toast.LENGTH_SHORT).show();

89

Dialogs • Usado para abrir janelas na tela

• Recomendado usar os métodos a seguir para que a Activity gerencie o ciclo de vida do Dialog.

90

boolean showDialog(int id, Bundle) Tenta mostrar o Dialog para o id chamando onCreateDialog() se

necessário, e em seguida onPrepareDialog(). Retorna true em caso

de sucesso.

void dismissDialog(int id) Fecha o Dialog criado por showDialog() com o id especificado. Se

nenhum Dialog com o id tiver sido mostrado lança

IllegalArgumentException.

void removeDialog(int id) Remove qualquer referência para o Dialog especificado. Caso esteja

sendo exibido, ele é fechado antes.

Dialog onCreateDialog (id, Bundle) Callback chamado quando um Dialog deve ser criado para o id

especificado. Implementado pelo desenvolver.

void onPrepareDialog(id, Dialog, Bundle) Callback que permite que o Dialog seja preparado antes de ser

apresentado. Por exemplo, configurar alguma varíavel.

ProgressDialog • Janela para mostrar o progresso de uma operação

• Como usar sem os métodos anteriores

o Mostrar o Dialog

dialog = ProgressDialog.show(contexto, titulo, msg, bool indet);

indet = se é indeterminado ou não (percentual)

o Feche o Dialog, quando concluir

dialog.dismiss();

o Alterar o progresso (se indet = true)

dialog.setProgress(int v)

v entre 0 e 10000

91

AlertDialog • Exibe um alerta ao usuário

• Conteúdo e botões de escolha personalizados

• Classe AlertDialog.Builder para construir alertas

92

AlertDialog

93

setIcon(int resId) Determina o ícone a ser mostrado

setTitle(String) Determina o título do alerta

setMessage(String) Mensagem a ser mostrada no interior do alerta

setPositiveButton(String, listener) Texto do botão positivo (Sim, Yes, Ok, etc)

setNegativeButton(String, listener) Texto do botão negativo (Não, No, etc)

setItems(String [], listener) Items a serem mostrados para usuário selecionar

setSingleChoiceItems(String [],

int checkedItem, listener)

Determina lista de RadioButtons a serem mostrados ao

usuário

setCancelable(boolean) Alerta cancelável ou não. Cancelável significa que

usuário não pode fechar com botão voltar.

show() Exibe o alerta para o usuário

cancel() Cancela o alerta

Nota: listener é uma instância de DialogInterface.OnClickListener

AlertDialog.Builder builder = new AlertDialog.Builder(this);

builder.setMessage("Are you sure you want to exit?");

builder.setCancelable(false);

builder.setPositiveButton("Yes", ...);

builder.setNegativeButton("No“, ...);

AlertDialog alert = builder.create();

AlertDialog - Exemplos

94

CharSequence[] items = {"Red", "Green", "Blue"};

AlertDialog.Builder builder = new AlertDialog.Builder(this);

builder.setTitle("Pick a color");

builder.setItems(items,

new DialogInterface.OnClickListener() { ... } );

builder.show();