Resumo do Capítulo 21. Transformações
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 completos.
Um Xamarin.Forms modo de exibição aparece na tela em um local e tamanho determinados por seu pai, que geralmente é um Layout derivado OR Layout<View> . A transformação é um Xamarin.Forms recurso que pode modificar esse local, tamanho ou até mesmo orientação.
Xamarin.Forms suporta 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 — gire um elemento em torno de um ponto ou eixo
Na Xamarin.Forms, a escala é isotrópica, afeta a largura e a altura uniformemente. A rotação é suportada tanto na superfície bidimensional da tela quanto no espaço 3D. Não há transformação distorcida (ou pura) e não há transformação de matriz generalizada.
As transformações são suportadas com oito propriedades do tipo double definidas pela VisualElement classe:
Todas essas propriedades são apoiadas por propriedades vinculáveis. Eles podem ser alvos de vinculaçã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 da 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 Framearquivo . A transformação também afeta todas as crianças daquela 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 Button usuário recebe entrada no local onde o botão é renderizado.
O exemplo ButtonGlide é semelhante, mas usa um temporizador para animar o Button de um ponto a 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 de 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á-lo o maior possível enquanto ainda cabe na página.
Ancoragem da balança
Os elementos dimensionados nas três amostras anteriores aumentaram ou diminuíram de tamanho em relação ao centro do elemento. Em outras palavras, o elemento aumenta ou diminui de tamanho da mesma forma 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 e AnchorY propriedades não padrão geralmente é incompatível com as alterações de orientação do AnchorX telefone.
A transformada de rotação
A Rotation propriedade é especificada em graus e indica a 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 minúsculos elementos rotacionados BoxView .
O exemplo RotatedText exibe vários Label elementos com a mesma cadeia de caracteres de texto girada para aparecer como raios.
O exemplo CircularText exibe uma cadeia de caracteres de texto que parece ser quebrada em um círculo.
Um relógio analógico
A Xamarin.Formsbiblioteca Book.Toolkit contém uma AnalogClockViewModel classe que calcula ângulos para os ponteiros de um relógio. Para evitar dependências de plataforma no ViewModel, a classe usa Task.Delay em vez de um temporizador para encontrar um novo DateTime valor.
Também incluído no Xamarin.FormsBook.Toolkit é uma SecondTickConverter classe que implementa e serve para arredondar IValueConverter um segundo ângulo para o segundo mais próximo.
O MinimalBoxViewClock usa três elementos giratórios BoxView para desenhar um relógio analógico.
O BoxViewClock usa BoxView para gráficos mais extensos, incluindo marcas de escala ao redor da face do relógio e ponteiros que giram um pouco longe de suas extremidades:
Além disso, uma SecondBackEaseConverter classe no Xamarin.FormsBook.Toolkit faz com que a segunda mão pareça recuar um pouco antes de pular para a frente e, em seguida, voltar à 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 em torno do eixo Y para fazer com que os lados esquerdo e direito do elemento pareçam se mover para ou para longe do espectador.
A AnchorX propriedade afeta, RotationY mas não RotationX. A AnchorY propriedade afeta, RotationX mas não RotationY. Você pode experimentar com o exemplo ThreeDeeRotationDemo para explorar as interações dessas propriedades.
O sistema de coordenadas 3D implicado por Xamarin.Forms é canhoto. Se você apontar o indicador da mão esquerda na direção de coordenadas X crescentes (para a direita) e o dedo médio na direção de coordenadas Y crescentes (para baixo), então seu polegar aponta na direção de coordenadas Z crescentes (para 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 indica a direção de rotação para ângulos de rotação positivos.