Interfaces no Android :
widgets
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.
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
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",
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();
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.
Data e Hora
•
TimePicker
o
Componente destinado a edição de Hora e
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.
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);
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
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.
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; }
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..
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
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)
ImageView
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
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,
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
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
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" />
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" />
24Toast
•
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
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)
AlertDialog
•
Exibe um alerta ao usuário
•
Conteúdo e botões de escolha personalizados
•
Classe AlertDialog.Builder para construir alertas
AlertDialog
setIcon(int resId) Determina o ícone a ser mostrado setTitle(String) Determina o título do alertasetMessage(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
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.
AutoComplete
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.
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.
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"
/>
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 =
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"
MultiAutoComplete
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);
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
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()
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.
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
,
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
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
// 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");
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
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) {
MyAdapter
50
@Override
public boolean hasStableIds() {
return true;
}
@Override
// Todos podem ser selecionados
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
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);
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
// 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);
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;
