Складання екрана

Тут ви кладете віджети на екран, розставляєте їх контейнерами й налаштовуєте нерухомі частини екрана: шапку вгорі, панель навігації та прибитий блок унизу.

Відео: Layout: columns, rows, stacks and pinned parts (3 хв; відео англійською, субтитри українською).

Додайте віджет#

Відкрийте розділ Віджети ліворуч. Додати віджет можна двома способами:

• Клацнути. Віджет ляже у виділений контейнер; якщо нічого не виділено — на екран.
• Перетягнути на полотно або в дерево. Риска показує, куди він стане.

Віджет, якому у виділеному місці стати не можна, приглушений; наведіть курсор, щоб прочитати чому — наприклад, На екрані вже є верхня панель — друга не потрібна. Приглушений віджет однаково можна перетягнути туди, де йому місце.

У палітрі чотири групи:

Виділити, перенести, скопіювати, видалити#

• Виділити віджет — клацнути його на полотні або в розділі Дерево. Через дерево найлегше дістатися контейнера, який цілком закритий власним вмістом.
• Перенести — перетягнути, на полотні чи в дереві, або натиснути стрілки у смузі над полотном. З клавіатури: поставте фокус на віджет, натисніть пробіл, щоб узяти його, стрілками оберіть місце, пробілом покладіть, Esc — скасувати.
• Скопіювати — ⌘C, вставити — ⌘V; дублювати — ⌘D або кнопка у смузі; видалити — клавіша Delete або кнопка у смузі.

У дереві ще й шукають — по всьому документу, за назвою віджета чи видимим текстом.

Контейнери#

Контейнер тримає інші віджети й вирішує, як їх розкласти.

• Колонка — діти одне під одним із рівним проміжком (Проміжок).
• Рядок — діти поруч. Розподіл по ширині розподіляє їх уздовж рядка, Переносити на наступний рядок переносить те, що не вмістилося, на наступний рядок, а Прокручувати вбік натомість дає рядок гортати. Переносити й гортати водночас рядок не може.
• Контейнер — картка: тло, заокруглення, тінь і внутрішні відступи бере зі свого стилю. Розкладка вмісту обирає між колонкою й рядком.
• Сітка — рівні колонки (Колонок) із перенесенням на наступний ряд.
• Накладання — шари один поверх одного: бейдж на куті картки, градієнт поверх фото. Перша дитина — найнижчий шар.
• Вкладки — кілька панелей під спільною смугою заголовків; кожна панель — це Вкладка.
• Розкривний блок — вміст під заголовком, що розкривається натисканням.
• Порожній простір і Роздільник — порожнє місце й тонка лінія між сусідами.

Деякі налаштування віджет має через те, де він стоїть. У властивостях вони з'являються лише в такому місці:

• У рядку: Ширина в рядку — частка ширини рядка. Двоє дітей із частками 2 і 1 ділять рядок два до одного.
• У накладанні: Місце шару — Разом зі стосом або Власне місце з вирівнюванням, зсувом і поворотом — і Розмір шару, де На весь стос розтягує шар на все накладання.
• На екрані, у колонці, контейнері чи рядку: Наїзд на попередній — віджет наїжджає на попередній на задану відстань.

Вирівнювання#

Екран, колонка й контейнер вирівнюють дітей на обох осях: По горизонталі і По вертикалі.

Вертикальному вирівнюванню потрібне вільне місце. Якщо контейнер заввишки рівно з власний вміст, панель так і каже: Зараз не діє: у вузла немає вільної висоти — задайте висоту в «Стилі». Задайте контейнеру висоту або найменшу висоту в розділі Стиль — і налаштування запрацює.

Шапка#

Верхня панель — верхня смуга екрана. На екрані вона одна й завжди перша. Поки решта екрана гортається, вона стоїть на місці.

• Заголовок і Підзаголовок — тексти шапки; Місце заголовка ставить заголовок на початку або по центру.
• Ліворуч — що стоїть на початку шапки: Стрілка назад, Власна кнопка або Нічого. Власна кнопка — звичайна кнопка: її напис, іконку й дію правлять на ній самій.
• Дії праворуч — до двох кнопок-іконок після заголовка. Додайте дію кнопкою в цьому розділі, а іконку, назву й дію задайте на самій кнопці.

