Xamarin Forms -  App Dividir a Conta

 Hoje vou apresentar uma aplicação Xamarin Forms bem simples cujo objetivo é realizar o rateio de valores entre um determinado número de participantes que faz parte do meu Curso de Xamarin Forms.

Uma das melhores maneiras de aprender os recursos de uma linguagem ou tecnologia é criar uma aplicação funcional do zero.

É isso que vou apresentar neste artigo: uma aplicação para ratear o valor de uma conta entre os participantes.

A aplicação vai tratar com os valores da conta e gorjeta, e, com o número de participantes, para calcular o valor que caberá a cada participante no rateio do valor total.

Será uma aplicação bem simples, voltada para inicantes, que você encontra no meu curso de Xamarin Forms.

Para realizar essa tarefa eu vou utilizar os seguintes recursos:

Criando um protótipo da app

Antes de iniciar qualquer projeto devemos realizar o levantamento de requisitos para definir qual o objetivo do produto de software que vamos criar e quais suas funcionalidades principais.

Embora não exista um modelo padrão consagrado para gerenciar requisitos podemos definir alguns passos para um processo de especificação de requisitos :

  1. Descoberta dos requisitos - consultas , documentos, pesquisas, entrevistas;
  2. Análise dos requisitos identificados com refinamento e detalhamento dos mesmos;
  3. Modelagem e Validação dos requisitos verificando sua consistência (Documento de requisitos);
  4. Acompanhamento dos requisitos;

Ao final deste processo deve-se ter um documento de requisitos bem definido e entendido por todos os intervenientes do processo: clientes, desenvolvedores, líderes, analistas, gerentes, patrocinadores, etc.

Sabemos que a única constante no desenvolvimento de software é a mudança. Então, antes de sair programando, é uma boa prática criar um protótipo da aplicação com os requisitos obtidos até o momento, pois o protótipo é a forma mais rápida e econômica de se definir e experimentar um projeto e é mais barato e simples alterar um produto na sua fase inicial.

Para criar um protótipo eu vou usar uma ferramenta chamada FluidUI que não é gratuíta mas que pode ser testada por 30 dias. Assim teremos uma visão da nossa app concebida na fase inicial e durante a concepção do sistema.

Se você se interessar pela ferramenta pode consultar os recursos e documentação neste link : https://www.fluidui.com/

Basta criar uma conta de avaliação e você já poder criar seu protótipo. Abaixo temos uma visão da nossa app Rachar Conta onde eu apenas definir duas visões da única página que a aplicação vai possuir :

  1. Na primeira imagem temos a página inicial onde deverá ser informada se o valor da gorjeta vai ou não ser incluida na conta, o valor da conta e o número de participantes
  2. Na segunda imagem temos o resultado sendo exibido ao se clicar no botão Calcular. Note que podemos realizar o arredondamento para mais ou para menos do valor do rateio.

Você pode criar links entre as páginas e criar um protótipo mais avançado. Eu vou me ater apenas a visão da página da app que é bem simples para ter uma idéia dos controles que iremos usar no projeto.

Na terceira imagem vemos a aplicação em funcionamento exibindo um resultado de uma operação.

Criando o projeto Xamarin Forms no VS 2017 Community

Abra o VS 2017 Community (estou usando a versão 15.4.2) e crie um projeto Xamarin Forms selecionando a opção Visual C# -> Cross-Platform;

Selecionando o template Cross Platform App (Xamarin), informando o nome XF_DividirAConta e clicando em OK;

A seguir marque Xamarin Forms e Portable Class Library (PCL) e clique em OK;

Definindo a interface da Aplicação

Eu sempre procuro definir a interface da aplicação usando o código XAML de forma a separar a lógica da interface do código C# relacionados a eventos ou cálculos.

A aplicação usa duas páginas :

Abaixo vemos o leiaute da página principal MainPage.xaml :

1- Arquivo App.Xaml
Usando o recurso ResourceDictionary
2- Arquivo MainPage.xaml
Usando Estilos com StaticResource para deixar o código mais limpo;
Usando Frames para ajustar o layout da página;
Usando Behaviors e Triggers para limpar a propriedade 
Text das views Entry que recebem o valor da conta e da gorjeta;
Definindo eventos que serão tratados no arquivo code-behind 
MainPage.xaml.cs;

 

A seguir as views usadas na página:

