Programação para

Dispositivos Móveis
MÓDULO 2: Explorando o Designer

Prof. Me. Diogo Tavares da Silva

contato: tavareko@gmail.com
Ementa
● Apresentação dos componentes de Tela
○ Paleta: Organização e Interface de Usuário
○ Propriedades: Como configurar
● Criação de app para demonstração de
componentes
● Teste de app
● Exercício
 Interface do Designer
● É composta por cinco janelas:
○ Paleta
○ Visualizador
○ Componentes
○ Multimídia
○ Propriedades
 Interface do Designer
● É composta por cinco janelas:
Interface do Designer
● É composta por cinco janelas:
○ Paleta: Agrupa todos os componentes
disponíveis. Você pode arrastar e soltar qualquer
componente da Paleta no Visualizador.
○ Visualizador: Exibe uma pré-visualização do
aplicativo construído arrastando os componentes
da Paleta e alterando-os em Propriedades.
○ Componentes: Exibe uma lista todos os
componentes adicionados ao aplicativo. A Tela
inicial é automaticamente apresentada como um
componente.
Interface do Designer
● É composta por cinco janelas:
○ Multimídia: Exibe os arquivos de mídia
carregados adicionalmente para uso do aplicativo,
tais como imagens e sons.
○ Propriedades: Permite visualizar e alterar
qualquer uma das propriedades (características)
do componente atualmente selecionado.
Mecanismo de funcionamento
-Situação inicial

Árvore
de
Componentes
Tela vazia vazia
Mecanismo de funcionamento
-Ao arrastar um objeto para o Visualizador

Cada objeto
tem suas
características,
O objeto é que são exibidas
e podem ser
inserido na editadas na
árvore Janela de
Propriedades
Janela de Propriedades
● Cada componente é um “objeto”
que é definidos por um conjunto de
propriedades.
● As propriedades são atributos
salvos na memória para armazenar
informações sobre o objeto.
● Objetos visíveis em tela, por
exemplo, têm as grandezas como
Altura, Largura, Alinhamento, etc.
que juntos definem como o
componente se apresenta na tela.
Renomear/Apagar Objetos
● Renomear objeto é uma prática
recomendável (boa prática de
programação)
● Facilita na identificação de cada objeto
dentro do conjunto do aplicativo tanto na
árvore de componentes, quanto na tela
de blocos.
● Procure sempre escolher nomes que se
relacionem com a função do objeto
Janela de Mídia

● Janela em que se Carrega mídias

que serão utilizadas no aplicativo
○ áudios, imagens e vídeos…
● Qual formato?
○ https://developer.android.com/gu
ide/topics/media/media-formats
Visibilidade de componentes
• componentes visíveis: São os
componentes visíveis na interface
de usuário:
■ botões
■ caixa de texto
■ Legenda
• componentes invisíveis: Não são
parte da interface visível do
usuário. Porém, fornecem acesso
as funcionalidade integradas do
dispositivo.
■ MensagensSMS
■ SensorDeLocalização
■ TextoParaFala
■ Som
Paleta - Separadores de Conteúdo
● Interface de Usuário: Objetos de interação com o
usuário
● Organização: grades que definem o layout de
distribuição dos objetos no visualizador
● Mídia: Objetos que tratam de som e imagem
● Desenho e Imagem: Tela de pintura e objeto móvel
● Maps: Elementos de geolocalização
● Sensores: Sensores de movimento, tempo,
orientação entre outros.
● Social: Contatos, Mensagens e Redes Sociais
● Armazenamento: persistência de Dados
● Conectividade: Bluetooth e Web
● Lego Mindstorms: objetos do kit de robótica Lego
● Experimental: Objetos em teste
● Extension: objetos desenvolvidos externamente
Atividade: Organização do espaço da
interface
● Um dos principais fundamentos do design
gráfico é o uso do espaço
● Uma maneira de organizar os elementos de

modo a aproveitar o espaço de forma

harmoniosa é usar o conceito de grade
(grid)
● Confina e organiza os elementos dentro de

um subespaço da janela
Atividade: Organização do espaço da
interface
● Inicie um novo projeto
○ modulo0201
Organizadores
● Organização Horizontal:
○ Elemento de formatação que organiza
componentes lado a lado horizontalmente
● Organização Vertical:
○ Elemento de formatação que organiza
componentes verticalmente um abaixo do outro
● Organização em tabela
○ Um elemento de formatação para se colocar

componentes que devem ser exibidos em forma

de tabela.
Organizadores
● Montagem da grade
○ Arrastamos os componentes para dentro dos

organizadores e ajustamos as propriedades

○ Podemos colocar organizadores dentro de outros

organizadores
Organizadores

● Altere a propriedade altura para 50 em

percentagem. O que acontece?
● Altere a propriedade altura para preencher principal.
O que acontece?
● Altere a propriedade Largura para preencher
principal. O que acontece?
● Altere valores e observe
 Separador – Organização

● Abra o separador Interface de

Usuário e arraste um botão para o
visualizador dentro do
OrganizadorHorizontal1
● Escolha o OrganizadorHorizontal1
no painel Componentes e mude as
propriedades
AlinhamentoHorizontal e
X
AlinhamentoVertical
Separador Organização

250
80
Separador Organização

● Insira uma OrganizaçãoVertical

●
●

• Retire os botões da organização horizontal

• Mova a organização horizontal para dentro da
organização vertical
• Recoloque os botões dentro da organização
horizontal
 Separador – Organização

● Insira mais dois

Organizadores Horizontais
no Organizador Vertical
● Insira três botões no
segundo Organização
Horizontal com largura
preencher principal
● Insira quatro botões no
terceiro Organização
Horizontal com largura de
25%
Exercício: Monte a tela
 Resposta
Montar