Você está na página 1de 91

MD_UDxxxxxx_V(11)Pt

5 Interface de utilizador em
Android

Eliminado: UD006639_V(01)
UD006639_V(02)
Formatada ... [1]
Código de campo alterado ... [2]
INTERFACE DE UTILIZADOR EM ANDROID Formatada ... [3]
Código de campo alterado ... [4]
Formatada ... [5]
Código de campo alterado ... [6]
Formatada ... [7]
Código de campo alterado ... [8]
Formatada ... [9]
Código de campo alterado ... [10]
Formatada ... [11]
Código de campo alterado ... [12]
Eliminado: 23
Eliminado: 30
Formatada ... [13]
Código de campo alterado ... [14]
ÍNDICE Formatada ... [15]
Código de campo alterado ... [16]
Eliminado: 41

MOTIVAÇÃO ................................................................................................ 3 Formatada ... [17]


Código de campo alterado ... [18]
OBJETIVOS .................................................................................................. 4
Eliminado: 46
INTRODUÇÃO ................................................................................................ 5 Formatada ... [19]
1. COMPREENDER A INTERFACE DE UTILIZADOR DO ANDROID ......................................... 7 Código de campo alterado ... [20]
Eliminado: 54
2. LAYOUTS TÍPICOS ..................................................................................... 10
Formatada ... [21]
3. VIEWS E EVENTOS DO UTILIZADOR .................................................................. 25 Código de campo alterado ... [22]
4. COLEÇÕES DE DADOS E VIEWS ........................................................................ 33 Eliminado: 60
Formatada ... [23]
5. MENUS ................................................................................................ 46
Código de campo alterado ... [24]
6. DIÁLOGOS E NOTIFICAÇÕES .......................................................................... 52 Eliminado: 64
7. ESTILOS E TEMAS ...................................................................................... 60 Formatada ... [25]
Código de campo alterado
8. TEXT TO SPEECH (TTS) ................................................................................ 66 ... [26]
Eliminado: 71
9. RECONHECIMENTO DE VOZ ........................................................................... 70 Formatada ... [27]
CONCLUSÃO ............................................................................................... 77 Código de campo alterado ... [28]
Eliminado: 72
RESUMO ................................................................................................... 78
Formatada ... [29]
AUTOAVALIAÇÃO ......................................................................................... 79 Código de campo alterado ... [30]
SOLUÇÕES ................................................................................................. 83 Eliminado: 73

PROPOSTAS DE DESENVOLVIMENTO DO ESTUDO ....................................................... 84 Formatada ... [31]


Código de campo alterado ... [32]
BIBLIOGRAFIA ............................................................................................ 85 Eliminado: 77
Formatada ... [33]
Código de campo alterado ... [34]
Eliminado: 78
Eliminado: 79
Eliminado: MOTIVAÇÃO 3¶ ... [35]

1
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

MOTIVAÇÃO

Comande o seu futuro. Na Master.D, acompanhamo-lo incondi-


cionalmente.

Eliminado: <#>¶
Por definição1, a interface de utilizador é o meio através do qual o utilizador pode
interagir com uma máquina, um equipamento ou um computador, e abrange to-
dos os pontos de contacto entre o utilizador e o equipamento, devendo ser fáceis
de compreender e fáceis de acionar.
<#> ... [36]
Não serve de nada ter um programa muito potente, programado na perfeição, se
a experiência do utilizador for má ou se for de difícil utilização; o mais certo é que Formatada

o utilizador o deixe de utilizar.

Assim, não podemos descurar esta faceta das nossas aplicações.

Nesta unidade didática aprenderemos as técnicas básicas que podemos usar no


Android, para desenvolver interfaces de utilizador.

1 http://www.dicweb.com/ii.htm

3
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

OBJETIVOS

O objetivo principal desta unidade é dar a conhecer as noções básicas da cria-


ção de interfaces de utilizador, em Android, tais como:

 Ter uma visão global das ferramentas e classes que o SDK nos oferece
para as nossas tarefas.
 Aprender a definir um ecrã do zero.
 Aprender a interagir com o utilizador capturando os eventos que este aciona.
 Aprender a aplicar estilos à nossa aplicação.

4
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

INTRODUÇÃO

Nesta unidade vamos aprender que objetos podemos colocar no layout, que é a
parte visível da nossa aplicação. Vamos igualmente aprender quais as formas de
dispor os objetos no mesmo layout.

5
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

1. COMPREENDER A INTERFACE DE UTILIZADOR DO


ANDROID

Os componentes da interface de utilizador do Android são objetos que derivam


da classe View. Estes objetos View estão organizados sob a forma de árvore e
podem conter outros objetos View, permitindo-nos, assim, criar interfaces muito
completas.

Figura 1. Exemplo de árvore de objetos View. (Fonte: Android.com).

7
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Esta árvore de objetos View pode ser definida de duas formas:

 Com um ficheiro XML, que colocamos no diretório res/layout (a maior


parte das vezes usaremos este método).
 Mediante um código (útil se quisermos criar os nossos próprios compo-
nentes do tipo View).

Para desenhar a interface, o sistema necessita que lhe transfiramos o objeto


View raiz, para ir descendo por todos os seus nós, e apresentar assim toda a
interface. Isto é obtido com o método Activity.setContentView() das nossas
atividades.

Internamente, o Android encarrega-se de gerir o desenho, através do uso do


método draw() de cada vista, ou seja, cada View encarrega-se de se desenhar
a si própria.

Este processo de desenho é realizado em dois passos. Primeiro, usa-se o méto-


do measure(int, int) para que cada objeto View defina o tamanho que necessi-
ta e de seguida usa-se o método layout(int,int,int,int) para que o objeto seja
posicionado na vista atual.

Assim, para que o Android consiga desenhar um objeto View, devemos fornecer
alguns dados mínimos, como a largura e a altura. LayoutParams é uma classe
base que serve para definir a dimensão e pode tomar os valores seguintes:

 Um número exato.

 A constante MATCH_PARENT (antes da API Nível 8 era Eliminado: FILL

FILL_PARENT) indica que a vista tentará ocupar a maior área pos- Eliminado: _PARENT

sível no ViewGroup a que pertence. Eliminado: renomeado match_parent a partir

 A constante WRAP_CONTENT, que indica que a vista tentará ser sufici-


entemente grande para mostrar o seu conteúdo (mais o padding).

A classe View.MeasureSpec especifica o tamanho e como devem ser posiciona-


das:

 UNSPECIFIED, o ascendente determina o tamanho desejado do des-


cendente.

 EXACTLY, o ascendente impõe um tamanho exato ao descendente.

 AT_MOST, o ascendente impõe um tamanho mínimo ao descendente.


O descendente deve certificar-se de que ele e os seus descendentes
ocuparão pelo menos esse tamanho.

8
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Outro atributo básico que devemos usar, quando é o atributo id, é um número
inteiro, que serve para identificar cada objeto View, de forma única. Quando o
declaramos, através de um xml de resource, podemos fazer referência à classe
de recursos R, usando uma @:

 android:id=”@id/botao” →faz referência a um id já existente, associado


à etiqueta “botao”.
 android:id=”@+id/botao2” →cria uma nova etiqueta na classe R, cha-
mada “botao2”.
 android:id=”@android:id/list” →faz referência a uma etiqueta definida na
classe R do sistema, denominada “list”.

