Tip:
Highlight text to annotate it
X
Depois vamos melhorar a interface do aplicativo turístico que fizemos
anteriormente. Se você está lembrado, tínhamos uma interface simples.
Abra o projeto para continuar trabalhando nele. Como vemos, cada elemento aparece
na linha; esteticamente não é atraente. Para conseguir ter os três botões agrupados
em uma única linha arrastamos um elemento HorizontalArrangement da paleta a Viewer.
Lembre-se que HorizontalArrangement está em ScreenArrangement na
coluna da esquerda. Depois arrastamos os botões da paleta ao HorizontalArrangement
de tal forma que fique 1 ao lado do outro. Agora definimos o tamanho da imagem
dos monumentos. Queremos que a imagem ocupe toda a largura da tela para vê-la o
maior possível. Para isso, alteramos o tamanho do componente Image para que ocupe toda a
tela.
Selecionamos o componente e colocamos os parâmetros Width e Height na opção FillParent
Assim obtemos uma interface mais organizada e clara. Contudo, deveríamos fazer que ao
entrar no aplicativo Image haja alguma imagem e não apareça em branco.
Selecionamos o componente Image e em Propriedades, por exemplo, selecionamos
a imagem: ayuntamiento 2 (prefeitura 2) Segundo o visto até agora, já poderíamos personalizar, por exemplo, os
botões dos Monumentos. Para tornar mais compreensível o aplicativo primeiro introduzimos
manualmente o tamanho dos botões. selecionamos o primeiro botão e em Properties o item
Width y Height
Selecionamos a opção que permite introduzir o tamanho pixels e introduzimos um tamanho
de 50 para os dois campos. Agora vamos utilizar as imagens dos monumentos que temos
para personalizar esses mesmos botões.Selecionamos cada um dos botões e em Properties
o item Image. Selecionamos a imagem correspondente.
Elimine o Texto que tinham os botões já que, neste caso, utlizamos imagens que
já representam os monumentos. Como estamos vendo, o Texto aparece em cima das imagens dificultando
sua visualização. Falta trabalhar o fundo do aplicativo. Como a imagem ocupa a
maior parte da tela. Colocar uma imagem de fundo dificultaria o uso do Aplicativo.
Por isso, vamos testar a alteração de cor para que se integre melhor com os Conteúdos.
Clicamos na tela e em Propriedades no item BackgroundColor alteramos a
cor branca pela laranja.
Para terminar, alteramos o nome da tela, selecionamos e em componentes
alteramos o item Tittle, Screen1 por 'descubra madri'. Para adicionar mais melhorias
podemos modificar a fonte do título. Para ver se outra tipografia seria mais adequada
clicamos na label do título e em Propriedades no item FontTypeface selecionamos
alguma das outras fontes disponíveis, por exemplo, Monospace. Para finalizar só
falta adicionar o ícone. Para isso, clicamos em Screem e adicionamos a imagem na propriedade
ícone. A interface do aplicativo mudou muito desde o desafio anterior.
De acordo com o que estudamos, conseguimos que o aplicativo seja esteticamente
mais atraente. Dá para ver sem problemas as funcionalidades de cada um dos botões
e conseguimos uma interface limpa e organizada.