Introdução
Vimos anteriormente em nossos artigos a criação de aplicações com banco de dados Firebird e SQLite, além da utilização dos recursos Intents. No entanto focamos até o momento nas funcionalidades ‘internas’ e não vimos ainda à customização visual de nossas aplicações, diante disto iniciaremos nosso artigo para demonstrar algumas formas de melhorar a aparência de sua aplicação.
Aplicação
Iniciaremos criando uma simples aplicação mobile, portanto vá em:
-
File/New/Firemonkey Mobile Application – Delphi
Lembre-se, neste exemplo vamos mostrar apenas a parte visual de nosso projeto!
Adicione os seguintes componentes em seu formulário:
Image1: TImage;
Image2: TImage;
Image3: TImage;
Image4: TImage;
Image5: TImage;
ColorBox1: TColorBox;
Layout1: TLayout;
Layout2: TLayout;
Button1: TButton;
Button2: TButton;
Button3: TButton;
ListBox1: TListBox;
ListBoxGroupHeader1: TListBoxGroupHeader;
ListBoxItem1: TListBoxItem;
ListBoxItem2: TListBoxItem;
ListBoxItem3: TListBoxItem;
ListBoxGroupFooter1: TListBoxGroupFooter;
Listagem 1 – Componentes.
Com os componentes adicionados em nosso projeto, podemos iniciar.
Altere a propriedade ‘Align’ do ‘Layout1’ para ‘alTop’ e do ‘Layout2’ para ‘alBottom’ assim poderemos posicionar as imagens de tal forma que tanto na vertical quanto na horizontal as informações fiquem visíveis. Insira através da paleta ‘Structure’ o componente ‘Image1’ dentro do ‘Layout1’, conforme ilustra a imagem abaixo:
Imagem 1 – Structure.
Altere a propriedade ‘Align’ do componente ‘Image1’ para ‘alClient’ e do ‘Image2’ para ‘alTop’ neste momento poderá definir as imagens que irá utilizar em seu exemplo, veja abaixo como deve ficar o formulário.
Imagem 2 – Formulário Principal.
As três imagens restantes serão nossos botões de ‘Inserir’, ‘Deletar’ e ‘Enviar’. Para que elas fiquem centralizados na tela insira ambos no ‘Layout2’, o alinhamento do botão ‘Inserir’ será ‘alLeft’, ‘Deletar’ ‘alCenter’ e ‘Enviar’ ‘alRight’.
Abaixo do ‘Layout2’ vamos inserir nosso ‘Colorbox1’, defina o alinhamento para ‘alBottom’ e insira seu ‘Listbox’ nele, altere a propriedade ‘StyleLookup’ para ‘Transparentlistboxstyle’ para que nosso ‘Listbox1’ fique transparente e exiba a imagem ou cor que estiver ao fundo, seu alinhamento será ‘alClient’ para que corresponda ao tamanho do ‘ColorBox1’, por fim altere a cor do ‘Colorbox1’ para ’Darkorange’.
Imagem 3 – ListBox.
Veja que já temos alguns itens inseridos no Listbox, para adiciona-los acesse a propriedade ‘Item Editor...’, através do botão direito do mouse, e inclua os seguintes itens:
ListBoxGroupHeader1;
ListBoxItem1; ListBoxItem2; ListBoxItem3;
ListBoxGroupFooter1.
Imagem 4 – Itens Listbox.
Agora que todos os itens foram posicionados podemos alterar o plano de fundo de nosso formulário, para isso acesse a propriedade ‘Brush’ conforme imagem abaixo:
Imagem 5 – Brush.
Após definir o plano de fundo sua tela deverá ficar parecida com imagem abaixo:
Imagem 6 – Plano de Fundo.
Com o layout definido coloque os três botões inseridos anteriormente nas imagens ‘Inserir’, ‘Deletar’ e ‘Enviar’, para isso utilize a ’Structure’ e arraste os botões para dentro das imagens, altere a propriedade ‘StyleLookup’ para ‘Transparentcirclebuttonstyle’ e deixe o ‘Align’ para ‘alClient’ assim as imagens serão como os botões em sua tela.
Agora que finalizamos a customização de nosso projeto note que ao alterar a orientação da tela em tempo de execução os itens ficarão um sobre o outro. Para corrigir isto vamos utilizar o evento ‘OnResize’ do formulário.
Imagem 7 – Orientação.
Adicione na Uses a Unit ‘FMX.Platform’ e no evento ‘OnResize’ insira o seguinte comando:
procedure TFrmxPrincipal.FormResize(Sender: TObject);
Var
STela: IFMXScreenService;
Orientacao: TScreenOrientation;
begin
if Assigned(FrmxPrincipal) Then
Begin
STela:= TPlatformServices.Current.GetPlatformService(IFMXScreenService) as IFMXScreenService;
Orientacao:= STela.GetScreenOrientation;
// Vertical
if (Orientacao = TScreenOrientation.soPortrait) or (Orientacao = TScreenOrientation.soInvertedPortrait) then
Begin
Image4.Align:= TAlignLayout.alNone;
Image4.Height:= 60;
Image4.Align:= TAlignLayout.alTop;
Image5.Align:= TAlignLayout.alNone;
Image5.Height:= 130;
Image5.Align:= TAlignLayout.alTop;
Layout2.Align:= TAlignLayout.alNone;
Layout2.Height:= 50;
Layout2.Align:= TAlignLayout.alTop;
ColorBox1.Align:= TAlignLayout.alNone;
ColorBox1.Align:= TAlignLayout.alClient;
End;
// Horizontal
if (Orientacao = TScreenOrientation.soLandscape) or (Orientacao = TScreenOrientation.soInvertedLandscape) then
Begin
Image4.Align:= TAlignLayout.alNone;
Image4.Width:= FrmxPrincipal.Width;
Image4.Align:= TAlignLayout.alTop;
Image5.Align:= TAlignLayout.alNone;
Image5.Width:= FrmxPrincipal.Width / 2;
Image5.Align:= TAlignLayout.alLeft;
Layout2.Align:= TAlignLayout.alNone;
Layout2.Height:= 50;
Layout2.Align:= TAlignLayout.alBottom;
ColorBox1.Align:= TAlignLayout.alNone;
ColorBox1.Width:= FrmxPrincipal.Width / 2;
ColorBox1.Align:= TAlignLayout.alRight;
End;
End;
end;
Listagem 2 – OnResize.
Após definir as orientações os itens ficarão alinhados conforme imagem abaixo:
Imagem 8 – Alinhamento.
Observação: É necessário realizar o teste em Tablets, pois, a definição da orientação pode alternar.
Agora que concluímos nossa tela inicial, há mais um recurso interessante para melhorar a aparência de seu projeto, o chamando ‘Splash’, que consiste em uma imagem de apresentação de sua aplicação. Para adicionar este recurso vamos primeiramente criar uma pasta na raiz do projeto e nomeá-la de ‘res’. Insira nesta pasta os seguintes diretórios:
drawable;
drawable-hdpi;
drawable-ldpi;
drawable-mdpi;
drawable-xhdpi;
drawable-xxhdpi;
values.
 --> 
