Share via

Краткое руководство: разработка приложений для разных размеров окон

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

Узнайте о работе этого компонента в рамках нашей серии о компонентах приложений.: Пользовательский интерфейс приложения Магазина Windows от "А" до "Я"

Цель: Прочитав эту статью, вы научитесь менять минимальную ширину приложения так, чтобы вместо 500 пикселей она составляла 320 пикселей, и изменять дизайн приложения таким образом, чтобы оно хорошо выглядело и работало при небольших значениях ширины. Кроме того, вы научитесь проектировать приложение с горизонтальным сдвигом, способное переключаться на вертикальный макет каждый раз, когда высота приложения оказывается больше его ширины.

Необходимые условия

Создание первого приложения Магазина Windows на JavaScript

Руководство по взаимодействию с пользователями — макеты и масштабирование

Пример: макет для окон, вытянутых по высоте

В этой статье демонстрируются дополнительные варианты разработки высоких и узких макетов с описанием их реализации в примере: макет для окон, высота которых больше высоты широкого образца. Этот пример основан на шаблоне Приложение таблицы из Microsoft Visual Studio.

В шаблоне Приложение таблицы четыре страницы.

  • default (default.html), которая просто загружает страницу groupedItems после запуска приложения.
  • groupedItems (pages\groupItems\groupedItems.html), позволяющая пользователю просматривать группы и элементы, а затем либо выбирать метку группы для перехода к странице сведений о группе (groupDetail), либо выбирать элемент для перехода к его полностраничному просмотру (itemDetail).
  • groupDetail (pages\groupDetail\groupDetail.html), позволяющая просматривать сведения о группе и элементы, а также выбирать элемент для перехода к его полностраничному просмотру (itemDetail).
  • itemDetail (pages\itemDetail\itemDetail.html), которая обеспечивает полностраничный просмотр элемента.

В этой статье вы будете использовать макет по умолчанию для каждой страницы. Мы обсуждаем только те изменения, которые требуются для кода JavaScript, лежащего в основе страниц groupDetail и groupedItems.

Здесь ключевым методом программирования является проверка изменений свойств offsetWidth и offsetHeight страницы. Если определенные значения ширины и высоты получаются в результате изменения пользователем ширины страницы или ориентации устройства, изменяются макет страницы и поведение ее элементов управления.

Чтобы попробовать это сделать, создайте в Visual Studio новый экземпляр проекта приложения таблицы для Магазина Windows, а затем выполните оставшиеся инструкции.

Определение минимальной ширины

Минимальная ширина приложения Магазина Windows по умолчанию составляет 500 пикселей. Высота приложения всегда равна высоте экрана. Минимальная высота экрана для приложения составляет 768 пикселей.

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

Минимальная ширина приложения изменяется в файле манифеста package.appxmanifest. Для этого выполните в Visual Studio следующие действия.

  1. Откройте файл манифеста package.appxmanifest. Файл манифеста автоматически откроется в конструкторе манифестов.

  2. Откройте вкладку Приложение и найдите поле Минимальная ширина.

  3. Выберите в раскрывающемся списке минимальную ширину 320 пикселей.

  4. Если вы откроете файл манифеста package.appxmanifest в текстовом редакторе, элемент ApplicationView должен отображаться как дочерний элемент VisualElements. Например, новая минимальная ширина в файле манифеста выглядит следующим образом.

    <ApplicationView MinWidth="width320" />

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

