Изграждане на отзивчиви приложения за платно

Статия
03/15/2023

Адаптивността означава способността на дадено приложение автоматично да се подравнява към различни размери на екрана и форм-фактори, за да използва разумно наличното пространство на екрана, осигурявайки страхотен потребителски интерфейс и UX при всяко устройство, форм-фактор и размер на екрана.

Адаптивността позволява на различни елементи на приложението да определят как да:

се разтягат или преоразмеряват с промените на размера на екрана;
запазват или променят местата си с промените на размера на екрана.

Защо да създавате адаптивни приложения

Крайните потребители имат достъп до приложението ви от различни устройства, като например телефони, таблети, лаптопи и настолни компютри, с големи монитори, различни размери на екрана и различен брой пиксели.

За да се осигури отлично потребителско изживяване и използваемост на приложението на всеки форм-фактор и устройство, е необходимо приложението да се проектира според принципите на адаптивния дизайн. Дори ако приложението е предназначено да се използва само в уеб браузъра или на мобилни телефони, размерите на екрана на потребителското устройство могат да бъдат различни, така че проектирането на приложението според принципите за адаптивност е добра идея.

Проектиране на приложението според принципите за адаптивност

Преди да започнете да проектирате потребителския интерфейс за приложението си, трябва да вземете предвид следните аспекти:

Какви форм-фактори или устройства искате то да поддържа?
Как трябва да изглежда приложението на всеки форм-фактор?
Кои елементи на приложението трябва да се разтегнат или преоразмерят?
Скрити ли са елементите при някои форм-фактори?
Държи ли се приложението различно при някои форм-фактори?

След като всички тези изисквания бъдат събрани, трябва да започнете да мислите как тези различни оформления на потребителския интерфейс могат да бъдат създадени в едно приложение с адаптивните инструменти, налични в Power Apps.

Преди да започнете да използвате адаптивните оформления, трябва да направите следното:

Отидете на Power Apps.
Отворете приложението, където искате да използвате адаптивното оформление.
Отидете в Настройки > Дисплей, за да деактивирате опциите Мащабиране според размера, Заключване на съотношението на страните и Заключване на ориентацията и изберете Приложи.

Адаптивни оформления

Следните адаптивни оформления могат да бъдат създадени чрез добавяне на нов екран и избор на подходящата опция от раздела Оформление:

Оформления на екрана.

Бележка

Новите адаптивни оформления са налични за форматите на приложенията, но новите шаблони на екрана са налични само за формат Таблет.

Разделен екран

Оформлението на разделен екран има две секции, всяка от които заема 50% от ширината на екрана на настолни компютри. На мобилни устройства секциите се разполагат една под друга, като всяка заема цялата ширина на екрана.

Оформлението на странична лента има странична лента с фиксирана ширина отляво. Основното тяло се състои от заглавка с фиксирана височина, а основната секция заема останалата част от ширината на екрана. По подразбиране шаблонът има същото поведение на мобилни устройства, но се препоръчват някои персонализации въз основа на желания модел на потребителския интерфейс за мобилно изживяване.

Работа с контейнери

Контейнерите са градивни елементи на целия адаптивен дизайн. Контейнерът може да бъде контейнер с автоматично оформление във вертикална или хоризонтална посока или контейнер с фиксирано оформление, който в бъдеще ще поддържа ограничения.

По-долу има няколко съвета за създаване на потребителския интерфейс на приложението ви с контейнери:

Винаги създавайте UI елементи, които образуват UI таблица в контейнер.
Позволява на контейнера да има свои собствени адаптивни свойства и настройки, за да посочи как се позиционира или преоразмерява на различни размери на екрана.
Позволява ви да промените начина, по който са подредени неговите дъщерни компоненти по отношение на адаптивността.

Изберете един от двата режима на оформление за контейнер: ръчно оформление или автоматично оформление (хоризонтално или вертикално)

Контейнери с автоматично оформление

Двете контроли, хоризонтален контейнер и вертикален контейнер, може да се използват за автоматично оформление на дъщерните компоненти. Тези контейнери определят позицията на дъщерните компоненти, така че никога да не се налага да задавате X, Y за компонент вътре в контейнера. Също така той може да разпредели наличното пространство на своите дъщерни компоненти въз основа на настройките, както и да определя както вертикалното, така и хоризонталното подравняване на дъщерните компоненти.

Кога да използвате контейнери с автоматично оформление

Можете да използвате контейнери с автоматично оформление в следните сценарии:

