Створення адаптивних макетів у компонованих програмах
Перед створенням компонованої програми у Power Apps потрібно вказати, що програму слід адаптувати для телефона або планшета. Цей вибір визначає розмір і форму полотна, на якому ви будете створювати програму.
Після вибору можна зробити ще кілька варіантів вибору, якщо вибрати Налаштування > Відображення. Можна вибрати книжкову або альбомну орієнтацію та розмір екрана (лише для планшета). Також можна блокувати або розблоковувати пропорції та підтримати обертання пристрою (або ні).
Ці вибори лежать в основі будь-якого іншого вибору під час створення макетів екрана. Якщо програма працює на пристрої іншого розміру або в Інтернеті, весь ваш макет масштабується до розміру екрана, на якому запущена програма. Якщо програма, призначена для телефона, працює, наприклад, у великому вікні браузера, вона масштабується для компенсації і виглядає завеликою для цього простору. Програма не може використати додаткові пікселі, показуючи більше елементів керування або більше вмісту.
У разі створення адаптивного макета елементи керування можуть реагувати на різні пристрої або розміри вікна, роблячи різноманітні операції більш природними. Для досягнення адаптивного макета вам потрібно налаштувати деякі параметри та написати вирази в межах програми.
Вимкнути масштабування за розміром
Кожен екран можна настроїти таким чином, щоб його макет адаптувався до фактичного простору, в якому працює програма.
Адаптивність активується вимиканням для програми параметру Масштабування за розміром, який встановлено за замовчуванням. Після вимкнення цього параметра також вимикається параметр Зафіксувати пропорції, оскільки більше не створюєте програму для певного масштабу екрана. (Також можна вказати, чи підтримує програма обертання пристрою.)
Щоб зробити цю програму адаптивною, необхідно виконати додаткові кроки, але ця зміна є першим кроком на шляху до реалізації адаптивності.
Що таке параметри програми та екрана?
Щоб макети програми реагували на зміни розмірів екрана, потрібно писати формули, які використовують властивості Ширина та Висота на екрані. Щоб показати ці властивості, відкрийте програму у програмі Power Apps Studio, а потім виберіть екран. Формули за замовчуванням для цих властивостей відображаються на вкладці Додатково на панелі праворуч.
Ширина = Max(App.Width, App.DesignWidth)
Висота = Max(App.Height, App.DesignHeight)
Ці формули пов'язані з такими властивостями програми як Ширина, Висота, Розрахована ширина та Розрахована висота. Властивості програми Ширина та Висота відповідають розмірам пристрою або вікна браузера, в яких працює програма. Якщо користувач змінює параметри вікна браузера (чи обертає пристрій, якщо вимкнено Блокування орієнтації), значення цих параметрів змінюється динамічно. Формули у властивостях екрана Ширина і Висота переоцінюються у разі зміни цих значень.
Властивості DesignWidth і DesignHeight виходять із умов, указаних в області Відображення в меню Налаштування. Наприклад, у разі вибору макета телефона у портретній орієнтації, DesignWidth становить 640, а DesignHeight – 1136.
Оскільки вони використовуються у формулах для властивостей екрана Ширина і Висота, властивості DesignWidth і DesignHeight можна розуміти як мінімальні розміри, для яких розробляється програма. Якщо фактична область, доступна для програми, є навіть меншою, ніж ці мінімальні виміри, то формули для властивостей Ширини та Висоти екрана гарантуються, що їхні значення не стануть меншими, ніж мінімальні значення. У такому разі для перегляду всього вмісту екран необхідно прокручувати.
Після встановлення DesignWidth і DesignHeight, у більшості випадків більше не буде потрібно змінювати формули за замовчуванням для кожного властивості Ширина та Висота екрана. Далі в цьому розділі розглядаються випадки, коли може знадобитися настроювання цих формул.
Використання формул для динамічного макету
Щоб створити адаптивний дизайн, потрібно визначити розташування й розмір кожного елемента керування, використовуючи формули замість абсолютних (сталих) значень координат. Ці формули виражають позицію кожного елемента керування та розміру з погляду загального розміру екрана або відносно інших елементів керування на екрані.
Важливо
Після створення формул для властивостей X, Y, Ширина і Висота елемента керування, ваші формули будуть змінені на постійні значення, якщо ви далі перетягнете елемент керування у редактор полотна. У разі початку використання формул для досягнення динамічного макета слід уникати перетягування елементів керування.
В найпростішому випадку один елемент керування заповнить весь екран. Для створення цього ефекту слід встановити такі значення властивостей елемента керування.
| Властивість | Значення |
|---|---|
| X | 0 |
| Ш | 0 |
| Ширина | Parent.Width |
| Висота | Parent.Height |
Ці формули використовують оператор Батьківський елемент. Для елемента керування, розташованого безпосередньо на екрані, Батьківський елемент стосується екрана. З цими значеннями властивостей елемент керування відображатиметься у верхньому лівому кутку екрана (0, 0) і матиме однакову Ширину та Висоту на екрані.
Потім у цьому розділі можна застосовувати ці принципи (і оператор Батьківський елемент), щоб розташувати елементи керування в інших контейнерах, наприклад галереях, групових елементах керування, а також компонентах.
У якості альтернативи елемент керування може заповнити лише верхню половину екрана. Для створення цього ефекту встановіть для властивості Висота значення Висота батьківського елемента /2, а інші формули залиште незмінними.
Якщо потрібно, щоб другий елемент керування заповнив нижню половину того самого екрана, можна використовувати щонайменше два підходи до побудови його формул. Для простоти можна скористатись такими підходом:
| Control | Властивість | Формула |
|---|---|---|
| Верхні | X | 0 |
| Верхні | Ш | 0 |
| Верхні | Ширина | Parent.Width |
| Верхні | Висота | Parent.Height / 2 |
| нижня | X | 0 |
| нижня | Y | Parent.Height / 2 |
| нижня | За шириною | Parent.Width |
| нижня | За висотою | Parent.Height / 2 |
Ця конфігурація забезпечить досягнення потрібного ефекту, але потрібно редагувати кожну формулу, якщо ви змінили думку щодо відносних розмірів елементів керування. Наприклад, ви можете вирішити, що верхня частина елемента керування має займати лише верхню третину екрана, а нижній елемент керування – дві третини знизу.
Щоб створити такий ефект, потрібно оновити значення властивості Висота елемента керування Верхній, та значення властивостей Y і Висота для елемента керуванняНижній. Замість цього спробуйте написати формули для елемента керування Нижній відносно елемента керування Верхній, як і в цьому прикладі.
| Control | Властивість | Формула |
|---|---|---|
| Верхні | X | 0 |
| Верхні | Ш | 0 |
| Верхні | Ширина | Parent.Width |
| Верхні | Висота | Parent.Height / 3 |
| Lower | X | 0 |
| Lower | Ш | Upper.Y + Upper.Height |
| Lower | За шириною | Parent.Width |
| нижня | За висотою | Parent.Height - Lower.Y |
З цими формулами потрібно змінити лише властивість Висота елемента керування Верхній, щоб виразити іншу частину висоти екрана. Елемент керування Нижній автоматично переміщається і змінює розміри для врахування змін.
Ці моделі формул можна використовувати для вираження загальних зв’язків макета між елементом керування з іменем C і батьківським елементом або спорідненим елементом керування з іменем D.
| Зв'язок між об'єктом С і його батьківськими елементами | Властивість | Формула | Ілюстрації |
|---|---|---|---|
| С встановлює ширину батьківського елемента, з запасом N | X | N |
 |