Після прокрутки#

Над картинкою, що починається від верху екрана, шапка зазвичай прозора — і щойно екран прогорнули, текст заходить під її кнопки. Розділ Після прокрутки дає шапці вигляд, який вона має, поки екран прогорнуто під неї: Тло, Текст і значки, Тінь і розмиття скла. Заголовок видно зі значенням Після прокрутки ховає заголовок у спокої; місце він тримає, тож нічого не стрибає. Полотно не гортається, тож там шапка в спокої, а схований заголовок приглушений; прогорніть прев'ю, щоб побачити зміну. Розділ діє лише на шапку, що є першим елементом екрана.

Смуги й кільця прогресу#

Кінці зі значенням Заокруглені заокруглюють кінці заповнення смуги й дуги кільця. Заокруглення лишається всередині заповненої частини: мале значення — точка, повна шкала — кільце без шва. Без цього кінці кільця зрізані, а кінці смуги — як у теми.

Сяйво зі значенням М’яке чи Яскраве змушує заповнену частину смуги чи кільця світитися власним кольором або градієнтом; доріжка не світиться. Смуга з кроків підсвічує один крок: поточний, коли в нього свій колір, інакше останній заповнений. Без сяйва прибирає його. Коли смуга з кроків росте при показі чи змінюється з даними, крок, що наливається, заповнюється плавно; у спокої крок або заповнений, або ні.

Панель навігації#

Панель навігації — нижня смуга, що перемикає розділи застосунку. У ній від двох до п'яти пунктів; кожен Пункт навігації має поля Іконка, Підпис і Екран розділу — екран, який пункт відкриває.

Панель — частина кожного екрана-розділу, тож однакова панель потрібна на кожному з них:

1. Додайте панель на один екран і налаштуйте пункти.
2. Виділіть панель. У розділі Решта розділів натисніть кнопку, що кладе панель на решту розділів.
3. Змінивши пункти згодом, зробіть це ще раз.

Поки екран гортається, панель стоїть унизу телефона. На широких екранах вона переїжджає нагору; Місце на широкому екрані дає лишити її внизу. Див. Ширина екрана.

На екрані, який відкривається шаром, панель навігації не малюється; редактор скаже, якщо ви покладете її туди.

Плаваюча панель#

Пливе над умістом робить панель плаваючою: уміст гортається під нею, а в кінці екрана з'являється місце під панель, тож останній рядок однаково догортається над нею. Вигляд — стиль самої панелі: дайте їй поле від країв, радіус кутів, розмиття скла й тінь. Прибитий блок над панеллю пливе теж. На широкому екрані з панеллю вгорі налаштування не діє.

Крапка на пункті#

Крапка, коли ставить крапку на іконку пункту навігації, поки справджується умова про дані — «нові місії», коли їх більше нуля. Умова та сама, що для показу елемента; з Даних немає крапка поводиться за тим самим правилом. Крапка — акцентного кольору теми й назви пункту не міняє.

Крапка з'являється коротким спалахом, коли умова справджується, поки екран показано, і згасає, коли перестає; крапка, що вже горить, коли екран відкрили, не спалахує.

Прибито до верху#

Привітання, великий заголовок розділу, рядок плашок фільтра мають стояти вгорі, поки вміст гортається, — як у будь-якому застосунку. Виділіть елемент і в розділі Прибито до верху оберіть Прибито: він стане вгорі екрана, одразу під шапкою, а вміст гортатиметься під ним. Прибити можна кілька елементів; вони стоять поспіль у порядку екрана, і прибивання ставить елемент у кінець цього ряду. Гортається з екраном повертає його до вмісту. На екрані, тіло якого починається від самого верху, під шапкою, прибити до верху нічого не можна.

Прибитий блок#

Щоб кнопку було видно під довгим екраном, прибийте її донизу: виділіть останній елемент екрана й у розділі Прибито до низу оберіть Прибито. Блок стоятиме на місці, а вміст гортатиметься над ним.

Прибити можна лише останній елемент екрана (панель навігації не рахується). Щоб прибити кілька речей, складіть їх в один контейнер і прибийте його.

Градієнтний текст#

На тексті Градієнт тексту в групі Текст розділу стилю зі значенням Градієнтом на літерах малює літери градієнтом теми або власним — велике число, заголовок, знак ✦. Градієнт лягає на весь текст, а не на кожен рядок. Колір тексту лишається: ним текст намалює старіший застосунок, і ним лишається частина тексту зі своїм кольором. Інші віджети цього налаштування не читають.

Провести, щоб підтвердити#

Для дії, яка не має статися випадково, — витратити бали, підтвердити оплату — оберіть у кнопки Підтвердження: Провести, щоб підтвердити. Кнопка стає доріжкою з повзунком на початку: дія спрацює, лише коли повзунок дотягнуть до кінця; відпустили раніше — він повертається. З клавіатури й для читача екрана це звичайна кнопка. Полотно показує повзунок на місці; потягніть його в прев'ю.

Коли повзунок дотягнуто до кінця, він лишається там з індикатором, доки застосунок не відповість, — відкриється наступний екран, або дія закінчиться й повзунок повернеться. Поки індикатор крутиться, кнопка нічого не робить. У прев'ю індикатор видно мить перед наступним кроком.

Пунктирна рамка#

У групі Рамка розділу стилю Лінія зі значенням Пунктир малює рамку штрихами, що йдуть по заокруглених кутах, — картка коду, місце для перетягування. Місця вона займає стільки ж, скільки суцільна.

Тінь кольору картки#

У групі Тінь стилю Колір тіні зі значенням Колір тла фарбує кожен шар тіні кольором тла елемента й лишає, наскільки шар прозорий: картки різних кольорів світяться кожна своїм, навіть коли колір приходить із даних через стан. Градієнтне тло дає колір своєї середини. Власний колір повертає тіні її колір.

Відгук на дотик#

На телефоні натиснута картка, рядок чи кнопка трохи стискається й пружно повертається; кнопка-іконка, «примарна» кнопка й пункт навігації притухають. Виділіть елемент і в розділі Відгук на дотик оберіть Немає, щоб він стояв нерухомо; Як на платформі повертає відгук. Полотно не рухається — натискайте в прев'ю.

У дії елемента Тактильний відгук просить застосунок коротко завібрувати на кожне натискання — Легкий поштовх для картки, Зміна вибору для вкладок і розділів, Успіх для підтвердженого обміну. Чи може, вирішує телефон; без налаштування нічого не просять, а прев'ю замість вібрації пише прохання у своїх нотатках.

Довге натискання#

Виділіть натискну картку чи рядок списку й відкрийте Довге натискання: Дія при довгому натисканні — та сама дія, що й при натисканні, і виконується вона, коли палець трохи полежить на елементі: відкрити маленьку картку посередині екрана, швидкий обмін. Дія при натисканні тоді не виконується. Назва дії довгого натискання обов'язкова: людина з читачем екрана чи клавіатурою дістається до дії за цією назвою. Кнопка довгого натискання не має. На полотні нічого не стається — утримуйте кнопку миші в прев'ю.

Групи в списку#

Виділіть список із даних і оберіть поле його запису в Групувати за: записи поспіль з однаковим значенням стають групою, а перед кожною групою малюється заголовок — текст зі значенням її першого запису, який оформлюється як будь-який елемент. Без груп прибирає групування разом із заголовком. Записи йдуть у тому порядку, який дають дані; групує лише список колонкою.

Налаштування екрана#

Клацніть порожнє місце екрана, щоб побачити його властивості: Проміжок між елементами, вирівнювання, Найбільша ширина вмісту і Тіло починається — чи починається вміст під шапкою, чи від самого верху екрана, під нею.

Далі#

• Стиль — кольори, відступи й розміри віджета.
• Дані — тексти й списки, що приходять із бекенду.