Изменение размера виджетов для небольших экранов
Откройте интерфейс
Вы начнете с открытия интерфейса, созданного в предыдущем учебном пособии.
- Если вы завершили работу с предыдущим учебным пособием, Добавление окна в веб-приложение, снова откройте интерфейс American River Marine Estuary и перейдите к следующему разделу.
Примечание:
Если вы не знаете, как найти этот интерфейс, откройте ArcGIS Experience Builder и войдите в свою учетную запись ArcGIS. Ваш интерфейс будет на странице Недавние интерфейсы.
- Если вы не завершили предыдущее учебное пособие, откройте ArcGIS Experience Builder и войдите в свою учетную запись ArcGIS.
Примечание:
Если у вас нет учетной записи ArcGIS, см. опции доступа к программному обеспечению.
Появится страница Недавние интерфейсы.
- Щелкните кнопку Создать новый.
- Выберите вкладку ArcGIS Online.
- В поисковой строке введите estuary template 1.
- На карточке American River Marine Estuary Template 1 щелкните кнопку Создать.
Появится канва, показывающая созданный на данный момент интерфейс. Он включает в себя карту, заголовок, столбец с большим количеством виджетов и кнопку, открывающую окно.
- На панели инструментов конструктора щелкните заголовок и переименуйте его в American River Marine Estuary.
Включите опцию пользовательской компоновки
Интерфейс American River Marine Estuary предназначен для интерактивного киоска, поэтому ваш дизайн ориентирован на большой формат экрана. Однако ваш клиент указал, что он также хочет разместить ссылку на приложение на своем веб-сайте, поэтому пользователи также могут столкнуться с ним на планшетах и мобильных телефонах. Вы будете использовать опцию пользовательской компоновки, чтобы внести изменения в компоновку, которую будет видно только на небольших экранах.
- На панели инструментов конструктора щелкните кнопку Изменить страницу для устройств со средним экраном.
Канва становится уже, имитируя экран планшета. Столбец рядом с картой теперь слишком узкий, чтобы с ним можно было работать. Вы не можете прочитать надписи в виджетах.
Рядом с меню есть два меню состояний: одно для заголовка и одно для основной части карты. Для них обоих задано значение Авто, это означает, что компоновка для средних экранов такая же, что и компоновка для больших экранов.
- Рядом с основной частью приложения щелкните Пользовательский.
- В разделе Вы уверены, что хотите включить? щелкните ОК.
Теперь вы можете изменить компоновку страницы для средних экранов, не влияя на дизайн для больших экранов.
- Щелкните столбец. Попробуйте щелкнуть пространство между двумя виджетами, чтобы выбрать столбец вместо одного из других виджетов.
Подсказка:
Чтобы подтвердить, что вы выбрали виджет столбца, убедитесь, что появилась панель Столбец. Вы также можете выбрать виджет столбца в разделе Контур на Странице.
- Перетащите боковую направляющую виджета столбца вправо, пока он не займет четыре вертикальных места вместо двух.
Столбец теперь достаточно широкий, чтобы полностью отображать легенду. Это изменение не повлияет на работу на больших экранах.
Переместить элемент в список ожидания
Иногда вам нужно полностью удалить виджет с компоновки маленького экрана. Вместо удаления виджета, что приведет к его удалению и из компоновки большого экрана, вы можете переместить его в список ожидающих выполнения.
- На панели инструментов конструктора щелкните кнопку Изменить страницу для устройств с маленьким экраном.
Канва становится еще меньше. Здесь потребуется еще больше изменений.
- Прокрутите приложение на канве.
Сначала отображается столбец, а под ним карта. На маленьких экранах виджеты строк отображаются в виде столбцов, поэтому ваша компоновка теперь структурирована как столбец внутри столбца, а не столбец внутри строки.
Мобильные приложения занимают меньше места, поэтому более успешны, если они просты. Информация в виджетах легенды и закладок также доступна во всплывающих окнах, поэтому вы уберете виджеты из поля зрения на маленьких экранах. Функция пролистывания также менее полезна на маленьком экране, поэтому ее тоже придется удалить. Это означает, что вы можете удалить весь виджет столбца, оставив только карту.
- Рядом с основной частью канвы щелкните Пользовательский. Нажмите OK.
- Выберите виджет столбца. Убедитесь, что выбран столбец, а не один из виджетов внутри него.
Не удаляйте виджет столбца. Удаление виджета в пользовательском режиме приведет к его удалению из всего приложения, поэтому он больше не будет доступен на больших экранах. Вместо удаления виджетов со среднего или маленького экрана переместите их в список ожидающих выполнения. Это гарантирует, что они все еще существуют и доступны для экранов других размеров.
Подсказка:
Если вы случайно удалили виджет столбца, на панели инструментов нажмите кнопку Отменить.
- На панели инструментов виджета щелкните кнопку Переместить в лист ожидания.
Столбец и все его компоненты исчезают из канвы. Осталась только карта.
Примечание:
Если карта не заполняет всю канву, щелкните ее и немного перетащите, чтобы сбросить ее размер.
Если инструменты карты (например, кнопка переключения карты) не отображаются в нижней части канвы, откройте панель Карта на вкладке Стиль. Для параметра Высота выберите Пользовательский и задайте размер как 100%.
Настройка размера и расположения в пикселах
Создание пользовательских компоновок для экранов меньшего размера имеет недостаток: если вы решите впоследствии внести изменения в компоновку, вам придется сделать это два или три раза. Иногда вы можете избежать создания пользовательской компоновки, задавая размеры в пикселях, а не в процентах.
На маленьких экранах кнопка Об этой карте очень мала, чтобы отобразить в ней весь текст.
Вы можете создать для кнопки собственный размер, который будет действовать только на маленьких экранах, но вместо этого вы измените общий размер кнопки, чтобы она работала на экранах всех размеров и не требовала никакой настройки.
- На панели инструментов конструктора щелкните кнопку Изменить страницу для устройств с большим экраном.
- Наведите курсор на заголовок и щелкните Редактировать заголовок. Щелкните виджет кнопки.
- На панели Кнопка 2 перейдите на вкладку Стиль.
В разделе Размер& Положение настройки Ширина и Высота измеряются как процент от размера экрана. Вот почему кнопка становится слишком короткой для чтения на устройствах с маленьким экраном.
- Рядом с параметром Ширина щелкните кнопку % и выберите px. Измените % на px для параметра Высота.
Определение размера кнопки в пикселах будет означать, что кнопка всегда будет одного и того же размера, независимо от размера экрана.
- Для параметра Ширина введите 120. Для параметра Высота введите 30.
Кнопка выглядит немного маленькой для больших экранов, но все равно будет выглядеть немного большой для маленьких экранов. Но этот новый размер — это компромисс, который работает на экране любого размера. Вы также определите ее положение в пикселах.
Под параметром Высота расположена диаграмма расположения. Эта диаграмма определяет, насколько далеко от краев заголовка расположена кнопка.
- На диаграмме положения рядом с измерениями нижнего и правого положения нажмите кнопку % и выберите px.
- Измените оба измерения на 10 пикселов.
Кнопка теперь расположена на расстоянии 10 пикселов от правого нижнего угла заголовка.
Далее вы отрегулируете положение текста заголовка, чтобы он также находился на расстоянии 10 пикселов от края.
- На канве щелкните текст заголовка.
На панели Текст на вкладке Стиль в диаграмме расположения все четыре измерения заданы как 0 процентов. Это связано с тем, что вы настроили заголовок так, чтобы он заполнял все пространство заголовка. Вы отрегулируете одно из этих измерений.
- На диаграмме расположения измените расположение слева на 10 пикселов.
На канве виджет текста слегка смещается вправо.
- Нажмите кнопки Изменить страницу для устройств со средним экраном и Изменить страницу для устройств с маленьким экраном, чтобы проверить, как заголовок отображается на экранах меньшего размера.
- На панели инструментов конструктора нажмите кнопку Изменить страницу для устройств с большим экраном и кнопку Сохранить.
В этом уроке вы адаптировали свою компоновку для работы на экранах трех размеров. Вы включили опцию пользовательской компоновки, переместили ненужные элементы в список ожидающих выполнения и установили размер и положение виджетов с помощью пикселов, чтобы гарантировать, что их размер не изменится при изменении размера экрана. Ознакомьтесь с последним руководством из этой серии Публикация интерфейса и шаблона, чтобы узнать, как сделать этот интерфейс общедоступным.