| За шириною | Parent.Width - (N * 2) |
||
| С встановлює висоту батьківського елемента з запасом N | Y | N |
 |
| За висотою | Parent.Height - (N * 2) |
||
| C вирівняний за правим краєм батьківського елемента з запасом N | X | Parent.Width - (C.Width + N) |
 |
| C вирівняний за нижнім краєм батьківського елемента з запасом N | Y | Parent.Height - (C.Height + N) |
 |
| C відцентрований по горизонталі на батьківському елементі | X | (Parent.Width - C.Width) / 2 |
 |
| C відцентровано по вертикалі на батьківському елементі | Y | (Parent.Height - C.Height) / 2 |
 |
| Зв'язок між С і D | Властивість | Формула | Ілюстрації |
|---|---|---|---|
| С горизонтально вирівняно з D і з такою самою шириною, як D | X | D.X |
 |
| За шириною | D.Width |
||
| С вирівняно по вертикалі з D і з такою самою висотою, як D | Y | D.Y |
 |
| За висотою | D.Height |
||
| Правий край C вирівняно за правим краєм D | X | D.X + D.Width - C.Width |
 |
| Нижній край C вирівняно за нижнім краєм D | Y | D.Y + D.Height - C.Height |
 |
| C відцентровано по горизонталі відносно D | X | D.X + (D.Width - C.Width) / 2 |
 |
| C відцентровано по вертикалі відносно D | Y | D.Y + (D.Height - C.Height) /2 |
 |
| C розташовано праворуч від D з проміжком N | X | D.X + D.Width + N |
 |
| С розташовано нижче D з проміжком N | Y | D.Y + D.Height + N |
 |
| C заповнює пробіл між D і правим краєм батьківського елемента | X | D.X + D.Width |
 |
| За шириною | Parent.Width - C.X |
||
| C заповнює пробіл між D і нижнім краєм батьківського елемента | Y | D.Y + D.Height |
 |