Потребителският интерфейс трябва да се адаптира към промените в размера на екрана или форм-фактора.
Има повече от един дъщерен компонент, който трябва да преоразмери или премести в зависимост от промените в размера на екрана или форм-фактора.
Когато трябва да подреждате елементи вертикално или хоризонтално (независимо от техния размер).
Когато елементите трябва да се разположат на еднакво разстояние на екрана.

Пример за контейнер за автоматично оформление

За да създадете адаптивен екран:

Създайте празно приложение за платно с оформление на таблет.
Изберете Настройки > Дисплей и деактивирайте опциите Мащабиране по размер, Заключване на съотношението на страните и Заключване на ориентацията и изберете Прилагане.
Сега от прозорците Вмъкване в лявата странична лента, под раздела Оформление изберете Хоризонтален контейнер.
Най-горният контейнер трябва да бъде оразмерен, за да заеме цялото пространство с тези свойства. Той ще бъде със същия размер като екрана, докато се преоразмерява.
1. X = 0
2. Y= 0
3. Width = Parent.Width
4. Height = Parent. Височина
Сега от прозореца Вмъкване добавете два вертикални контейнера в хоризонталния контейнер.
За да създадете контейнерите, запълнете цялото вертикално пространство, изберете Контейнер1 и задайте свойството Align (vertical) на Stretch.
За да разделите екрана между съдържанието, използвайте свойството Fill portions върху двата дъщерни контейнера. Левият контейнер ще заема 1/4 от пространството на екрана.
1. Изберете контейнер Контейнер 2. Ще видите, че свойството Flexible width е включено. Задайте Fill portions на 1.
2. Изберете Контейнер 3. Ще видите, че свойството Flexible width е включено. Задайте Fill portions на 3.
Изберете контейнер Контейнер 2. Задайте свойството Fill = RGBA(56, 96, 178, 1) в лентата с формули. Задайте Align (horizontal) на Stretch.
Добавете няколко бутона, за да създадете меню. Преименувайте бутоните според нуждите.
Изберете Контейнер3 и добавете хоризонтален контейнер и изключете свойството Flexible height. Задайте Height на 100. Задайте Align (vertical) на Stretch.
Добавете няколко Икони в Контейнер4. Променете иконите, за да бъдат различни със свойството за икони.
Изберете Контейнер 4. Задайте свойството Justify (horizontal) на End. Задайте Align (vertical) на Center. Задайте Gap на 40, за да създадете разстояние между иконите.
Изберете Контейнер 3. Задайте Align (horizontal) на Stretch. Задайте Vertical Overflow на Scroll.
Добавете различни Етикети, Входни данни, Медии, докато не излязат извън контейнера. Променете цвета на правоъгълниците, за да бъде различен. Ще видите лента за превъртане за достъп до съдържанието, което не се вижда.
Изберете „Преглед“ или F5. Променете размера на прозореца на браузъра, за да видите как вашето приложение се адаптира към различни размери на екрана.

Известни проблеми

Определени комбинации от свойства на контейнера за оформление са несъвместими или могат да доведат до нежелани резултати, например:
- Ако свойството Wrap на контейнера е активирано, настройката на свойството Align се игнорира в дъщерните контроли.
- Ако свойството Wrap на контейнера е дезактивирано и препълването на основната ос на контейнера е настроено на Превъртане (хоризонтално препълване за хоризонтални контейнери или вертикално препълване за вертикални контейнери), е препоръчително да зададете свойството Justify на Начало или Интервал между.
- Опциите Център или Край могат да направят дъщерните контроли недостъпни, когато контейнерът е твърде малък, за да показва всички контроли, въпреки че свойството Overflow е зададено на Превъртане.
Не можете да преоразмерявате или премествате контролите в приложението за платно, защото контролите за плъзгане и пускане са дезактивирани в контейнерите за оформление. Вместо това използвайте свойствата на контейнерите за оформление, за да постигнете желания размер и позициониране. Подреждането на контролите може да бъде променено чрез Дървовиден изглед или като използвате клавишите със стрелки като преки пътища.
Контролите Таблица с данни, Графики и Добавяне на снимка понастоящем не се поддържат в контейнерите за оформление.
Някои от свойствата на контейнерите за оформление са скрити за дъщерните контроли. Скритите свойства все още могат да бъдат достъпни чрез лентата с формули или от разширения панел. Тези свойства обаче ще бъдат игнорирани дори ако са зададени на тези места.
Когато контролите се преместят в контейнер за оформление (например при копиране или поставяне на контролите), те се вмъкват в контейнера по реда им в Дървовиден изглед.

Вижте също

Създаване на адаптивни оформления