Views usadas:
Frame - título
Label – Incluir Gorjeta
Switch – oculta/exibe Label Gorjeta
Label – Dividir por
Stepper – incrementa/decrementa
Label - Conta 
Entry/Behavior – Limpa o valor ao receber Foco
Label- Gorjeta
Entry/Triggers – Limpa o valor ao receber Foco
Buttons:
Arredonda(+)
Arredonda(-)
Limpar

 

Espiando o código acima você vai perceber que eu estou :

Entendendo o código XAML usado

Então vamos entender passo a passo cada trecho de código XAML usado:

1- Título

         <!--titulo -->
        <Frame BackgroundColor="#ff5252" Padding="5" Opacity="2">
            <StackLayout Orientation="Horizontal">
                <Label Text="Vamos Rachar a conta ?"
                       HorizontalOptions="CenterAndExpand"
                       FontSize="Large"
                       TextColor="White"
                       FontAttributes="Bold"/>
            </StackLayout>
        </Frame>

 
Neste código usamos a view Frame definindo uma cor de fundo , um valor de opacidade e um preenchimento (padding) igual a 5.

Na view Label definimos o texto , cor, tamanho e atributos.

2- Incluir Gorjeta

  <!--incluir gorjeta : switch -->
  <Frame Padding="5">
     <StackLayout Orientation="Horizontal">
        <Label Text="Incluir Gorjeta" Style="{StaticResource labelTexto}" />
        <Switch x:Name="Gorjeta" HorizontalOptions="CenterAndExpand" Toggled="Gorjeta_Toggled" IsToggled="False"/>
      </StackLayout>
  </Frame>

 
Nesta view Frame definimos um StackLayout com orientação Horizontal contendo a view Label com o texto onde estamos aplicando um estilo definido no arquivo App.xaml e a view Switch que vai permitir ao usuário selecionar se deseja incluir ou não o valor da gorjeta.

No evento da view Switch (Gorjeta_Toogled) vamos exibir ou ocultar o Frame(IsVisible) que permite incluir o valor da gorjeta.

3- Incluir número de participantes no rateio do valor da conta

    <!--incluir no. participantes do rateio : stepper -->
     <Frame Padding="5">
        <StackLayout Orientation="Horizontal">
           <StackLayout Orientation="Horizontal">
              <Label Text="Dividir Por:" Style="{StaticResource labelTexto}" />
              <Label x:Name="lblRateio" Text="2" Style="{StaticResource labelTexto}" />
           </StackLayout>
                <Stepper x:Name="Rateio" HorizontalOptions="CenterAndExpand"
                         Value="2" Minimum="2" Increment="1"
                         ValueChanged="Rateio_ValueChanged"/>
        </StackLayout>
    </Frame>

 
Aqui temos uma view Frame contendo dois StackLayout aninhados com orientação horizontal; Em um temos duas Labels exibindo o texto e o número de participantes do rateio onde aplicamos o mesmo estilo.

No outro temos a view Stepper que vai permitir o usuário aumentar e diminuir o número de participantes no rateio. Sendo que o valor mínimo é igual a 2 e que o incremento é igual a 1.

Definimos o evento ValueChanged nesta view para exibir o número na Label lblRateio.

4- Título

    <!--incluir valor da conta : entry com behavior -->
    <Frame Padding="5">
      <StackLayout Orientation="Horizontal">
          <Label Text="Conta   :" HorizontalOptions="Start" FontSize="Large"/>
         <Entry x:Name="ValorConta"  Placeholder="0,00"  Style="{StaticResource entryValor}">
             <Entry.Behaviors>
                  <behaviors:EntryClearOnFocusBehavior />
             </Entry.Behaviors>
         </Entry>
      </StackLayout>
   </Frame>

 
Nesta view Frame temos a view Label com o texto Conta e a view Entry que vai receber a entrada do usuário para o valor da conta. Estamos aplicando um estilo nesta Label e também definimos um Behavior definido na classe EntryClearOnFocusBehavior para limpar o valor da propriedade Text do controle quando receber o foco.

Para poder aplicar esse recurso temos que definir no ContentPage o código :  xmlns:behaviors="clr-namespace:XF_DividirAConta.Behaviors"

