Interfaces no Android :

widgets

Continuação

Spinner • Este componente possui um nome diferente

em cada tecnologia:

o JComboBox

o DropDownList

o ComboBox

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

2

Exercício • Criar um projeto no qual o usuário deverá

escolher uma palavra de uma lista de palavras.

3

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

4

/**

* 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();

5

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.

6

Data e Hora

• TimePicker

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

7

Exercício

• Permita que, no aplicativo anterior, 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.

8

Código

9

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

10

/**

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

11

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

• Crie um projeto que implementa um cronometro.

12

Código

13

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

14

ImageView • A plataforma Android possui um mecanismo muito robusto

para o carregamento dos recursos apropriados em tempo de execução.Se precisamos exibir um logo na tela inicial, podemos criar três versões do logo com densidades diferentes, que 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

15

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)

16

ImageView

• Altere a densidade do dispositivo:

17

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

18

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

19

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,

20

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

• Estilos como percentual ou indeterminado

• Estilos (atributo style no XML):

21

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

22

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" />

23

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" />

24

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();

25

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.

26

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

27

AlertDialog • Exibe um alerta ao usuário

• Conteúdo e botões de escolha personalizados

• Classe AlertDialog.Builder para construir alertas

28

AlertDialog

29

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

30

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();

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.

31

AutoComplete

32

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.

33

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.

• Começe 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.

34

Exercício: Lay-out

35

<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

36

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

37

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

38

Crie EspaçoTokenizer

39

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

40

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

41

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

42

Código

• Carregando com dados já conhecidos:

43

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:

44

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

45

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

46

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(); } });

ListView para seleção múltipla

47

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

48

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

49

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

50

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

MyAdapter

51

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

52

@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

53

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

54

// 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;

}

GridView • Exibe Views na forma de grade

• Todas as colunas têm a mesma largura

• Faz scrolling do conteúdo

• Atributos

55

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

56

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

o Dentro do método onCreate() da Activity

57

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

58

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

Exercício

• Crie uma activity para exibir uma ListView

• Faça a ListView operar como menu chamando as activities de exercícios anteriores.

59

Exercício

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

60