Сводная информация о Главе 14. Абсолютный макет

  • Статья

Download Sample Скачайте пример

Примечание.

Эта книга была опубликована весной 2016 года и с тех пор не обновлялась. Многое в этой книге остается ценным, но некоторые материалы устарели, а некоторые разделы перестали быть полностью верными или полными.

Как и StackLayout, AbsoluteLayout является производным от Layout<View> и наследует свойство Children. AbsoluteLayout реализует систему макета, в которой программисту нужно указывать позиции дочерних элементов и их размер (необязательно). Эти позиции определяются по координатам левого верхнего угла дочернего элемента относительно левого верхнего угла AbsoluteLayout, выраженным в не зависящих от устройства единицах измерения. AbsoluteLayout также реализует функции пропорционального размещения и изменения размера.

AbsoluteLayout следует рассматривать как специализированную систему макета, которая используется только в том случае, когда программисту важно строго определять размер дочерних элементов (например, элементов BoxView) или когда размер элемента не влияет на расположение других дочерних элементов. Свойства HorizontalOptions и VerticalOptions не влияют на дочерние элементы AbsoluteLayout.

В этой главе также представлена важная концепция присоединенных привязываемых свойств, которые позволяют присоединять свойства, определенные в одном классе (в нашем примере это AbsoluteLayout) к другому классу (дочернему элементу AbsoluteLayout).

Код для AbsoluteLayout

Вы можете добавить дочерний элемент в коллекцию Children элемента AbsoluteLayout с помощью стандартного метода Add, но AbsoluteLayout предоставляет еще и расширенный метод Add, который позволяет указать Rectangle. Еще один метод Add требует только Point, то есть дочерний элемент неограничен и самостоятельно задает свои размеры.

Можно создать Rectangle значение с конструктором, требующим четырех значений — первые два, указывающие положение левого верхнего угла дочернего элемента относительно родительского элемента, а второй — размер дочернего элемента. Также можно использовать конструктор, который принимает Point и значение Size.

Эти методы Add демонстрируются в примере AbsoluteDemo, который позиционирует элементы BoxView с помощью значений Rectangle и элемент Label по одному значению Point.

В примере ChessboardFixed для создания шаблона шахматной доски используются 32 элемента BoxView. Программа присваивает элементам BoxView жестко запрограммированный размер обеих сторон 35 единиц. Для AbsoluteLayout параметрам HorizontalOptions и VerticalOptions присвоено значение LayoutOptions.Center, в результате чего общий размер AbsoluteLayout соответствует квадрату со стороной 280 единиц.

Присоединенные привязываемые свойства

Вы можете также задать позицию и (необязательно) размер дочернего элемента AbsoluteLayout после добавления его в коллекцию Children, используя статический метод AbsoluteLayout.SetLayoutBounds. Первым аргументом он принимает дочерний элемент, а вторым — объект Rectangle. Можно указать, что дочерние размеры сами по горизонтали и (или) по вертикали задают ширину и высоту AbsoluteLayout.AutoSize константы.

Пример ChessboardDynamic размещает AbsoluteLayout в ContentView с обработчиком SizeChanged для вызова AbsoluteLayout.SetLayoutBounds из всех дочерних элементов, чтобы максимально увеличить их размер.

Присоединенное привязываемое свойство, определенное в AbsoluteLayout, является статическим полем только для чтения с типом BindableProperty и именем AbsoluteLayout.LayoutBoundsProperty. Статический метод AbsoluteLayout.SetLayoutBounds реализуется путем вызова SetValue из дочернего элемента с помощью AbsoluteLayout.LayoutBoundsProperty. Этот дочерний элемент содержит словарь, в котором хранятся присоединенное привязываемой свойство и его значение. На этапе создания макета AbsoluteLayout может получить это значение, вызвав AbsoluteLayout.GetLayoutBounds, который реализуется вызовом GetValue.

Пропорциональный размер и размещение

AbsoluteLayout реализует функцию пропорционального размера и размещения. Этот класс определяет второе присоединенное привязываемой свойство LayoutFlagsProperty с соответствующими статическими методами AbsoluteLayout.SetLayoutFlags и AbsoluteLayout.GetLayoutFlags.

Аргумент AbsoluteLayout.SetLayoutFlags и возвращаемое значение AbsoluteLayout.GetLayoutFlags имеют тип AbsoluteLayoutFlags, то есть перечисление со следующими элементами:

Их можно объединять с помощью оператора "побитового ИЛИ" из C#.

При установке этих флагов некоторые свойства структуры связывания макета Rectangle, которые применяются для выбора положения и размера дочернего элемента, рассматриваются как пропорциональные.

Если задан флаг WidthProportional, значение 1 для параметра Width означает, что ширина дочернего элемента совпадает с шириной AbsoluteLayout. Такой же подход используется для высоты.

При пропорциональном размещении учитывается размер элементов. Если задан флаг XProportional, свойство X структуры макета Rectangle вычисляется как пропорциональное. Значение 0 означает, что левый край дочернего элемента размещается по левому краю AbsoluteLayout, но положение 1 означает, что правый край дочернего элемента размещается по правому краю AbsoluteLayout, а не за правым краем AbsoluteLayout, как можно было бы ожидать. Значение 0,5 для свойства X размещает дочерний элемент в центре AbsoluteLayout по горизонтальной оси.

Пример ChessboardProportional демонстрирует применение функции пропорционального размера и размещения.

Использование пропорциональных координат

Иногда бывает удобно использовать пропорциональное размещение не так, как оно реализовано в AbsoluteLayout. Вы можете предпочесть пропорциональные координаты, при использовании которых значение 1 для свойства X размещает левый (а не правый) край дочернего элемента по правому краю AbsoluteLayout.

Эту альтернативную схему размещения можно назвать "дробными дочерними координатами". Вы можете преобразовать из дробных дочерних координат в границы макета, необходимые для AbsoluteLayout использования следующих формул:

layoutBounds.X = (fractionalChildCoordinate.X / (1 - layoutBounds.Width))

layoutBounds.Y = (fractionalChildCoordinate.Y / (1 - layoutBounds.Height))

Этот подход демонстрируется в примере ProportionalCoordinateCalc.

AbsoluteLayout и XAML

Вы можете применить AbsoluteLayout в XAML и настроить присоединенные привязываемые свойства дочерних элементов AbsoluteLayout с помощью значений атрибутов AbsoluteLayout.LayoutBounds и AbsoluteLayout.LayoutFlags. Этот подход применяется в примерах AbsoluteXamlDemo и ChessboardXaml. Вторая из этих программ содержит 32 элемента BoxView, но с помощью неявного Style со свойством AbsoluteLayout.LayoutFlags обходится минимальным количеством разметки.

В XAML атрибут, состоящий из имени класса, символа точки и имени свойства всегда является присоединенным привязываемым свойством.

Наложения

Вы можете с помощью AbsoluteLayout создать наложение, которое перекрывает страницу другими элементами управления, например для защиты от вмешательства пользователя в работу основных элементов управления на этой страницы.

Пример SimpleOverlay демонстрирует эту методику и ProgressBar, с помощью которой обозначает ход выполнения задачи в программе.

Немного развлечений

Пример DotMatrixClock отображает текущее время на модели матричного дисплея размером 5x7 точек. Каждая точка представляет собой BoxView (в общей сложности их 228), которому присваивается размер и положение на AbsoluteLayout.

Triple screenshot of dot matrix clock

Программа BouncingText перемещает по экрану два объекта Label, моделируя отражение от горизонтальных и вертикальных границ экрана.