Além destas propriedades básicas, e dependendo do tipo de objeto, os compo-


nentes do tipo View poderão ter outros atributos, tais como margens, cores, fun-
dos, etc. Para saber que atributos podemos usar em cada caso deveremos con-
sultar a sua documentação.

Context

Outra coisa a ter em conta é que muitos métodos, referidos na vista, pedirão
como parâmetro o contexto (Context).

O Context é uma interface para a informação global da aplicação. Através desta


é possível aceder aos recursos, classes e operações, como por exemplo o lan-
çamento de atividades, o manuseio de Intents, etc.

Dependendo de onde estamos, podemos aceder a este contexto de diferentes


formas, tais como:

Muitos objetos implementam o método getContext().

 As atividades implementam esta interface, podendo referenciá-la trans-


ferindo para si mesma (this) ou para NomeAtividade.this.
 Também podemos usar getApplicationContext() ou getApplication().

9
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

2. LAYOUTS TÍPICOS
Os layouts são objetos do tipo ViewGroup (que por sua vez derivam da classe
View) cuja finalidade é posicionar outros objetos no ecrã, ou seja, são objetos
que nos permitem formatar o conteúdo.

Eliminado: vamos
Vamos ver exemplos dos mais típicos. Para isso utilizaremos vários objetos Tex-
tView (que mostrarão textos) que iremos dispor de diferentes formas, usando
diferentes layouts. A definição dos layouts será feita usando ficheiros XML que
colocaremos em res/layout.

10
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 2. Localização dos ficheiros de layout.

No objeto de tipo TextView utilizaremos a sua propriedade android:text para


definir o texto que aparecerá no ecrã.

11
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 3. Propriedade android:text no modo graphical layout.

Figura 4. Propriedade android:text no modo edição do código.

Layout_width, height, weight

Vamos ver algumas propriedades dos layouts e dos objetos que vamos usar
recorrentemente nos nosso layouts.

Assim, a primeira propriedade é android:layout_width onde é especificada a


largura do objeto em causa, podendo assumir as constantes MATCH_PARENT,
WRAP_CONTENT ou um tamanho exato, podendo ser usadas as seguintes uni-
dades de medida px (pixels), dp (density-independent pixels), sp (scaled pixels
based on preferred font size), in (inches), mm (millimeters).

No android:layout_height, é especificada a altura do objeto em causa, podendo Formatada: Não quebrar página antes

assumir as constantes MATCH_PARENT, WRAP_CONTENT ou um tamanho


exato, podendo ser usadas as seguintes unidades de medida px (pixels), dp
(density-independent pixels), sp (scaled pixels based on preferred font si-
ze), in (inches), mm (millimeters).

Com a instrução android:layout_weight conseguimos atribuir importância a obje-


tos dentro de um layout, por exemplo temos 3 botões na mesma linha com os
pesos 1,3,1 respetivamente. Assim teremos a nossa linha dividida em 5 porções,
tendo o primeiro botão 1 porção, o segundo botão 3 porções e terceiro botão
uma porção. Na figura seguinte, os botões surgem com tamanhos diferentes pois Eliminado: os

12
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

no código temos a opção “wrap_content” o que faz com que os botões se adap-
tem ao tamanho da fonte do texto.

Figura 5. Esquema representativo do uso do layout_weight.

Só conseguimos usar a funcionalidade do weight se colocarmos


o layout_width=”0dp” no caso de uma orientação horizontal. No
caso de uma orientação vertical teremos de colocar o
layout_height=”0dp”. Em versões anteriores, outro aspeto a ter
em conta, nesta fase, é a necessidade de indicar o peso total do
layout, através da instrução android:weightSum=””.

Eliminado: ¶

<#> ... [37]

Figura 6. Exemplo de LinearLayout com uso de pesos (weight). Eliminado: l

13
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

FrameLayout

É o mais simples de todos, não permite qualquer tipo de ajuste, e todos os seus
objetos descendentes começam a desenhar-se no canto superior esquerdo (se
houver vários são empilhados um em cima do outro).

Figura 7. Exemplo de um FrameLayout. Formatada: Tipo de letra: HelveticaNeue LT 55 Roman

14
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 8. FrameLayout. Formatada: Tipo de letra: HelveticaNeue LT 56 Italic

LinearLayout
Este Layout empilha os seus descendentes, de forma consecutiva (uns após Eliminado: Empilha
outros), começando a desenhar o primeiro no canto superior esquerdo.

Através da sua propriedade “android:orientation” podemos definir a forma como


são empilhados:
 Horizontal: da esquerda para a direita.
 Vertical: de cima para baixo.
Deve ser indicado, logo no início do código, se está a usar-se horizontal ou verti- Eliminado: inicio
cal. Por defeito, o que está em vigor é o horizontal. Eliminado: a
Eliminado: omissão

Figura 9. Exemplo de um LinearLayout. Formatada: Tipo de letra: HelveticaNeue LT 55 Roman

15
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 10. LinearLayout (orientação="horizontal").

Eliminado: ¶



Formatada: MD_Imagen
Eliminado: ¶

Figura 11. LinearLayout (orientação="vertical”).

16
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Se quisermos que as Views descendentes sejam redimensionadas, de forma


proporcional, para ocupar todo o ecrã, deveremos inserir o valor FILL_PARENT
no seu campo “layout_width”, e seguidamente adicionar um novo campo
“width”, com valor 0, e outro “weight” com um peso relativo.

Desta forma o LinearLayout calcula o espaço que tem disponível e redimensio-


na os seus descendentes para que o ocupem na totalidade.

Figura 12. Exemplo de um LinearLayout com uso de pesos (weight) e gravidade.

É de assinalar que, neste caso, adicionámos a propriedade gravity para centrar


os textos no TextView.

Estas propriedades são possíveis de editar em modo visual, tal como assinalado
na imagem abaixo.

17
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 13. Propriedades do LinearLayout e objetos no Graphical Layout.

Figura 14. LinearLayout proporcional.

18
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

RelativeLayout

Permite especificar a posição de cada uma das vistas descendentes, em relação


aos restantes componentes (ou em relação à vista que os contém).

Ou seja, podemos fazer coisas como “centrar este componente no layout” ou “o


componente A fica à esquerda de B e por baixo de C”. Para isso o RelativeLay- Formatada: Inglês (Estados Unidos)

out define atributos como: layout_toLeft, layout_below, lay-


out_centerInParent, etc.

Para referenciar a outra View usaremos a sua id.

Neste caso, o “Texto1” fica centrado no ascendente, RelativeLayout (que ocupa


todo o ecrã).

O “Texto2” fica por cima do “Texto1”, uma vez que não indicámos outra coisa, e
fica alinhado à esquerda.

O “Texto3” fica alinhado à direita do “Texto2” e por baixo do “Texto1”.

19
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 15. Exemplo de um RelativeLayout.

Pode ainda escolher as cores diretamente na palete de cores. Basta clicar sobre Eliminado: em cima da
a cor e escolher a pretendida. Eliminado: cor

20
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Formatada: MD_Imagen, Esquerda

Figura 16. Escolha direta da cor na palete de cores.

Figura 17. RelativeLayout.

21
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Apesar de não se justificar, para visualizar mais cores pode usar ferramentas
online para saber os códigos hexadecimal das mesmas. Fica o link, a título de
exemplo: http://www.color-hex.com/

TableLayout

Posiciona os seus descendentes num formato de filas e colunas. Cada fila está
marcada por um objeto “TableRow” que, por sua vez, contém 0 ou mais objetos
View que serão as colunas.

Os objetos View das colunas podem ser de tipo diferente. Desta forma, podemos
ter uma tabela em que uma célula é uma imagem, outra célula contém um texto
e outra célula contém um botão.

O TableLayout também define atributos que nos permitem decidir que colunas Formatada: Tipo de letra: HelveticaNeue LT 55 Roman

devem ser esticadas (stretchColumns) ou encolhidas (shrinkColumns); também


podemos ocultar colunas (collapseColumns).

22
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Formatada: MD_Imagen, Esquerda

Figura 18. Exemplo de um TableLayout. Eliminado:

Figura 19. TableLayout.

23
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Neste caso definimos uma tabela de duas filas e duas colunas, marcando a pri-
meira coluna (a 0) como “esticável”.

Resumo rápido de layouts

Recipiente simples. Não permite controlar a posição dos descendentes. Ficam todos em cima
FrameLayout do lado esquerdo.

Gallery Scroll horizontal que mostra imagens a partir de uma lista.

GridView Mostra uma grelha de x colunas e y filas.

Organiza os seus descendentes empilhando-os numa fila ou coluna simples. Mostra um


LinearLayout
scroll se o conteúdo ultrapassar o ecrã.

ListView Mostra uma lista, de uma única coluna, a partir de uma origem de dados.

RelativeLayout Permite posicionar os objetos, em relação aos restantes. Eliminado: posicionando-os


Eliminado: objeto
ScrollView Mostra um scroll simples.
Eliminado: s

Spinner Mostra um elemento simples que permite escolher um de entre uma coleção de dados.

Proporciona acesso direto à superfície do desenho. Pensado para aplicações que ne-
SurfaceView cessitam de desenhar ao nível do pixel, como os jogos.

TabHost Permite colocar separadores que ativam uma Activity ou outra,dependendo da que está
selecionada.

TableLayout Mostra as vistas num formato de filas e colunas, permitindo controlar o seu aspeto.

Mostra um item de cada vez, dentro de um campo de texto ou de uma fila. Permite
ViewFlipper configurar intervalos de tempo em que a vista será alternada.

ViewSwitcher Semelhante a ViewFlipper.

24
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

3. VIEWS E EVENTOS DO UTILIZADOR


Tal como já mencionámos, todos os componentes da vista descendem do objeto
View, ou seja, todos têm uma interface comum com a qual o nosso código pode
interagir.

Para captar os eventos do utilizador podemos definir “listeners” que implemen-


tam interfaces que são usadas sempre que se produz um determinado evento.

Desta forma, com o método setOnClickListener(), poderemos definir que classe


responde quando um utilizador clica na nossa vista e com setOnKeyListener() a
classe que responderá a eventos do teclado, etc.

25
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 20. Exemplos de objetos que podem ser premidos.

Já conhecemos o objeto TextView que nos permite mostrar textos.

Vejamos outros objetos básicos do tipo View que nos permitem adicionar mais
funcionalidades às nossas interfaces e à sua forma básica de interagir com o
utilizador.

ImageView

Permite mostrar imagens. A origem das imagens pode ser variada; desde um
gráfico, colocado no diretório de recursos, a fornecedores de conteúdos.

Tem métodos e propriedades para controlar a maneira como essas imagens


serão apresentadas (recortadas, esticadas, etc.). Por defeito já estão imagens
dos ícones da aplicação dentro da pasta “mipmap”. Quando se pretende adicio-
nar novas imagens o ideal é colocar dentro da pasta “drawable”, apesar disso
como exemplo vamos usar “mipmap”.

26
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 21. Definição de um objeto View que apresenta o ícone da aplicação.

Ao nível do código podemos alterar a imagem durante a execução com os méto-


dos setImage.

Figura 22. Colocar uma imagem do diretório Resources em ImageView.

EditText

Figura 23. Os campos “EditText” são como os “TextView”, mas com a propriedade “editável” para true, com a
qual o utilizador pode alterar o seu texto.

Figura 24. Definir um EditText.

Podemos captar as suas alterações através do evento “onKey”.

27
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 25. Quando o utilizador edita o texto e prime “Enter” será apresentada uma mensagem.

Button

Permite definir botões típicos que reagem quando o utilizador os prime.

A sua definição XML:

Figura 26. Definir o botão na definição do layout.

Definir o comportamento ao premir:

Figura 27. Definir o comportamento de um botão.

28
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

CheckBox

Define um botão de dois estados, premido e não premido, que altera de uma
posição para outra conforme se prime.

Figura 28. Definir um checkbox.

Para além de poder captar eventos, como se de um botão se tratasse, por


exemplo definindo a classe OnClickListener, também podemos verificar o seu
estado a qualquer momento, consultando o seu método isChecked().

Figura 29. Comprovar o estado de um CheckBox.

RadioButton

São botões de dois estados (premido e não premido). Ao contrário do CheckBox,


Eliminado: o utilizador
os RadioButton, assim que passam para o estado de premidos, o seu estado
não pode voltar a ser alterado pelo utilizador. Eliminado: r
Eliminado: o estado
São, geralmente, utilizados vários ao mesmo tempo, agrupados por um Radio-
Group. Desta forma, ao premir um deles os restantes passam para o modo “não
premido”.

29
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 30. Definir um conjunto de RadioButton. Formatada: Tipo de letra: HelveticaNeue LT 56 Italic

Podemos definir um “listener” comum para todos os RadioButton.

Figura 31. Definir o comportamento do Radiobutton. Formatada: Tipo de letra: HelveticaNeue LT 56 Italic

Eliminado: r

Formatada: Não quebrar página antes


ToggleButton

Mostra um botão de dois estados, com uma luz que acende quando é premido.

O texto também altera, dependendo do estado.

30
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 32. Definição de um ToggleButton.

Figura 33. Manipular um ToggleButton.

RatingBar

É uma extensão de “ProgressBar” (barra de progresso) que permite mostrar uma


barra de avaliação com a qual é possível pontuar.

O utilizador pode escolher o número de estrelas que atribui e isso converte-se


num valor numérico que o nosso programa consegue captar.

Este é um bom exemplo de componente que amplia a funcionalidade de outro,


adicionando novas propriedades e métodos.

Por exemplo, na sua definição XML podemos indicar o número de estrelas que
serão apresentadas e o valor de cada uma delas.

31
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 34. Definição de uma RatingBar.

Também define novos métodos para responder a eventos do utilizador, neste


caso para responder quando o utilizador altera a pontuação.

Figura 35. Manipular um RatingBar. Eliminado: t

Outros componentes View

Além dos aqui mencionados, existem muitos outros componentes do tipo View
que podemos usar nas nossas interfaces, tais como WebView, VideoView, Me-
diaController, ProgressBar, etc.

A cada nova versão, do sistema operativo, são adicionados novos. Recomenda- Eliminado: ,
se a leitura da documentação2 para conhecer a lista completa e a forma de utili-
zação de todos os componentes.

2 http://developer.android.com/reference/android/view/View.html.

32
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

4. COLEÇÕES DE DADOS E VIEWS


Uma das tarefas mais comuns que um programador enfrenta é a de mostrar co-
leções de dados (listas, galerias fotográficas, etc.), apresentando-as de forma
agradável para o utilizador.

Para facilitar o trabalho, o Android fornece uma série de classes que deriva de
AdapterView.

O AdapterView é uma subclasse de ViewGroup, em que as suas Views descen-


dentes são definidas por um adaptador de dados (Adapter).

O Adapter é uma interface que define uma forma comum de acesso às cole-
ções.

A forma mais básica de utilizar estes Adapter é utilizando alguns dos Adapter
implementados em Android, como por exemplo e ArrayAdapter, que nos permi-
te ligar coleções de dados do tipo Array.

33
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Exemplo Formatada: Quebra de página antes

Primeiro definimos um Layout que contenha a vista do tipo ListView (onde será
apresentada a lista).

Figura 36. Separador onde podemos encontrar a ListView.

Para identificá-lo vamos utilizar um id já definido em android: @android:id/list.

Também adicionámos uma View de texto com um id predefinido


@android/empty que usaremos mais à frente.

Figura 37. res/layout/layout_simplelist.xml

34
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Vejamos a Activity que liga os nossos dados a esta vista.

Figura 38. Atividade ArrayAdapterActivity.

Partindo de um “array de String” com os nossos dados, criámos um Ar-


rayAdapter, para o qual tivemos de transferir o contexto, a vista que será utiliza-
da para desenhar cada item (neste caso reutilizamos uma definida pelo Android)
e a coleção de dados a mostrar.

Finalmente localizámos a vista do tipo ListView, que definimos no Layout, e


associámos ao Adapter.

35
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 39. ArrayAdapter em funcionamento.

Quando o utilizador prime um item dispara o evento “onItemClick” que podemos


captar com o método ListView.setOnItemClickListener().

Figura 40. Gerir o evento OnItemClick.

Eliminado: ¶

36
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 41. Classe ArrayAdapterActivity completa.

Para nos facilitar ainda mais a vida, o Android faculta uma classe Activity espe-
cial, que integra a funcionalidade das listas chamada ListActivity.

Esta classe espera que a vista atribuída tenha uma view com identificador an-
droid:id/list e outra com o identificador android:id/empty.

Quando o adaptador não tem dados será apresentada a vista “empty”.

Formatada: Não quebrar página antes


Desta forma, o código anterior, usando uma ListActivity, ficaria da seguinte forma:
Eliminado: e

37
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 42. Classe MyListActivity completa.

Mas o que acontece se quisermos apresentar listas mais elaboradas em que é


necessário mostrar mais informação por item?

Nesse caso, temos mesmo de escrever o nosso próprio adaptador.

Imaginemos que queremos mostrar uma lista com as versões do Android.

Por cada versão será apresentado um logotipo, o número de versão e o nome


da mesma.

38
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Supondo que as imagens que vamos usar são recursos (estarão na pasta Formatada: Quebra de página antes
“res/drawable”), a seguinte classe ajuda-nos a conter a informação de uma versão:

Figura 43. Classe AndroidVersion.

A coleção de versões poderia ser definida como um ArrayList:

Figura 44. Exemplo com ArrayList.

39
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Apesar de ser suficiente ampliar a classe ArrayList e subscrever o método


getView(), neste caso vamos escrever um adaptador completo. Para isso, es-
tendemos a classe BaseAdapter.

Figura 45. myadapter.VersoesAdapter

40
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

O construtor da classe carrega um objeto “LayoutInflater” e para otimizar o có-


digo, utiliza o cache. Será o encarregado de “encher” a definição XML do Layout
Formatada: Cor do tipo de letra: Automática
e convertê-lo num objeto java que possamos manusear.

Os dados também são carregados num campo interno para poder aceder, de
imediato, aos mesmos.

Os métodos getItem(), getItemId() e getCount() são métodos simples que


devolvem o item, o identificador de item e o número de item da coleção, respeti-
vamente.

O método getView() é usado sempre que é necessário desenhar a lista (por Formatada: Não quebrar página antes

exemplo, ao fazer scroll), é o responsável pelo desenho de uma fila da lista. Por
ser usado tantas vezes, é necessário que seja muito rápido para dar uma sensa-
ção de fluidez, na nossa interface.

Eliminado: o
Neste caso, utilizámos dois mecanismos: o primeiro é a cache no LayoutInfla-
Formatada: Realce
ter, ao construir o Adapter, pois desta forma não é necessário criar um objeto
sempre que se refaça o desenho.

Utilizámos também uma classe ViewHolder que associámos à vista (na sua pro-
priedade tag), desta forma, se a vista já tiver sido criada não é necessário voltar
a criá-la e voltar a localizar os campos dentro da mesma.

Esta classe enche o layout que definimos com um XML para apresentar os dados. Formatada: Comprimido por 0,2 pt
Formatada: Tipo de letra: HelveticaNeue LT 55 Roman,
Comprimido por 0,2 pt

41
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Eliminado: <#>¶
Formatada: Comprimido por 0,2 pt

Figura 46. listaversao_item.xml

Precisamos também de ter um layout, simplelist, que contém apenas a vista


tipo ListView (onde será apresentada a lista), tal como foi feito no início deste
ponto.

Figura 47. Layout simplelist.xml.

Falta apenas utilizar o nosso Adapter num ListActivity, tal como fizemos ante-
riormente:

42
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Eliminado:

Figura 48. meuadapter.VersoesActivity

Os adapter são usados por muitos controlos, por isso, se forem bem programa-
dos, podem ser reutilizados.

Figura 49. Versões Adapter em ação.

43
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Imaginemos que queremos mostrar a informação de versões através de um con-


trolo Gallery, que mostra uma fila de Views com scroll horizontal e coloca a sele-
cionada no centro.

Pois bem, bastaria editar o layout e substituir ListView por uma vista tipo Gallery
e criar uma Activity para as ligar:

Figura 50. res/layout/gallery.xml.

Eliminado:

Figura 51. myadapter.VersoesGalleryActivity

Como se pode ver, com a simples alteração de algumas linhas de código o aspe-
to da nossa aplicação mudou radicalmente.

44
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 52. Componente Gallery, utilizando o nosso Adapter.

Outros componentes que usam adapters são: ExpandableListView, GridView ou


Spinner.

45
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

5. MENUS
Os menus são um componente comum a que os utilizadores estão acostuma-
dos, tanto que a maior parte dos terminais Android inclui um botão para os mos-
trar.

O Android oferece uma interface de programação para gerir os diferentes menus:

 Options Menu: o menu principal da Activity. É apresentado quando o


utilizador prime a tecla menu. Podem ser divididos em dois grupos:

 Icon Menu: mostra um menu de ícones. Suporta, no máximo, seis


itens e não pode conter checkboxes ou radiobuttons.

 Expanded Menu:→ é apresentado quando é ultrapassado o nú-


mero de itens máximo e é exibido o botão “mais”.

 Context Menu:→ são os menus de contexto que podem ser apresentados


quando o utilizador prime prolongadamente um objeto View.
 Submenus:→ trata-se de menus que são apresentados ao premir um
item de um menu.

Definir menus

A forma mais rápida de definir um menu é através de um ficheiro xml de recur-


sos. É colocado em res/menu/.

46
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 53. Definição de um menu como recurso (res/menu/menu_main.xml).

Por cada item, definimos o seu identificador (que é utilizado através da classe
R), o seu ícone e o texto da sua etiqueta.

Se tentou criar este menu provavelmente terá um erro nos android:icon; estes Eliminado: tentaste
são recursos do sistema, mas para os podermos usar precisamos de copiar os Eliminado: s
mesmo para a pasta drawable.

Deve pesquisar na internet as imagens e depois copiar as imagens para a cons- Eliminado: Podemos encontrar todos os recursos na pasta
adt-bundle-windows-x86-20131030\sdk\platforms, aqui pode-
trução do nosso menu, para as pastas drawable do nosso projeto. mos aceder a cada versão individualmente adt-bundle-
windows-x86-20131030\sdk\platforms\android-
Para usar este menu devemos “enchê-lo” (converter o xml num objeto) com uma 19\data\res\drawable-mdpi

classe “Inflater”, neste caso com “MenuInflater”. Eliminado: os ficheiros que nos interessam

Como queremos que o menu seja um menu de atividade, subscrevemos o méto-


do onCreateOptionsMenu() da nossa Activity.

Figura 54. "Encher" o menu da nossa atividade.

47
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 55. Exemplo do menu Action Bar criado.

O passo seguinte é captar a resposta do utilizador. Para isso, como é um menu


de Activity, escolhemos o método onOptionsItemSelected().

Figura 56. Gerir a resposta do utilizador.

48
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 57. Aspeto do menu de atividade com a ação.

Os menus de contexto são geridos de forma semelhante, mas escolhendo os


métodos correspondentes da vista que disparará o menu de contexto:

 onCreateContextMenu(): →para encher o menu.

 onContextItemSelected(): para gerir as seleções.

Eliminado: de
Para criar submenus basta colocar um tag de menu dentro de um tag em item.
Eliminado: :

49
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 58. Exemplo de definição de um submenu.

Figura 59. Visualização dos submenus.

Os menus também permitem usar o tag <group> para agrupar opções, ati-
var/desativar elementos, gerar menus automáticos com base em filtros de In-
tents, etc.

50
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Recomenda-se a consulta da documentação oficial para ver todas as opções3.

3
http://developer.android.com/guide/topics/ui/menus.html

51
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

6. DIÁLOGOS E NOTIFICAÇÕES
Determinadas situações obrigam-nos a mostrar mensagens aos utilizadores,
informando-os de diferentes tipos de avisos.

O Android oferece-nos três formas de mostrar notificações ao utilizador:

 Notificações pop-up. Eliminado:

 Notificações na barra de estado.


 Janelas de diálogo.

Formatada: Inglês (Estados Unidos)


Notificações pop-up (Toast Notifications)

São avisos que surgem sobre o ecrã. Ocupam apenas o espaço necessário para
mostrar o aviso.

Desaparecem automaticamente passado algum tempo.

Já usámos este tipo de avisos em exemplos anteriores. Para o criar precisamos


apenas de transferir o contexto da aplicação, o texto e a duração.

Figura 60. Mostrar um aviso toast. Eliminado: T

52
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 61. Exemplo de um toast.

Para indicar a duração da mensagem, no ecrã, usamos uma constante pré-


definida (neste caso de curta duração, LENGHT_SHORT).

As janelas de toast podem ser personalizadas. Para isso devemos definir o seu
aspeto com um layout xml que será cheio e atribuiremos à vista a raiz do toast. Eliminado: :

Figura 62. res/layout/meu_toast.xml. Formatada: Inglês (Estados Unidos)

É de notar que ao recipiente LinearLayout atribuímos um id único, que será


utilizado para o encher. Eliminado: :

53
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

O nosso toast terá um aspeto semelhante a este:

Figura 63. Mostrar um toast com um aspeto personalizado.

Figura 64. Exemplo de toast personalizado. Eliminado: e o

54
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Notificações na barra de estado (Status Bar)

Este tipo de avisos mostra um ícone na barra de estado, acompanhado de um


texto. Quando o utilizador prime sobre eles, o sistema dispara um Intent (nor-
malmente uma Activity).

Um exemplo claro de notificação na barra de estado são os avisos que se mos-


tram quando chega um e-mail novo.

Para mostrar um aviso na barra de estado devemos usar o gestor de notifica-


ções do sistema (NotificationManager).

Devemos então criar um objeto “NotificationCompat.Builder” em que definire-


mos o ícone, o título e a mensagem que será apresentada e o momento em que Eliminado: ,
deve ser apresentada. Eliminado: curta

O título e um texto será apresentado ao mostrar a barra de estado e com um Eliminado: Esta informação básica pode ser complementada
com
Intent que será disparado quando o utilizador premir sobre as mensagens.
Eliminado: um
Eliminado: que
Eliminado: <#>¶

Figura 65. Lançar um aviso através da barra de estado.

Eliminado:
Para efeitos de teste, podemos colocar o código anterior dentro da função On-
Create de um projeto, para verificarmos o funcionamento das notificações.

55
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Eliminado:

Figura 66. Visualização da notificação.

As notificações4 também podem ser personalizadas com objetos layouts pró-


prios, alteradas as mensagens, atribuídas ações como vibração, sons, LED in-
termitentes, etc.

Diálogos (Dialog)

Os diálogos são pequenas janelas que se apresentam à frente das nossas ativi-
dades mais importantes. Podem receber interação por parte do utilizador.

São como pequenas atividades que realizam tarefas secundárias da atividade


atual.

A classe responsável pela sua gestão é Dialog, de onde derivam várias classes
especializadas que facilitam a sua utilização:

 AlertDialog.

 ProgressDialog.

 DatePickerDialog.

 TimePickerDialog.

Obviamente, se estas classes não satisfizerem as nossas necessidades, pode-


mos estender a classe Dialog e personalizá-la ao nosso gosto.

Uma vez que os diálogos são apresentados a partir de uma atividade, a classe Formatada: Não quebrar página antes

Activity incorpora uma série de métodos para a sua gestão:

4
http://developer.android.com/guide/topics/ui/notifiers/notifications.html

56
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

 onCreateDialog(int): usa-se a primeira vez que se invoca o diálogo, é


o responsável pela sua criação.

 onPrepareDialog(int): é chamado mesmo antes da sua apresentação.

 showDialog(int): apresenta o diálogo.

 dismissDialog(int): encerra o diálogo, a atividade guarda o seu estado.

 removeDialog(int): encerra o diálogo e elimina-o totalmente.

Todos os métodos recebem um número inteiro. A melhor forma de gerir os diálo-


gos é usar um switch, dentro destes métodos, para gerir cada tipo de diálogo.

O seguinte exemplo subscreve o método onCreateDialog() que gere dois diálogos:

 Um AlertDialog que apresenta uma mensagem e dois botões, quando


se prime o botão “sim” a atividade é fechada, com o botão “não” fecha-
se o diálogo.
 O outro é um diálogo de progresso indeterminado (roda de progresso).

Formatada: MD_Imagen, Esquerda

57
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Eliminado: <#>¶

Figura 67. showDialog(DIALOG_PROGRESS)

58
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 68. showDialog(DIALOG_ALERT).

Como se pode ver, para a criação de diálogos Android implementa-se o padrão


de desenho Builder. Através dele podemos criar o diálogo completo com todas
as suas características.

A potência dos diálogos não fica por aqui: podemos elaborar diálogos de pro-
gresso do tipo barra, que atualizam o progresso a partir da atividade, podemos
adicionar coleções de dados aos nossos diálogos e podemos alterar totalmente Eliminado: ,
o seu aspeto e os detalhes na documentação oficial5.

5
http://developer.android.com/design/building-blocks/dialogs.html

59
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

7. ESTILOS E TEMAS
Em HTML, com as folhas de estilo CSS podemos alterar totalmente o aspeto de
uma página da Internet, separando, desta forma, a estrutura do desenho.

O Android oferece-nos um mecanismo semelhante para poder personalizar o


aspeto da nossa aplicação: os temas e os estilos.

Os estilos podem definir propriedades como tamanhos de letras, cores, fundos,


sombras e muitas outras coisas.

São definidos num ficheiro de recursos diferente do layout. Este ficheiro irá para
o diretório res/values/, uma vez que se trata de definições simples.

Os ficheiros de estilos não precisam de ter um nome em concreto, apesar de,


por uma questão de clareza, geralmente se chamarem styles.xml e/ou the-
mes.xml.

São ficheiros XML em que a raiz deve ser <resources> e que contêm elementos
<style> e <item>.

Estes ficheiros, na compilação convertem-se num objeto de recursos que pode-


remos chamar através do seu id definido na propriedade “name” do nó “style”.

Os estilos podem ser aplicados a cada objeto View individualmente ou a Ativida-


des inteiras, dependendo se é realizado no ficheiro de layout ou no manifesto.

60
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Os estilos são aplicados na etiqueta “style”:

Figura 69. Layout que usa estilos.

Neste exemplo, ao primeiro TextView é aplicado o estilo denominado “Titulo” e


ao segundo estilo denominado “Titulo.Verde”.

Estes estilos deverão estar definidos em res/values.

61
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 70. res/values/styles.xml

62
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 71. A vista com estilos.

Cada estilo deve derivar de outro, ou seja, deve ter um ascendente. Isto pode
ser definido de duas formas:

 Com a etiqueta “parent”, como é o caso do estilo Título que deriva do


estilo definido pelo Android TextAppearance.Large (texto grande).
 Outra forma é a implícita no nome, como é o caso de “Titulo.Verde”, que
indica que o ascendente é o estilo denominado “Titulo”, ou seja, herda
todas as propriedades de “Titulo” e subscreve a da cor do texto.

Os estilos, tal como os definimos, obrigam-nos a aplicá-los um a um aos nossos


objetos View.

Já mencionámos que os estilos também podem ser aplicados a uma Activity,


pelo que deveríamos poder transformar o aspeto sem termos de editar o layout.
Isto é obtido com os temas.

Para definir um tema subscrevemos as propriedades definidas nos atributos de


Android e atribuímos novos aspetos:

63
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 72. res/values/themes.xml

Neste caso o nosso tema altera o fundo da janela, colocando uma imagem, e
aplica um estilo próprio ao texto da barra de título e aos botões.

Estes estilos próprios também deverão estar definidos no AndroidManifest:

Figura 73. AndroidManifest.xml

Para aplicá-lo bastará referenciá-lo na propriedade “android:theme” de uma ati-


vidade definida no manifesto.

Ao alterar a propriedade “theme”, ficamos com o aspeto dos layouts que temos
utilizado como exemplo, desde o princípio da unidade didática, como:

64
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 74. Layout inicial com um tema exemplo aplicado.

Como se pode ver, os atributos que definimos no nosso tema foram aplicados
aos objetos View correspondentes e os restantes herdaram o aspeto do tema
ascendente (Theme.Light).

Mas que atributos podemos modificar? E como fazê-lo?

A melhor forma de responder a estas perguntas é ver o código fonte dos temas
que o Android nos proporciona.

De facto, é uma boa ideia que os nossos temas sejam descendentes de algum
dos predefinidos, desta forma, se nos esquecermos de definir algum atributo, as
propriedades serão herdadas, por defeito.

Os estilos e os temas definidos pelo Android podem ser consultados no repositório


do código fonte Android (vantagens de utilizar uma plataforma OpenSource):

 https://android.googlesource.com/
Mais concretamente os estilos encontram-se em: Formatada: Não quebrar página antes

 https://android.googlesource.com/platform/frameworks/base/+/refs/head
s/master/core/res/res/values/styles.xml
E os temas em:
 https://android.googlesource.com/platform/frameworks/base/+/refs/head
s/master/core/res/res/values/themes.xml.

65
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

8. TEXT TO SPEECH (TTS)


Na versão 1.6 foi introduzida a biblioteca TTS (Text To Speech) que permite ao
nosso terminal “falar” em diferentes idiomas.

Ainda que esta biblioteca seja distribuída, por defeito, com o sistema, em alguns
terminais, para poupar espaço, pode ser eliminada. Por isso, é conveniente rea-
lizar uma confirmação antes de instanciar o objeto TextToSpeech. Se não estiver
instalada, e a nossa aplicação precisar dela, podemos realizar uma chamada ao
Google Play, para que o utilizador a instale.

Para isso deveremos chamar:

Intent TextToSpeech.Engine.ACTION_CHECK_TTS_DATA Formatada: Inglês (Estados Unidos)

com um startActivityForResult

e confirmar o resultado devolvido no método onActivityResult():

66
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 75. A confirmar o resultado devolvido no método onActivityResult().

Ao construtor do objeto TextToSpeech devemos passar o contexto e um objeto


OnInitListener, que será avisado quando estiver completamente inicializado.

Uma vez que tenhamos configurado o nosso objeto TextToSpeech apenas deve-
remos chamar o seu método speak() para que fale:

Figura 76. A chamar o método speak().

O primeiro parâmetro é o texto que queremos que leia.

O segundo parâmetro é a estratégia a seguir, no momento de deixar o texto na Formatada: Não quebrar página antes
fila. Pode ser:

 QUEUE_ADD se queremos que se adicione ao final da fila (pelo que se


houver um texto antes, ouvir-se-á depois dele).
 QUEUE_FLUSH se queremos que a fila se esvazie e o nosso texto se
coloque em primeiro.

67
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

O terceiro parâmetro serve para mandar ajustes adicionais (ainda que o normal Formatada: Quebra de página antes
seja não passar nenhum). Podem ser:

 KEY_PARAM_STREAM, para especificar o stream de áudio a utilizar.


 KEY_PARAM_UTTERANCE_ID, para indicar o identificador do som que
se ouvirá, uma vez terminada a locução. Este parâmetro passar-se-á ao
listener TextToSpeech.OnUtteranceCompletedListener.
 KEY_PARAM_VOLUME, escolhe o nível de volume em que será repro-
duzida.
 KEY_PARAM_PAN, indica a direção de leitura (por exemplo da direita
para a esquerda).

Como já referimos, o uso normal dos objetos TextToSpeech é ler textos, ainda
que também os possamos guardar num ficheiro de tipo WAV usando o método:

mTts.synthesizeToFile(text, params, filename); Formatada: Inglês (Estados Unidos)

Como esta biblioteca consome bastantes recursos é uma boa ideia libertá-los
quando não os formos usar mais, chamando o seu método destroy(). Um bom
sítio para realizar a chamada é o método onDestroy() da nossa Activity.

Figura 77. Método onDestroy().

Siga um exemplo completo para poder testar esta funcionalidade, temos a classe Eliminado: Segue

MainActivity, e só precisa de um layout com um edittext e um botão para con- Eliminado: es


seguir executar este exercício. Eliminado: s
Eliminado: es
O mais provável é não conseguir testar num emulador, tente usar um dispositivo
Eliminado: es
físico para testar.
Eliminado: a

68
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 78. Classe que implementa o TTS.

69
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

9. RECONHECIMENTO DE VOZ
Ainda que já estivesse disponível em versões anteriores, como aplicação inde-
pendente, com a versão 2.1 Android foi introduzido o sistema de reconhecimento
de voz no teclado.

Este sistema permite ditar textos em vez de os teclar. Apenas temos de premir a
tecla do microfone do teclado soft e falar pausadamente para o nosso terminal.
Uma vez capturada a voz, o sistema processa-a e devolve o texto associado.

Google's Voice Search é uma aplicação que vem pré-instalada na maioria dos Formatada: Tipo de letra: HelveticaNeue LT 56 Italic, Não
Itálico
terminais Android e que tira o máximo partido desta funcionalidade. Graças a ela
podemos realizar pesquisas na Internet ou executar comandos (realizar chama-
das, enviar SMS…) com a nossa voz.

Adicionar reconhecimento de voz às nossas aplicações é muito simples (apenas


temos de tirar partido da arquitetura do sistema) já que basta chamar o Intent Formatada: Tipo de letra: HelveticaNeue LT 56 Italic, Não
Itálico

70
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

correspondente para que se abra o screenshot e nos devolva o texto que dite-
mos.

Ainda que hoje em dia o reconhecimento de voz venha pré-instalado na maioria


dos terminais, é possível que o utilizador ou o fabricante o tenha desinstalado.
Por isso, não é má ideia confirmar primeiro se está instalado e evitar as exce-
ções possíveis.

Uma função simples para confirmar isto seria:

Figura 79. Função para confirmar a instalação do reconhecimento de voz.

Uma vez confirmado que a Activity de reconhecimento de voz está disponível,


deveremos criar um Intent com, no mínimo, os seguintes parâmetros de cha-
mada:

Figura 80. Confirmação dos parâmetros da chamada.

A ação relacionada com a activity de reconhecimento de voz vem pré-definida na


constante RecognizerIntent.ACTION_RECOGNIZE_SPEECH.

O parâmetro RecognizerIntent.EXTRA_LANGUAGE_MODEL indica o padrão de


reconhecimento que deve usar. Podemos escolher entre dois:

 RecognizerIntent.LANGUAGE_MODEL_WEB_SEARCH se esperamos
frases curtas ao estilo das cadeias de pesquisa web.
 RecognizerIntent.LANGUAGE_MODEL_FREE_FORM para ditados
(normalmente usa-se este).

Opcionalmente podemos passar os seguintes parâmetros para personalizar me-


lhor a janela de captura e a resposta:

 RecognizerIntent.EXTRA_LANGUAGE se quisermos forçar a que a cap-


tura seja num idioma em concreto (em vez do idioma, por defeito, do ter-
minal).

71
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

 RecognizerIntent.EXTRA_MAX_RESULTS limite opcional de número de


resultados a obter.
 RecognizerIntent.EXTRA_PARTIAL_RESULTS deveremos colocá-lo
em true se quisermos que nos devolva os textos reconhecidos, apenas
em parte (por defeito é false).
 RecognizerIntent.EXTRA_PROMPT permite passar um texto que se
mostrará no ecrã de captura de voz.

A chamada ao Intent deverá ser feita através do método startActivityForResult()


para que, desta forma, possamos recolher o resultado no método onActivityRe-
sult().

Por exemplo, se lançarmos o nosso Intent da seguinte forma:

Obteremos uma caixa de diálogo semelhante a esta:

Figura 81. Caixa de diálogo obtida do Intent.

Poderemos processar o resultado confirmando que a Activity de captura nos


devolveu o código RESULT_OK, associado ao nosso código de pedido (neste
caso a constante “VOICE_RECOGNITION_REQUEST_CODE”).

72
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

A Activity devolver-nos-á uma lista de cadeias com os textos ditados:

Figura 82. String de textos ditados.

73
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

74
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Figura 83. Classe MainActivity que implementa TTS e reconhecimento de voz.

Figura 84. Layout activity_main usado com a classe anterior. Formatada: MD_PieFigura1, Espaço Depois: 6 pt
Eliminado: ¶

75
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

CONCLUSÃO

Dispõe da equipa de tutores, da Master.D, para o ajudar em


tudo o que precisar. Contacte-nos.

Eliminado: <#>¶
Tal como foi possível verificar ao longo desta unidade didática, o Android propor-
ciona-nos uma série de ferramentas muito eficazes, com as quais podemos criar
interfaces de utilizador muito potentes e úteis, de forma muito simples.

O limite está na nossa imaginação (e nos nossos dotes de desenho).


<#> ... [38]
Quando desenha interfaces com o Android tenha sempre presente que está a Formatada
desenvolver para dispositivos móveis e táteis, por isso tente facilitar a vida ao Eliminado: s
utilizador: use botões grandes, textos com cores adequadas, fundos apropria- Eliminado: tem
dos, etc. Eliminado: s

Para além disso, o reconhecimento e a sintetização de voz estão perfeitamente Eliminado: a

integrados no Android. O próprio SDK fornece-nos as ferramentas necessárias Eliminado: usa

para integrar estas funcionalidades, de uma forma simples, nas nossas aplica- Eliminado: adequados

ções.

77
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

RESUMO

Nesta unidade didática abordámos principalmente o objeto básico View, sendo


que é a partir deste que se criam os restantes componentes da interface de utili-
zador Android. Vimos View especializados como Button, TextView, TextE-
dit...

Aprendemos que graças aos Layouts podemos formatar estes componentes.


Detivemo-nos em alguns deles (LinearLayout, FrameLayout, Relative-
Layout...).

Eliminado: Aprendemos
Observámos que os objetos AdapterView nos permitem apresentar facilmente
coleções de dados usando Adapters.

Como exemplo, utilizámos ListView e conhecemos um tipo de atividade especia-


lizada na sua utilização: ListActivity.

Também aprendemos a utilizar menus e diálogos de utilizador em todas as suas


variantes.

Descobrimos que graças aos estilos e temas podemos alterar totalmente o aspe-
to estético das nossas aplicações.

Finalmente vimos também que o reconhecimento de voz se realiza chamando


uma Activity do sistema, através do método startActivityForResult() (já que deve-
remos recolher logo os parâmetros que nos devolva com os resultados). Para
facilitarmos a chamada a esta Activity temos a classe RecognizerIntent.

78
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

AUTOAVALIAÇÃO

1. De que forma se organizam os objetos View em Android?

a) Em forma de árvore.
b) De forma sequencial.
c) De forma linear.
d) Não têm uma ordem fixa.

2. Como podemos definir a nossa interface de utilizador?

a) Mediante um ficheiro de tipo Java.


b) Mediante um ficheiro de tipo XML. Eliminado:

c) Mediante um ficheiro de tipo PNG.


d) Mediante um ficheiro de tipo PNG.

3. Que método da nossa atividade devemos utilizar para estabelecer o nosso objeto View
principal?

a) setMainView.
b) setContentView.
c) setRootView.
d) setView.

79
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

Eliminado: ?
4. Na definição dos objetos dentro de um layout utilizamos as seguintes instruções. Assinale
qual a caracterização correta das mesmas. Eliminado: Assinala

a) layout_width - peso, layout_height- altura, layout_weight – largura. Eliminado: -


Formatada: Inglês (Estados Unidos)
b) layout_width - altura, layout_height-largura, layout_weight – peso.
Formatada: Inglês (Estados Unidos)
c) layout_width - largura, layout_height- altura, layout_weight – peso. Formatada: Inglês (Estados Unidos)

d) layout_width - peso, layout_height- largura, layout_weight – altura. Eliminado: -


Formatada: Inglês (Estados Unidos)
Formatada: Inglês (Estados Unidos)
5. Para podermos usar a funcionalidade do layout_weight com um layout na horizontal, Eliminado: -
que cuidado temos de ter em atenção?
Formatada: Inglês (Estados Unidos)

a) Adicionar um novo campo height =”0dp”. Formatada: Inglês (Estados Unidos)


Eliminado: -
b) Colocar o campo width =”0dp”. Formatada: Inglês (Estados Unidos)
Formatada: Inglês (Estados Unidos)
c) Adicionar um novo campo weight =”0dp”.
d) Colocar o campo height =”0dp”.

6. Se queremos mostrar uma coleção de dados na forma de lista, que objeto devemos usar?

a) TextView.
b) ViewList.
c) ListView.
d) EditText.

7. Para que um objeto possa ser desenhado, em diferentes dispositivos, que propriedade
não devemos declarar?

a) AUTO.
b) Uma dimensão exata.
c) WRAP_CONTENT.
d) FILL_PARENT.

80
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

8. Para identificar cada um dos componentes da vista, que atributo utilizamos?

a) view.
b) name.
c) key.
d) id.

9. Os identificadores definidos durante a compilação são guardados numa classe gerada.


Qual?

a) Numa classe de recursos chamada Interface.


b) Numa classe de recursos chamada Android.

c) Numa classe de recursos chamada Resources.

d) Numa classe de recursos chamada R.

10. Qual destas formas de aceder ao contexto está incorreta?

a) getMyContext().
b) getContext().
c) this.
d) getApplicationContext().