Определение поведения для просмотра групп и элементов

  1. В файле pages\groupedItems\groupedItems.js добавьте код в метод ready функции ui.Pages.define. Этот метод вызывается после полного завершения инициализации и отрисовки страницы. Вызовите в этом методе функцию _initializeLayout, которую вы определите позднее. Код, который вам нужно добавить, отмечен комментариями *** START *** и *** END ***.

    ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    ready: function (element, options) {
        var listView = element.querySelector(".groupeditemslist").winControl;
        listView.element.focus();
        // *** START ***
        this._initializeLayout(listView);
        // *** END ***
    },
    // ...

  2. В файле groupedItems.js добавьте код в метод updateLayout функции ui.Pages.define. Этот метод вызывается каждый раз, когда пользователь переключается между узким, книжным и альбомным состояниями макета. Сошлитесь в этом методе на элемент управления ListView страницы, временно отключите анимации страницы, а затем вызовите функцию _initializeLayout, которую вы определите позже.

    ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".groupeditemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault;
        }
        listView.addEventListener("contentanimating", handler, false);

        this._initializeLayout(listView);
        // *** END ***
    },
    // ...

  3. В файле groupedItems.js добавьте код в функцию ui.Pages.define, чтобы определить функцию _initializeLayout. Эта функция определяет текущий макет страницы (узкий, книжный или альбомный) и соответствующим образом регулирует элемент управления ListView. Она вызывается как методом ready, так и методом updateLayout. Она работает следующим образом.

    • Если ширина страницы больше 320 пикселей, но меньше 500 пикселей, элемент управления ListView страницы показывает данные в виде списка с вертикальной прокруткой, содержащего только группы. 500 пикселей взяты в качестве примера ширины. Вы можете решить, при какой ширине требуется изменять макет. В этом примере мы выбрали 500 пикселей в качестве значения, при котором приложение переключает макет. При любой ширине менее 500 пикселей приложение использует узкий макет.
    • Если ширина страницы меньше ее высоты, элемент управления ListView показывает данные в виде списка групп с вертикальной прокруткой, содержащего элементы.
    • В противном случае элемент управления ListView показывает данные в виде сетки групп с горизонтальной прокруткой, содержащей элементы.
    ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Narrow layout.
        if (document.documentElement.offsetWidth < 500) {
            // Show data as a vertically-scrolling list of groups only.
            listView.itemDataSource = Data.groups.dataSource;
            listView.groupDataSource = null;
            listView.layout = new ui.ListLayout();                
        }
        // Portait layout.
        else if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            // Show data as as a vertically-scrolling list of groups that contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.ListLayout();                                
        }
        // Landscape layout.
        else {
            // Show data as a horizontally-scrolling grid of groups contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout();
        }
    },
    // *** END ***
    // ...

Определите поведение для просмотра подробностей групп и элементов

  1. В файле pages\groupDetail\groupDetail.js добавьте код в метод updateLayout функции ui.Pages.define. Этот метод вызывается каждый раз, когда пользователь переключается между книжным и альбомным макетами приложения. Сошлитесь в этом методе на элемент управления ListView страницы, временно отключите анимации страницы, а затем вызовите функцию _initializeLayout, которую вы определите позже. Кроме того, прокрутите элемент управления ListView, чтобы первым видимым элементом стал нужный элемент.

    ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".itemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault();
        }
        listView.addEventListener("contentanimating", handler, false);

        var firstVisible = listView.indexOfFirstVisible;

        this._initializeLayout(listView);

        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
            listView.indexOfFirstVisible = firstVisible;
        }
        // *** END ***
    },
    // ...

  2. В файле groupDetail.js добавьте код в функцию ui.Pages.define, чтобы определить функцию _initializeLayout. Эта функция определяет текущий (книжный или альбомный) макет страницы и соответствующим образом регулирует элемент управления. Эта функция вызывается методом updateLayout. Она работает следующим образом.

    • Если ширина страницы больше 320 пикселей, но меньше 500 пикселей, элемент управления ListView страницы показывает данные в виде списка с вертикальной прокруткой, содержащего только группы. 500 пикселей взяты в качестве примера ширины. Вы можете решить, при какой ширине требуется изменять макет. В этом примере мы выбрали 500 пикселей в качестве значения, при котором приложение переключает макет. При любой ширине менее 500 пикселей приложение использует узкий макет.
    • Если ширина страницы меньше ее высоты, элемент управления ListView показывает данные в виде списка с вертикальной прокруткой, не показывая заголовок группы.
    • В противном случае элемент управления ListView показывает данные в виде сетки с горизонтальной прокруткой, где слева отображается заголовок группы.
    ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Portrait layout.
        if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            listView.layout = new ui.ListLayout();
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "none";
        }
        // Landscape layout.
        else {
            listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" });
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "inherit";
        }
    },
    // *** END ***
    // ...

Переключение макетов

Теперь вы можете посмотреть, что происходит с макетом приложения, когда вы выбираете разные размеры окна.

  1. Запустите приложение в имитаторе Visual Studio. Чтобы узнать, как это делается, см. статью о запуске приложений Магазина Windows в имитаторе.
  2. Щелкните Базовый сенсорный режим.
  3. Перетащите в сторону верхнюю часть страницы и переместите разделитель так, чтобы ширина страницы составляла 500 пикселей. Данные отображаются в виде списка групп с вертикальной прокруткой, содержащего элементы.
  4. Переместите разделитель так, чтобы ширина страницы составляла 320 пикселей. Данные отображаются в виде списка с вертикальной прокруткой, содержащего только группы.
  5. Щелкните Повернуть по часовой стрелке. Данные отображаются в виде списка групп с вертикальной прокруткой, содержащего элементы.
  6. Поэкспериментируйте, касаясь заголовков групп, заголовков элементов и кнопки "Назад", а также изменяя ширину страницы и ориентацию устройства.

Сводка

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

Связанные разделы

Краткое руководство: определение макетов приложений