5- Incluir o valor da Gorjeta

       <!--incluir valor da gorjeta : entry com triggers -->
        <Frame x:Name="frameGorjeta" IsVisible="False" Padding="5">
           <StackLayout Orientation="Horizontal">
                <Label Text="Gorjeta :" HorizontalOptions="Start" FontSize="Large"/>
                <Entry x:Name="ValorGorjeta" Placeholder="0,00" Style="{StaticResource entryValor}">
                    <Entry.Triggers>
                        <Trigger TargetType="Entry" Property="IsFocused" Value="True">
                            <Setter Property="Text" Value="" />
                        </Trigger>
                    </Entry.Triggers>
                </Entry>
          </StackLayout>
        </Frame>

 
Neste Frame usamos uma Label para exibir o texto Gorjeta e uma view Entry para receber o valor da gorjeta onde aplicamos um estilo e usamos o recurso Triggers para limpar a propriedade Text da view quando ela receber o foco(IsFocused).

Este Frame inicialmente estará oculto e será exibido conforme a seleção do usuário capturada pela view Switch no evento Gorjeta_Toogled. Neste evento calculamos o valor padrão para a gorjeta considerando 10% e atribuimos o valor.

6- Botão Calcular

            <!--Calcular o rateio : button -->
        <Button x:Name="btnCalcular" Text="Calcular"
                Style="{StaticResource buttonApp}"
                Clicked="btnCalcular_Clicked"/>      

 
Aqui temos apenas a view Button onde definimos o texto e aplicamos um estilo. No evento btnCalcular_Clicked será realizado o cálcula do valor do rateio.

7- Exibição do valor total da conta, do rateio e dos botões para arredondar o valor para mais e para menos e do botão Limpar:

       <StackLayout x:Name="stackResultado" IsVisible="False" Padding="5">
               <!-- valor do conta : Label -->
               <StackLayout Orientation="Horizontal">
                    <Label Text="Total" Style="{StaticResource labelResultado}"/>
                    <Label x:Name="lblValorTotalConta" Style="{StaticResource labelValores}"/>
               </StackLayout>
               <!-- valor do rateio : Label  -->
               <StackLayout Orientation="Horizontal">
                   <Label Text="Rateio" Style="{StaticResource labelResultado}" />
                   <Label x:Name="lblValorRateio" Style="{StaticResource labelValores}" />
               </StackLayout>
               <!-- botões para arrendondar o rateio :  buttons -->
              <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
                <Button x:Name="btnArredondarMais" Text="Arredonda (+)" Style="{StaticResource buttonApp}"
                        Clicked="btnArredondarMais_Clicked"/>
                <Button x:Name="btnArredondarMenos" Text="Arredonda (-)" Style="{StaticResource buttonApp}"
                        Clicked="btnArredondarMenos_Clicked"/>
                </StackLayout>
                <!-- Limpar os valores:  button  -->
               <Button x:Name="btnLimpar" Text="Limpar" Style="{StaticResource buttonApp}"
                        Clicked="btnLimpar_Clicked"/>
        </StackLayout>
Temos um StackLayout principal que inicialmente tem sua propriedade IsVisible igual a False e que somente será exibido ao se clicar no botão Calcular.

No segundo StackLayout exibimos o valor Total da conta e no terceiro StackLayout exibimos o valor total do rateio para cada participante.

No terceiro StackLayout com orientação  horizontal temos duas views Button definindo os botões para arrendondar o valor da conta. Em cada Button definimos um evento e aplicamos um estilo.

No final temos um Button para Limpar os valores e reiniciar o cálculo. Isso é feito no evento definido para este Button.

Os Resources permitem compartilhar definições comuns em todo um aplicativo para ajudá-lo a reduzir valores codificados em seu código, facilitando assim a manutenção do código.

Geralmente definimos Resources agrupados e armazenados em um ResourceDictionary, que é um repositório para recursos que são usados pela aplicação Xamarin.Forms.

Os recursos típicos armazenados em um ResourceDictionary incluem : estilos, templates de controles, data templates, cores, e conversores.

Um ResourceDictionary utiliza um par de chaves key-value para armazenar as informações, assim no código XAML você terá que fornecer a palavra-chave x:Key para cada recurso definido

No arquivo MainPage.xaml.cs foram definidos o código relacionados ás Views usadas que dão vida à aplicação usando a linguagem C# :

A seguir a aplicação em execução:

Você encontra a vídeo aula que explica como criar essa aplicação, a documentação detalhada e o código fonte com o projeto completa você encontra no meu curso de Xamarin Forms.

Referências:

José Carlos Macoratti