81
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

SOLUÇÕES

1. a 2. b 3. b 4. c 5. b

6. c 7. b 8. d 9. d 10. a

83
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

PROPOSTAS DE DESENVOLVIMENTO DO ESTUDO

Recomenda-se a leitura da seguinte documentação oficial: Eliminado: dos

 Criação dos nossos próprios componentes:


http://developer.android.com/guide/topics/ui/custom-components.html.

 HelloViews (exemplos de utilização de diferentes objetos View):


http://developer.android.com/resources/tutorials/views/index.html.

 Truques para layouts - reutilizar:


http://developer.android.com/resources/articles/layout-tricks-reuse.html.

 Truques para layouts - criar layouts eficientes:


http://developer.android.com/resources/articles/layout-tricks-efficiency.html.

 Truques para layouts - misturar layouts:


http://developer.android.com/resources/articles/layout-tricks-merge.html.

84
Unidade didática 5
INTERFACE DE UTILIZADOR EM ANDROID

BIBLIOGRAFIA

 Android Developers, página consultada em 22 de março de 2015,


http://developer.android.com/resources/tutorials/views/index.html.
 Android Developers, página consultada em 22 de março de 2015,
http://developer.android.com/guide/topics/ui/menus.html
 Android Developers, página consultada em 22 de março de 2015,
