Шаблон конструктора двойного представления

  • Статья

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

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

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

Screenshot shows the dual view experience with similar views side by side and the same data presented different ways.

Рекомендации

Ниже приведены некоторые сценарии, которые помогут вам при применении этого шаблона разработки:

Screenshot shows the preferred dual view contrasted with the list detail pattern.

Рекомендуется Не рекомендуется
Используйте левую часть экрана для отображения содержимого в одном представлении при использовании второго экрана для просмотра того же содержимого в другом представлении. Не используйте левый экран для отображения списка и второго экрана для отображения сведений. Это шаблон проектирования подробных сведений о списке.

Screenshot shows visual indicators that are synchronized for the selected item on both screens.

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

Screenshot shows the two screens used to compare data, instead of a list and detail display.

Рекомендуется Не рекомендуется
Используйте два экрана для сравнения одного экземпляра продукта. Нет списка на одном экране и подробных сведений на втором экране.

Screenshot shows using the two screens to preview and edit at the same time, but not on both screens interchangeably.

Рекомендуется Не рекомендуется
Используйте второй экран для изменения или разметки содержимого на первом экране в двойном представлении. Не разрешайте пользователям изменять или добавлять исправления на обоих экранах в двойном представлении.

Типы приложений с поддержкой этого режима:

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

Примеры кода

В этих проектах показана простая реализация двойного представления, которую можно использовать в приложениях:

Следующие шаги

Рассмотрим следующие другие шаблоны проектирования: