Сводная информация о главе 21. Преобразования
Скачайте примерПримечание.
Эта книга была опубликована весной 2016 года и с тех пор не обновлялась. Многое в этой книге остается ценным, но некоторые материалы устарели, а некоторые разделы перестали быть полностью верными или полными.
Представление Xamarin.Forms появляется на экране в том месте и с тем размером, которые определяются его родительским элементом, обычно производном от Layout или Layout<View>. Возможность преобразования в Xamarin.Forms позволяет изменить расположение, размер и даже ориентацию элемента.
Xamarin.Forms поддерживает три основных типа преобразований:
- Перевод — сдвиг элемента по горизонтали или по вертикали
- Масштабирование — изменение размера элемента
- Поворот — поворот элемента вокруг точки или оси
В Xamarin.Forms масштабирование выполняется изотропно, то есть в равной мере применяется к высоте и ширине. Поддерживается вращение как в пределах двумерной плоскости экрана, так и в трехмерном пространстве. Преобразование со сдвигом (искажением) не поддерживается, также не предлагается обобщенного матричного преобразования.
Преобразования поддерживаются для восьми свойств типа double, которые определены классом VisualElement:
Все эти свойства подкреплены привязываемыми свойствами. Их можно использовать для привязки данных и применения стилей. Глава 22. Анимация демонстрирует, как эти свойства могут быть анимированы, но некоторые примеры в этой главе показывают, как можно анимировать их с помощью таймераXamarin.Forms.
Свойства преобразования влияют только на отображение элемента, но не влияют на размещение элемента в макете.
Преобразование переносом
Отличные от нуля значения свойств TranslationX и TranslationY приводят к сдвигу объекта по горизонтали или по вертикали.
Программа TranslationDemo дает возможность поэкспериментировать с этими свойствами на примере двух элементов Slider, которые управляют свойствами TranslationX и TranslationY объекта Frame. Преобразование также затрагивает все дочерние элементы этого Frame.
Эффекты текста
Одно из самых распространенных применений для преобразования сдвигом — небольшое смещение отображаемого текста. Это показано в примере TextOffsets.
Еще один полезный эффект — создание нескольких копий Label для получения трехмерного блока, как показано в примере BlockText.
Прыжки и анимации
Пример ButtonJump использует сдвиг для переноса Button в ту точку, на которую нажимает пользователь, но основное его назначение — продемонстрировать получение в Button пользовательского ввода в том месте, где отображается кнопка.
Пример ButtonGlide работает почти так же, но с таймером для анимации перемещения Button в другую точку.
Преобразование масштабированием
Преобразование Scale может увеличивать или уменьшать отображаемый размер элемента. Значение по умолчанию равно 1. Значение 0 приводит к тому, что элемент становится невидимым. При отрицательных значениях элемент отображается развернутым на 180 градусов. Свойство Scale не влияет на свойства Width и (или) Height элемента. Эти значения остаются неизменными.
Вы можете поэкспериментировать со свойством Scale в примере SimpleScaleDemo.
Пример ButtonScaler демонстрирует различия между анимированием свойства Scale в Button и анимированием свойства FontSize. Свойство FontSize влияет на то, как Button воспринимается в макете, а Scale — нет.
Пример ScaleToSize вычисляет свойство Scale, которое применяется к элементу Label для максимально возможного увеличения его размера без выхода за пределы страницы.
Привязка масштаба
Элемент, к которому мы применяли масштабирование в трех предыдущих примера, всегда увеличивался или уменьшался относительно центра этого элемента. Другими словами, он увеличивал и уменьшал размер равномерно во всех направлениях. Центральная точка элемента является единственной, которая сохраняет свое положение при масштабировании.
Вы можете изменить центр масштабирования присвоив значения свойствам AnchorX и AnchorY. Эти свойства определяются относительно самого элемента. Например, значение 0 для параметра AnchorX означает левый край соответствующего элемента, а значение 1 — его правый край. Аналогично для AnchorY, 0 обозначает верхний край, а 1— нижний. Оба этих свойства имеют значение по умолчанию 0,5, что и обозначает центр элемента.
Пример AnchoredScaleDemo позволяет поэкспериментировать со свойствами AnchorX и AnchorY, а также со свойством Scale.
В iOS использование значений, отличных от значения по умолчанию, для свойств AnchorX и AnchorY обычно несовместимо с изменениями ориентации экрана.
Преобразование поворотом
Свойство Rotation указывается в градусах и обозначает поворот по часовой стрелке вокруг той точки элемента, которая определена значениями AnchorX и AnchorY. Пример PlaneRotationDemo позволяет поэкспериментировать с этими тремя свойствами.
Эффекты текста с поворотом
Пример BoxViewCircle демонстрирует математическую основу, которая позволяет нарисовать круг из 64 элементов BoxView с поворотами на небольшие смещения.
Пример RotatedText демонстрирует несколько элементов Label с одинаковой строкой текста, повернутых для создания эффекта "лучей".
Пример CircularText демонстрирует строку текста, которая заворачивается по кругу.
Аналоговые часы
Библиотека Xamarin.FormsBook.Toolkit содержит класс AnalogClockViewModel, который вычисляет углы для положения стрелок часов. Чтобы избежать зависимостей от платформы в ViewModel, этот класс использует Task.Delay вместо таймера для получения нового значения DateTime.
Также включен в Xamarin.FormsBook.набор средств — SecondTickConverter это класс, реализующий IValueConverter и обслуживающий округление второго угла до ближайшей секунды.
Пример MinimalBoxViewClock использует три элемента BoxView и преобразование вращением для отрисовки аналоговых часов.
BoxViewClock использует BoxView для более сложной графики, включая отметки на циферблате и вращение стрелок вокруг точки, немного отстоящей от их конца.
Кроме того, класс SecondBackEaseConverter из Xamarin.FormsBook.Toolkit отображает секундную стрелку так, что она немного сдвигается назад перед прыжком вперед, а затем опять смещается назад в нужное положение.
Вертикальные ползунки?
Пример VerticalSliders демонстрирует, что элементы Slider будут нормально функционировать, если их повернуть на 90 градусов. Но вам будет сложно правильно разместить такие элементы Slider, поскольку в макете они всегда остаются горизонтальными.
Вращения в трехмерном пространстве
Свойство RotationX действует так, как если бы элемент вращался в трехмерном пространстве вокруг своей горизонтальной оси, то есть верхняя и нижняя части элемента приближаются к зрителю или удаляются от него. Аналогичным образом, свойство RotationY вращает элемент в трехмерном пространстве вокруг его вертикальной оси, то есть левая и правая части элемента приближаются к зрителю или удаляются от него.
Свойство AnchorX влияет на RotationY, но не на RotationX. Свойство AnchorY влияет на RotationX, но не на RotationY. Вы можете поэкспериментировать с примером ThreeDeeRotationDemo, чтобы изучить взаимодействие этих трех свойств.
Трехмерная координатная система в Xamarin.Forms является левосторонней. Если направить указательный палец левой руки в направлении увеличения координат X (вправо по экрану), а средний — в направлении увеличения координат Y (вниз), то большой палец будет направлен в сторону увеличения координат Z (из экрана к наблюдателю).
Кроме того, для всех трех осей действует такое правило: если вы направите большой палец в сторону увеличения координат, изгиб остальных пальцев демонстрирует направление вращения на положительный угол.