http://developer.android.com/guide/topics/ui/dialogs.html.
 Android Developers, página consultada em 22 de março de 2015,
http://developer.android.com/guide/topics/ui/themes.html.

Eliminado: <#>Android Developers, página consultada em 22


de maio de 2014,
http://developer.android.com/resources/tutorials/views/index.ht
ml.¶
<#>Android Developers, página consultada em 22 de maio de
2014, http://developer.android.com/guide/topics/ui/menus.html¶
<#>Android Developers, página consultada em 22 de maio de
2014,
http://developer.android.com/guide/topics/ui/dialogs.html.¶
<#>Android Developers, página consultada em 22 de maio de
2014,
http://developer.android.com/guide/topics/ui/themes.html.¶

85
Unidade didática 5
Página 1: [1] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [2] Alterar Unknown
Código de campo alterado
Página 1: [3] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [4] Alterar Unknown
Código de campo alterado
Página 1: [5] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [6] Alterar Unknown
Código de campo alterado
Página 1: [7] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [8] Alterar Unknown
Código de campo alterado
Página 1: [9] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [10] Alterar Unknown
Código de campo alterado
Página 1: [11] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [12] Alterar Unknown
Código de campo alterado
Página 1: [13] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [14] Alterar Unknown
Código de campo alterado
Página 1: [15] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [16] Alterar Unknown
Código de campo alterado
Página 1: [17] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [18] Alterar Unknown
Código de campo alterado
Página 1: [19] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [20] Alterar Unknown
Código de campo alterado
Página 1: [21] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [22] Alterar Unknown
Código de campo alterado
Página 1: [23] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [24] Alterar Unknown
Código de campo alterado
Página 1: [25] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [26] Alterar Unknown
Código de campo alterado
Página 1: [27] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [28] Alterar Unknown
Código de campo alterado
Página 1: [29] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [30] Alterar Unknown
Código de campo alterado
Página 1: [31] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [32] Alterar Unknown
Código de campo alterado
Página 1: [33] Formatada Catia Dobroes 19/06/2015 15:16:00
Português (Portugal)
Página 1: [34] Alterar Unknown
Código de campo alterado
Página 1: [35] Eliminado Catia Dobroes 19/06/2015 15:16:00