Imagem 9 – Pastas.
Nestas pastas vamos encontrar as imagens que serão exibidas ao abrir nossa aplicação, portanto, acaba sendo necessário definir a mesma imagem em tamanhos diferentes para que alterne de acordo com o tamanho da tela. Segue abaixo as dimensões das imagens.
drawable-hdpi – splash.png (164x252);
drawable-ldpi – splash.png (80x123);
drawable-mdpi – splash.png (107x164);
drawable-xhdpi – splash.png (213x327);
drawable-xxhdpi – splash.png (320x492).
Vamos encontrar também dois arquivos XML nas pastas restantes (drawable e values), cada xml irá conter as instruções para o funcionamento correto do Splash. Portanto em nossa primeira pasta adicione o seguinte XML:
Pasta (drawable):
‘xml_splash.xml’
Sua codificação será:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<solid
android:color="#000000"
/>
</shape>
</item>
<item>
<bitmap
android:src="@drawable/splash"
android:gravity="center"
/>
</item>
</layer-list>
Listagem 3 – xml_Splash.
Este arquivo cria a interface propriamente dita, ou seja, aqui poderá definir a forma de exibição de sua imagem.
Em nosso outro XML (styles.xml) que encontra-se na pasta ‘values’ vamos definir através dele qual o tema que iremos utilizar além de definir também quais itens serão exibidos ao iniciar a tela, o que no caso é onde entra nossa imagem ‘splash’. Abaixo codificação do arquivo:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme.NoTitleBar.THECLUB" parent="@android:Theme.Black">
<item name="android:windowBackground">@drawable/xml_splash</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
Listagem 4 – styles.xml.
Para finalizar será necessário alterar a seguinte linha em seu arquivo ‘AndroidManifest.template.xml’ que encontra-se na raiz de seu projeto:
android:theme="%theme%">
Altere para:
android:theme="@style/MyTheme.NoTitleBar.THECLUB">
Feito isto basta definir em seu Deployment todos os arquivos que criamos anteriormente, veja como deve ficar conforme imagem abaixo:
Imagem 10 – Deployment.
Conclusão
Neste artigo demonstramos algumas formas de melhorar a aparência de seus projetos, fiquem à vontade para alterar e melhorar de acordo com suas necessidades.
Espero que tenham gostado e até a próxima!
|