| За висотою | Parent.Height - C.Y |
Ієрархічний макет
Під час створення екранів, що містять більше елементів керування, буде зручніше (або навіть необхідно) розташовувати елементи керування відносно батьківського елемента керування, а не відносно екрана або елемента керування «брат». Впорядкування елементів керування до ієрархічної структури може полегшити створення та збереження формул.
Галереї
У разі використання галереї у програмі потрібно форматувати елементи керування в шаблоні галереї. Ці елементи керування можна розташувати шляхом створення формул, які використовують оператор Батьківський елемент, який буде посилатися на шаблон галереї. У формулах елементів керування в шаблоні галереї використовуйте властивості Parent.TemplateHeight і Parent.TemplateWidth, не використовуйте властивості Parent.Width і Parent.Height, що стосуються загального розміру галереї.
Елемент керування контейнера
Контейнер макета можна використати в якості батьківського елемента керування.
Розглянемо приклад заголовка у верхній частині екрана. Зазвичай заголовок містить назву і кілька піктограм, з якими користувачі можуть взаємодіяти. Такий заголовок можна створити за допомогою елемента керування Контейнер який містить елемент керування Надпис та два елементи керування Піктограма.
Установіть для цих властивостей цих елементів керування такі значення:
| Властивість | Заголовок | Меню | закрити | Назва |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Ш | 0 |
0 |
0 |
0 |
| Ширина | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Висота | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Для елемента керування Заголовок Parent стосується екрана. Для інших – Parent стосується елемента керування Заголовок.
Після написання цих формул можна змінити розмір або розташування елемента керування Заголовок, змінивши формули для його властивостей. Розміри та розташування дочірніх елементів керування будуть регулюватися автоматично.
Елементи керування контейнерами з автоматичними макетами
Ви можете використовувати функцію, елементи керування контейнером Auto-layout для автоматичного розкладання дочірніх компонентів. Ці контейнери визначають положення дочірніх компонентів, так що немає необхідності задавати вісі X і Y для компонента всередині контейнера. Окрім цього вони здатні розподіляти доступний простір дочірнім компонентам, залежно від налаштувань, а також визначати як вертикальне, так і горизонтальне вирівнювання дочірніх компонентів. Докладніше див. у розділі Елементи керування контейнерами з автоматичними макетами
Компоненти
Якщо ви використовуєте іншу функцію під назвою Компоненти, ви можете створювати стандартні блоки та повторно використовувати їх у своєму додатку. Як і у випадку з елементом керування Контейнер, формули елементів керування, які ви розташовуєте в компоненті, мають базуватися на Parent.Width і Parent.Height, що залежать від розміру компонента. Додаткові відомості: створення компонента
Адаптація макета для розміру та орієнтації пристрою
Отже, ви дізналися, як використовувати формули для зміни розміру кожного з елементів керування відповідно до доступного простору, зберігаючи при цьому елементи керування вирівняними відносно один до одного. Але, можливо, вам знадобиться внести істотніші зміни макета залежно від різних розмірів і орієнтації пристрою. Наприклад, якщо пристрій повертається з книжкової на альбомну орієнтацію, можливо, ви захочете переключитися з вертикального макета на горизонтальний. На пристрої більшого розміру можна представити більше вмісту чи змінити його розташування, щоб забезпечити привабливіший макет. На невеликому пристрої, можливо, потрібно буде розділити вміст на кілька екранів.
Орієнтація пристрою
Формули за замовчуванням для властивостей екранаШирина та Висота, як було описано вище в цьому розділі, не обов’язково будуть корисними, якщо користувач обертає пристрій. Наприклад, програма, призначена для телефона, в портретній орієнтації, має DesignWidth 640 та DesignHeight 1136. Така сама програма на телефоні у в альбомній орієнтації матиме такі значення властивості:
- Для властивості екрана Ширина встановлюється значення
Max(App.Width, App.DesignWidth). Ширина програми (1136) більша, ніж її DesignWidth (640), тому формула оцінює значення 1136. - Для властивості екрана Висота встановлюється значення
Max(App.Height, App.DesignHeight). Висота програми (640) менша, ніж її DesignHeight (1136), тому формула оцінює значення 1136.
З Висотою екрана, що становить 1136 і висотою пристрою (у цій орієнтації) 640, потрібно прокручувати екран по вертикалі, щоб переглянути весь вміст, це може не влаштовувати користувача.
Для того, щоб адаптувати властивості екрана Ширина і Висота до орієнтації пристрою, можна використовувати такі формули:
Ширина = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Висота = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Ці формули змінюють значення DesignWidth і DesignHeight програми, залежно від того, чи ширина пристрою менша, ніж його висота (портретна орієнтація) або більша (альбомна орієнтація).
Після налаштування формул Ширина і Висота також можна змінити розташування елементів керування на екрані, щоб краще використовувати доступний простір. Наприклад, якщо кожен з двох елементів керування займає половину екрана, їх можна скласти вертикально в портретній орієнтації і розташувати поряд у альбомній орієнтації.
Щоб визначити, як орієнтований пристрій (вертикально чи горизонтально), можна використати властивість Орієнтація.
Примітка
У альбомній орієнтації елементи керування Верхній та Нижній відображаються як лівий і правий елементи керування.
| Control | Властивість | Формула |
|---|---|---|
| Верхні | X | 0 |
| Верхні | Ш | 0 |
| Верхні | Ширина | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Верхні | Висота | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Lower | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Lower | Ш | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Lower | За шириною | Parent.Width - Lower.X |
| нижня | За висотою | Parent.Height - Lower.Y |
Розміри екрана та точки зупинки
Макет можна настроїти відповідно до розміру пристрою. Властивість екрана Розмір класифікує поточний розмір пристрою. Розмір є додатним цілим числом, тип ScreenSize надає названі константи, щоб полегшити зчитування. У цій таблиці перелічені константи:
| Константа | Значення | Типовий тип пристрою (використання параметрів програми за замовчуванням) |
|---|---|---|
| ScreenSize.Small | 1 | Телефон |
| ScreenSize.Medium | 2 | Планшет, який тримають вертикально |
| ScreenSize.Large | 3 | Планшет, що тримають горизонтально |
| ScreenSize.ExtraLarge | 4 | Настільний комп'ютер |
Ці розміри використовуються для прийняття рішень щодо макета програми. Наприклад, якщо потрібно, щоб елемент керування був прихований на пристрої з розмірами телефона, але відображався в інший спосіб, для властивості елемента керування Видимий задайте таку формулу:
Parent.Size >= ScreenSize.Medium
Ця формула оцінює значення як true, коли розмір є середнім або великим, і як false в протилежному випадку.
Якщо потрібно, щоб елемент керування займав іншу фракцію ширини екрана на основі розміру екрана, установіть для властивості елемента керування Ширина таку формулу:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
У цій формулі можна встановити ширину елемента керування, що дорівнює половині ширини екрана на невеликому екрані, трьом десятим ширини екрана на середньому екрані, а також чверті ширини екрана на всіх інших екранах.
Настроювані точки зупинки
Властивість екрана Розмір визначається через порівняння властивості екрана Ширина зі значенням у властивості програми SizeBreakpoints. Ця властивість – це таблиця з однією колонкою чисел, які вказують на точки зупинки, що розділяють іменовані розміри екрана:
У програмі, створеній для планшета або Інтернету, значення за замовчуванням у властивості програми SizeBreakpoints становить [600, 900, 1200]. У програмі, створеній для телефонів, значення становить [1200, 1800, 2400]. (Значення для програм для телефонів подвоюються, оскільки такі програми використовують координати, які фактично подвоюють координати, які використовуються в інших програмах.)
Можна настроїти точки зупинки програми, змінивши значення у властивості SizeBreakpoints програми. Виберіть Програма в поданні дерева, натисніть SizeBreakpoints у списку властивостей, а потім змініть значення в рядку формули. Можна створити стільки точок зупинки, скільки потрібно для програми, але лише від 1 до 4 відповідають іменованим розмірам екрана. У формулах можна посилатися на розміри за межами ExtraLarge за їх числовими значеннями (5, 6 тощо).
Також можна задати менше точок зупинки. Наприклад, у програмі може знадобитися лише три розміри (дві точки зупинки), тому можливі розміри екрана будуть «Малий», «Середній» і «Великий».
Відомі обмеження
Авторське полотно не відповідає на створені формули розмірів. Щоб перевірити чи дає поведінка відповідь, потрібно зберегти та опублікувати програму, потім відкрити її на пристроях або у вікнах браузера різних розмірів і орієнтацій.
У разі записування виразів або формул у властивості елемента керування X, Y, Ширина та Висота ви перезапишете ці вирази або формули, якщо пізніше перетягнете елемент керування в інше місце або зміните його розмір, перетягнувши його межу.
Примітка
Розкажіть нам про свої уподобання щодо мови документації? Візьміть участь в короткому опитуванні. (зверніть увагу, що це опитування англійською мовою)
Проходження опитування займе близько семи хвилин. Персональні дані не збиратимуться (декларація про конфіденційність).
Зворотний зв’язок
Очікується незабаром: протягом 2024 року ми будемо припиняти використання механізму реєстрації проблем у GitHub для зворотного зв’язку щодо вмісту й замінювати його новою системою зворотного зв’язку. Докладніше: https://aka.ms/ContentUserFeedback.
Надіслати й переглянути відгук про