MOTIVAÇÃO................................................................................................. 3
OBJETIVOS .................................................................................................. 4
INTRODUÇÃO ................................................................................................ 5
1. COMPREENDER A INTERFACE DE UTILIZADOR DO ANDROID ......................................... 7
2. LAYOUTS TÍPICOS ..................................................................................... 10
3. VIEWS E EVENTOS DO UTILIZADOR ...............................................................2722
4. COLEÇÕES DE DADOS E VIEWS .....................................................................3429
5. MENUS..............................................................................................4740
6. DIÁLOGOS E NOTIFICAÇÕES........................................................................5345
7. ESTILOS E TEMAS ...................................................................................6253
8. TEXT TO SPEECH (TTS) .............................................................................6960
9. RECONHECIMENTO DE VOZ ........................................................................7364
CONCLUSÃO ............................................................................................7971
RESUMO ................................................................................................8072
AUTOAVALIAÇÃO ......................................................................................8173
SOLUÇÕES ..............................................................................................8577
PROPOSTAS DE DESENVOLVIMENTO DO ESTUDO ....................................................8678
BIBLIOGRAFIA..........................................................................................8779
Página 3: [36] Eliminado Catia Dobroes 19/06/2015 15:19:00

Comanda Comande o steu futuro. Na Master.D, acompanhamo-


los-te incondicionalmente.

Página 13: [37] Eliminado Catia Dobroes 19/06/2015 14:52:00

Só conseguimos usar a funcionalidade do weight se colocarmos


o layout_width=”0dp” no caso de uma orientação horizontal. No
caso de uma orientação na vertical teremos de colocar o
layout_height=”0dp”. Em versões anteriores, outro aspeto a ter
em conta, nesta fase, é que é necessárioa necessidade de indi-
car o peso total do layout, através da instrução an-
droid:weightSum=””.
Página 77: [38] Eliminado Catia Dobroes 19/06/2015 15:13:00

Dispões da equipa de tutores, da Master.D, para teo ajudar em


tudo o que precisares. Contactea-nos.

Você também pode gostar