Interfaces no Android : widgets Continuação
Spinner Este componente possui um nome diferente em cada tecnologia: o o o JComboBox DropDownList 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. // 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); 3
Código /** * 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"; 4
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
DatePicker o o Data e Hora Componente destinado a edição de uma data contendo Ano, Mês e Dia. Possui botões grandes, visto que nesta plataforma não seu usa as famosas canetinhas e sim as pontas dos dedos. 6
TimePicker Data e Hora 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 // 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); ); 9
Código /** * 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(); ); 10
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 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; 13
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 o o drawable-hdpi : imagens de alta densidade, drawable-mdpi : de média densidade e drawable-ldpi de baixa densidade. Então nossas três versões de logo ficarão em: o o o /res/drawable-ldpi/meulogo.png /res/drawable-mdpi/meulogo.png /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. 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); 18
ImageView Para usar uma imagem do sdcard 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); 19
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): android:progressbarstyle android:progressbarstylesmall android:progressbarstylelarge android:progressbarstylehorizontal (padrão) Indeterminado circular de tamanho médio Indeterminado circular de tamanho pequeno Indeterminado circular de tamanho grande Barra horizontal indeterminado ou com percentual 21
Métodos ProgressBar setprogress(int) Determina o nível de progresso para uma barra percentual setsecondaryprogress(int) boolean isindeterminate() Determina o nível secundário de progresso para uma barra percentual Retorna true se for indeterminado 22
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. boolean showdialog(int id, Bundle) void dismissdialog(int id) void removedialog(int id) Dialog oncreatedialog (id, Bundle) Tenta mostrar o Dialog para o id chamando oncreatedialog() se necessário, e em seguida onpreparedialog(). Retorna true em caso de sucesso. Fecha o Dialog criado por showdialog() com o id especificado. Se nenhum Dialog com o id tiver sido mostrado lança IllegalArgumentException. Remove qualquer referência para o Dialog especificado. Caso esteja sendo exibido, ele é fechado antes. 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. 26
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
seticon(int resid) settitle(string) setmessage(string) setpositivebutton(string, listener) AlertDialog Determina o ícone a ser mostrado Determina o título do alerta Mensagem a ser mostrada no interior do alerta Texto do botão positivo (Sim, Yes, Ok, etc) setnegativebutton(string, listener) Texto do botão negativo (Não, No, etc) setitems(string [], listener) setsinglechoiceitems(string [], checkeditem, listener) setcancelable(boolean) show() cancel() int Items a serem mostrados para usuário selecionar Determina lista de RadioButtons a serem mostrados ao usuário Alerta cancelável ou não. Cancelável significa que usuário não pode fechar com botão voltar. Exibe o alerta para o usuário Cancela o alerta Nota: listener é uma instância de DialogInterface.OnClickListener 29
AlertDialog - Exemplos 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(); 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(); 30
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 <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" /> 35
Código 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); 36
Código // 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" ; 37
MultiAutoComplete 38
Crie EspaçoTokenizer 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); 39
Espaço Tokenizer // 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 + " "; 40
Código da Activity 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()); 41
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: 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)); 43
Código Carregando com dados a serem obtidos: 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"); 44
Código dos eventos 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(); ); 45
Código dos eventos 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(); ); 46
ListView para seleção múltipla // 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(); 47
ExpandableListView Listas com sublistas; Para usá-la precisamos criar um Adapter para fornecer os dados para a Lista o Lembram-se do ListView? // criando um adapter ArrayAdapter<String> array = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1); // usando o adaptador padrao lstv.setadapter(array); o Pois é, precisamos de um Adapter que forneça os elementos raízes e os filhos. 48
MyAdapter 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]; 49
@Override public boolean hasstableids() { return true; MyAdapter @Override // Todos podem ser selecionados public boolean ischildselectable(int groupposition, int childposition) { return true; 50
MyAdapter // 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; 51
MyAdapter @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; 52
MyAdapter // 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; 53
MyAdapter // 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; 54
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 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); 57
Exercício - WebView Altere o AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest... > <application... > <activity... >... </activity> </application> <uses-permission android:name="android.permission.internet" /> </manifest> 58
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