Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xamarin - Aula 4 - AppCalculadora - Layout em Grid

12 views

Published on

Nesta aula da disciplina de Programação de Aplicativos Mobile I do curso Técnico em Desenvolvimento de Sistemas, na Etec vamos criar uma calculadora usando o layout em grid em xaml

Published in: Software
  • Be the first to comment

  • Be the first to like this

Xamarin - Aula 4 - AppCalculadora - Layout em Grid

  1. 1. APPCALCULADORA – LAYOUT EM GRID Prof. Me. Tiago A. Silva VERSÃO 2019 www.tiago.blog.br PROGRAMAÇÃO DE APLICATIVOS MOBILE I
  2. 2. PLANO DE AULA ▪ Nesta aula vamos aprender: ✓Criar um Layout em Grid com XAML ✓Definição de Linhas e Colunas do Grid ✓Construção do AppCalculadora ✓Executar o App 2www.tiago.blog.br OBJETIVO: EXERCITAR XAML E IMPLEMENTAR LAYOUT EM GRID
  3. 3. PARTE I: CRIAR O LAYOUT EM GRID
  4. 4. USANDO O LAYOUT EM GRID • A ideia de utilizar o layout é Grid em alternativa ao StackLayout é para desenvolver interfaces mais elaboradas. Como o StackLayout visto na aula passada é limitado a um elemento sobre o outro, no Grid poderemos colocar elementos lado-a-lado. • A estrutura de um layout é grid é similar a uma tabela, onde há linhas e colunas. Portanto, os elementos (label, button, entry) ficam dentro de células. • Para definir em qual célula o elemento estará usamos os atributos Grid.Row e Grid.Column. Por exemplo: Grid.Row=0 Grid.Column=0, o elemento estará na primeira linha da primeira coluna. www.tiago.blog.br 4
  5. 5. USANDO O LAYOUT EM GRID 5www.tiago.blog.br Note que adicionei um elemento Grid dentro do ContentPage. O elemento Grid tem 3 atributos: RowSpacing, ColumnSpacing e Padding. RowSpacing, define o espaço entre as linhas do Grid, já o ColumnSpacing define o espaço entre as colunas e o Padding é o espaçamento interno do grid, nas margens.
  6. 6. GRID: DEFINIÇÃO DE LINHAS E COLUNAS 6www.tiago.blog.br As colunas do Grid são determinadas pelo elemento ColumnDefinition. Definimos o Width como “*” para que a largura seja ajustada automaticamente a largura do elemento que esteja dentro da coluna. A definição das linhas RowDefinition segue o mesmo princípio das colunas, a diferença é que vamos ajustar a altura Height como “*”, para calcular a altura automaticamente.
  7. 7. PARTE II: CONSTRUÇÃO DO LAYOUT DA CALCULADORA
  8. 8. ELEMENTOS NO GRID 8www.tiago.blog.br Observe o número das linhas. A definição dos elementos da calculadora: label e button é feita abaixo da definição das linhas e coluna. Veja o label que iremos usar como “visor” da calculadora. Não está faltando adicionar o x:Name=“visor” ? Note que ao criarmos o elemento button nós especificamos qual será a linha e coluna que ele estará, portanto, qual será a célula que ele aparecerá.
  9. 9. PARTE III: PROGRAMAÇÃO DO “CÓDIGO POR TRÁS”
  10. 10. COMO PROGRAMAR A CALCULADORA? • Uma vez que os elementos da interface já foram definidos é a hora de adicionar os comportamentos esperados a eles. • Em nosso App o código por trás está mais do que simples, ele pode e será optimizado nas próximas aulas. Além de ser corrigido, vocês também deverão corrigir os bugs! • Por hora, vamos modificar o XAML para que os botões tenham comportamentos, em respectivos métodos no arquivo MainPage.xaml.cs www.tiago.blog.br 10
  11. 11. MODIFICANDO O XAML 11www.tiago.blog.br Veja que adicionamos o atributo Clicked aos botões, a seguir você verá a programação de cada um desses métodos. Veja o atributo x:Name, para identificarmos os botões no código C#
  12. 12. QUAL É A IDEIA DO FUNCIONAMENTO DA CALCULADORA? 1) Inicialmente a tela deve aparecer zerada para o usuário. 2) Conforme ele digita os números, pelo teclado do próprio App ele poderá adicionar números com vírgula (ponto) que aparecerão no visor. 3) Quando ele clicar no botão de operação (botão +, -, x e div) o número que estiver no visor da calculadora deverá ser armazenado em uma memória de cálculo e o visor limpo novamente. 4) O usuário digita o número para completar a operação e clica no botão igual. O botão igual irá identificar qual é a operação desejada e realizar o cálculo, mostrando o resultado no visor para o usuário. www.tiago.blog.br 12
  13. 13. PROGRAMANDO OS COMPORTAMENTOS EM C# 13www.tiago.blog.br Veja a adição das variáveis de controle da calculadora.
  14. 14. PROGRAMANDO OS COMPORTAMENTOS EM C# 14www.tiago.blog.br Método construtor vazio, apenas o initializeComponent()
  15. 15. PROGRAMANDO OS COMPORTAMENTOS EM C# 15www.tiago.blog.br Note o laço try catch para capturar eventuais erros de cálculo/conversão
  16. 16. PROGRAMANDO OS COMPORTAMENTOS EM C# 16www.tiago.blog.br
  17. 17. PROGRAMANDO OS COMPORTAMENTOS EM C# 17www.tiago.blog.br
  18. 18. PROGRAMANDO OS COMPORTAMENTOS EM C# 18www.tiago.blog.br
  19. 19. PROGRAMANDO OS COMPORTAMENTOS EM C# 19www.tiago.blog.br O método remover_sinais_visor() serve para apagar do visor da calculadora os sinais das operações. Isso é necessário porque quando formos fazer a conversão de tipo daquilo que estiver no visor o C# não irá conseguir converter, por exemplo /30 para 30, ele daria um erro. Veja como foi feita a programação do botão de igual.
  20. 20. PROGRAMANDO OS COMPORTAMENTOS EM C# 20www.tiago.blog.br
  21. 21. PROGRAMANDO OS COMPORTAMENTOS EM C# 21www.tiago.blog.br
  22. 22. PROGRAMANDO OS COMPORTAMENTOS EM C# 22www.tiago.blog.br FIM! VAMOS VER SE TUDO FUNCIONOU! EXECUTE SEU PROJETO NO EMULADOR DO WINDOWS!
  23. 23. RESULTADO FINAL
  24. 24. 24www.tiago.blog.br Resultado final visto no AVD (Android Virtual Device). Note que os botões ficaram alinhados conforme a especificação do Grid Resultado final executando no Windows. Note que a posição dos botões é a mesma e o tamanho entre eles foi calculado automaticamente
  25. 25. OBRIGADO! tiago@tiago.blog.br www.tiago.blog.br
  26. 26. REFERÊNCIAS • https://xamgirl.com/grids-xamarin-forms-made-simple/ • http://www.randrade.net/2017/06/05/organizando-as-telas-do-xamarin-forms-com-grids/ • https://docs.microsoft.com/pt-br/xamarin/xamarin-forms/user-interface/layouts/grid • https://xamarin.azureedge.net/developer/xamarin-forms-book/XamarinFormsBook-Ch17- Apr2016.pdf • https://docs.microsoft.com/pt-br/xamarin/xamarin-forms/user-interface/controls/layouts www.tiago.blog.br 26

×