Resumo do Capítulo 21. Transformações
Baixar o exemploObservaçã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.
Uma Xamarin.Forms exibição aparece na tela em um local e tamanho determinados por seu pai, que geralmente é um Layout derivado ou Layout<View> . A transformação é um Xamarin.Forms recurso que pode modificar esse local, tamanho ou até mesmo orientação.
Xamarin.Forms dá suporte a três tipos básicos de transformações:
- Tradução – deslocar um elemento horizontal ou verticalmente
- Escala – alterar o tamanho de um elemento
- Rotação – girar um elemento em torno de um ponto ou eixo
No Xamarin.Forms, o dimensionamento é isotrópico; afeta a largura e a altura uniformemente. Há suporte para rotação na superfície bidimensional da tela e no espaço 3D. Não há transformação de distorção (ou pura) e nenhuma transformação de matriz generalizada.
Há suporte para transformações com oito propriedades do tipo double definidas pela VisualElement classe :
Todas essas propriedades são apoiadas por propriedades associáveis. Eles podem ser alvos de associação de dados e estilizados. Capítulo 22. A animação demonstra como essas propriedades podem ser animadas, mas alguns exemplos neste capítulo mostram como você pode animá-las usando o Xamarin.Formstemporizador.
As propriedades de transformação afetam apenas como o elemento é renderizado e não afetam como o elemento é percebido no layout.
A transformação de tradução
Valores diferentes de zero das TranslationX propriedades e TranslationY deslocam um elemento horizontal ou verticalmente.
O programa TranslationDemo permite que você experimente essas propriedades com dois Slider elementos que controlam as TranslationX propriedades e TranslationY de um Frame. A transformação também afeta todos os filhos desse Frame.
Efeitos de texto
Um uso comum das propriedades de tradução é compensar ligeiramente a renderização do texto. Isso é demonstrado no exemplo TextOffsets :
Outro efeito é renderizar várias cópias de um Label para se assemelhar a um bloco 3D, como demonstrado no exemplo BlockText .
Saltos e animações
O exemplo ButtonJump usa a tradução para mover um Button sempre que ele é tocado, mas a intenção principal é demonstrar que o recebe a entrada do Button usuário no local em que o botão é renderizado.
O exemplo ButtonGlide é semelhante, mas usa um temporizador para animar o Button de um ponto para outro.
A transformação de escala
A Scale transformação pode aumentar ou diminuir o tamanho renderizado do elemento. O valor padrão é 1. Um valor 0 faz com que o elemento seja invisível. Valores negativos fazem com que o elemento pareça ser girado 180 graus. A Scale propriedade não afeta as Width propriedades ou Height do elemento . Esses valores permanecem os mesmos.
Você pode experimentar a Scale propriedade usando o exemplo SimpleScaleDemo .
O exemplo ButtonScaler demonstra a diferença entre animar a Scale propriedade de um Button e animar a FontSize propriedade. A FontSize propriedade afeta como o Button é percebido no layout; a Scale propriedade não.
O exemplo ScaleToSize calcula uma Scale propriedade que é aplicada a um Label elemento para torná-la o maior possível enquanto ainda se ajusta dentro da página.
Ancorando a escala
Os elementos dimensionados nos três exemplos anteriores aumentaram ou diminuíram de tamanho em relação ao centro do elemento. Em outras palavras, o elemento aumenta ou diminui de tamanho o mesmo em todas as direções. Somente o ponto no centro do elemento permanece no mesmo local durante o dimensionamento.
Você pode alterar o centro do dimensionamento definindo as AnchorX propriedades e AnchorY . Essas propriedades são relativas ao próprio elemento. Para AnchorX, um valor de 0 refere-se ao lado esquerdo do elemento e 1 refere-se ao lado direito. Da mesma forma para AnchorY, 0 é a parte superior e 1 é a parte inferior. Ambas as propriedades têm valores padrão de 0,5, que é o centro.
O exemplo AnchoredScaleDemo permite que você experimente as AnchorX propriedades e, AnchorY bem como a Scale propriedade .
No iOS, o uso de valores não padrão de e AnchorY propriedades AnchorX geralmente é incompatível com as alterações de orientação do telefone.
A transformação de rotação
A Rotation propriedade é especificada em graus e indica rotação no sentido horário em torno de um ponto do elemento definido por AnchorX e AnchorY. O PlaneRotationDemo permite que você experimente essas três propriedades.
Efeitos de texto girados
A amostra BoxViewCircle demonstra a matemática necessária para desenhar um círculo usando 64 pequenos elementos girados BoxView .
O exemplo RotatedText exibe vários Label elementos com a mesma cadeia de caracteres de texto girada para aparecer como spokes.
O exemplo CircularText exibe uma cadeia de caracteres de texto que parece encapsular em um círculo.
Um relógio analógico
A Xamarin.Formsbiblioteca Book.Toolkit contém uma AnalogClockViewModel classe que calcula ângulos para as mãos de um relógio. Para evitar dependências de plataforma no ViewModel, a classe usa Task.Delay em vez de um temporizador para localizar um novo DateTime valor.
Também incluída no Xamarin.FormsBook.Toolkit é uma SecondTickConverter classe que implementa IValueConverter e serve para arredondar um segundo ângulo para o segundo mais próximo.
O MinimalBoxViewClock usa três elementos rotativos BoxView para desenhar um relógio analógico.
O BoxViewClock usa para elementos gráficos BoxView mais extensos, incluindo marcas de tique ao redor da face do relógio e mãos que giram um pouco de distância de suas extremidades:
relógio analógico da face do relógio BoxView
Além disso, uma SecondBackEaseConverter classe no Book.Toolkit faz com que a segunda mão pareça recuar um pouco antes de saltar para frente e, em Xamarin.Forms seguida, voltar para sua posição correta.
Controles deslizantes verticais?
O exemplo VerticalSliders demonstra que Slider os elementos podem ser girados 90 graus e ainda funcionar. No entanto, é difícil posicionar esses elementos girados Slider porque, no layout, eles ainda parecem ser horizontais.
Rotações 3D-ish
A RotationX propriedade parece girar um elemento em torno de um eixo X 3D para que a parte superior e inferior do elemento pareçam se mover para ou para longe do visualizador. Da mesma forma, o RotationY parece girar um elemento ao redor do eixo Y para fazer com que os lados esquerdo e direito do elemento pareçam se mover para ou para longe do visualizador.
A AnchorX propriedade afeta RotationY , mas não RotationX. A AnchorY propriedade afeta RotationX , mas não RotationY. Você pode experimentar o exemplo ThreeDeeRotationDemo para explorar as interações dessas propriedades.
O sistema de coordenadas 3D implícito por Xamarin.Forms é canhoto. Se você apontar o indicador da mão esquerda na direção de aumentar as coordenadas X (para a direita) e o dedo médio na direção de aumentar as coordenadas Y (para baixo), o polegar apontará na direção do aumento das coordenadas Z (fora da tela).
Além disso, para qualquer um dos três eixos, se você apontar o polegar esquerdo na direção de valores crescentes, a curva dos dedos indicará a direção da rotação para ângulos de rotação positivos.