Resumo do Capítulo 5. Lidar com tamanhos

Baixar exemplo Baixar o exemplo

Observação

Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou concluídos.

Vários tamanhos em Xamarin.Forms foram encontrados até agora:

  • A altura da barra de status do iOS é 20
  • O BoxView tem uma largura e altura padrão de 40
  • O padrão Padding em um Frame é 20
  • O padrão Spacing no StackLayout é 6
  • O Device.GetNamedSize método retorna um tamanho de fonte numérico

Esses tamanhos não são pixels. Em vez disso, são unidades independentes de dispositivo reconhecidas independentemente por cada plataforma.

Pixels, pontos, dps, DIPs e DIUs

No início das histórias do Apple Mac e do Microsoft Windows, os programadores trabalhavam em unidades de pixels. No entanto, o advento de telas de resolução mais alta exigia uma abordagem mais virtualizada e abstrata para as coordenadas da tela. No mundo Mac, os programadores trabalhavam em unidades de pontos, tradicionalmente de 1/72 polegadas, enquanto os desenvolvedores do Windows usavam DIUs (unidades independentes de dispositivo ) com base em 1/96 polegadas.

Os dispositivos móveis, no entanto, geralmente são mantidos muito mais próximos do rosto e têm uma resolução maior do que as telas da área de trabalho, o que implica que uma densidade de pixel maior pode ser tolerada.

Programadores direcionados a dispositivos Apple iPhone e iPad continuam funcionando em unidades de pontos, mas há 160 desses pontos até a polegada. Dependendo do dispositivo, pode haver 1, 2 ou 3 pixels até o ponto.

O Android é semelhante. Os programadores trabalham em unidades de pixels independentes de densidade (dps) e a relação entre dps e pixels é baseada em 160 dps para a polegada.

Telefones Windows e dispositivos móveis também estabeleceram fatores de dimensionamento que implicam algo próximo de 160 unidades independentes de dispositivo à polegada.

Observação

Xamarin.Forms não dá mais suporte a qualquer telefone ou dispositivo móvel baseado em Windows.

Em resumo, um Xamarin.Forms programador direcionado a telefones e tablets pode assumir que todas as unidades de medida são baseadas no seguinte critério:

  • 160 unidades para a polegada, equivalente a
  • 64 unidades para o centímetro

As propriedades somente Width leitura e Height definidas por VisualElement têm valores padrão de "simulação" de –1. Somente quando um elemento tiver sido dimensionado e acomodado no layout essas propriedades refletirão o tamanho real do elemento em unidades independentes do dispositivo. Esse tamanho inclui qualquer Padding conjunto no elemento, mas não o Margin.

Um elemento visual aciona o SizeChanged evento quando ele Width ou Height é alterado. O exemplo do WhatSize usa esse evento para exibir o tamanho da tela do programa.

Tamanhos métricas

O MetricalBoxView usa WidthRequest e HeightRequest para exibir uma BoxView polegada de altura e um centímetro de largura.

Tamanhos de fonte estimados

O exemplo FontSizes mostra como usar a regra de 160 unidades para a polegada para especificar tamanhos de fonte em unidades de pontos. A consistência visual entre as plataformas que usam essa técnica é melhor que Device.GetNamedSize.

Ajustar o texto ao tamanho disponível

É possível ajustar um bloco de texto em um retângulo específico calculando um FontSize dos Label usando os seguintes critérios:

  • O espaçamento de linhas é 120% do tamanho da fonte (130% nas plataformas Windows).
  • A largura média do caractere é de 50% do tamanho da fonte.

O exemplo EstimatedFontSize demonstra essa técnica. Este programa foi gravado antes da Margin propriedade estar disponível, portanto, ele usa um ContentView com uma Padding configuração para simular uma margem.

Triple screenshot of estimated font size

Um relógio de ajuste ao tamanho

O exemplo FitToSizeClock demonstra o uso Device.StartTimer de para iniciar um temporizador que notifica periodicamente o aplicativo quando é hora de atualizar o relógio. O tamanho da fonte é definido como um sexto da largura da página para tornar a exibição o maior possível.

Problemas de acessibilidade

O programa EstimatedFontSize e o programa FitToSizeClock contêm uma falha sutil: se o usuário alterar as configurações de acessibilidade do telefone no Android ou Windows 10 Mobile, o programa não poderá mais estimar o tamanho do texto renderizado com base no tamanho da fonte. O exemplo AccessibilityTest demonstra esse problema.

Ajustar texto empiricamente

Outra maneira de ajustar o texto a um retângulo é calcular empiricamente o tamanho do texto renderizado e ajustá-lo para cima ou para baixo. O programa no livro chama GetSizeRequest um elemento visual para obter o tamanho desejado do elemento. Esse método foi preterido e os programas devem, em vez disso, chamar Measure.

Para um Label, o primeiro argumento deve ser a largura do contêiner (para permitir o encapsulamento), enquanto o segundo argumento deve ser definido como Double.PositiveInfinity para tornar a altura irrestrita. O exemplo EmpiricalFontSize demonstra essa técnica.