Як додати віджети на Android: покрокове керівництво

Вам потрібна спеціальна програма, щоб стильно налаштувати домашній екран! Це остаточна версія програми для переодягання, в якому є всі матеріали для перевдягання!

Віджети служать фантастичним мостом між користувачами та їх улюбленими функціями програм, пропонуючи прямий доступ прямо з домашнього екрану. Якщо ви користувач Android і хочете скористатися цією зручністю, ось ваш повний посібник з додавання віджетів.

Що таке віджет?

Віджет, на жаргоні Android, це функція, яка дозволяє створювати ярлики для певних функцій програми прямо на головному екрані. Будь то швидкий перегляд календаря, перевірка часу або доступ до фотографій, віджети спрощують процес.

Деякі з встановлених вами додатків, можливо, вже мають можливості віджетів, які готові вивести роботу з Android на новий рівень.

Кроки додавання базового віджету на Android:

1. На головному екрані натисніть і утримуйте будь-яку порожню область.

2.Натисніть «Віджети».

3. Знайдіть або виберіть програму, щоб знайти віджети на ваш смак.

4. Натисніть на віджет, який потрібно додати (або перетягніть віджет, щоб помістити його на головний екран).

(У даному випадку ми вибираємо віджет Spotify)

5. Натисніть кнопку «Додати», потім розмістіть віджет на свій розсуд (або перетягніть вибраний віджет у бажане місце на головному екрані. Це залежить від домашньої програми, що використовується).

6. Готово!

Додати персоналізовані віджети

Якщо стандартні віджети не відповідають вашим естетичним або функціональним потребам, ось спосіб додати персоналізований стиль:

1. Завантажте програму для віджетів.WidgetClub виділяється як найкращий вибір, пропонуючи величезний вибір віджетів, від годинника до фотографій і багато іншого.

2. Відкрийте програму WidgetClub, потім натисніть значок "+", потім натисніть "Віджет".

3.Виберіть бажаний розмір віджету: маленький, середній або великий.

4. Виберіть тип віджету.

(Для демонстрації ми вибрали середній розмір, погодний віджет)

5. Пориньте у налаштування, налаштуйте фонове зображення, шрифти, кольори тощо.

6.Після завершення редагування натисніть «Встановити»

7. З'явиться рамка налаштувань віджета, натисніть на неї. (Запам'ятайте вибраний вами розмір – це важливо!)

8. Натисніть кнопку «Додати», після чого віджет буде розміщено.

(Якщо кнопка «Додати» не з'явилася, прочитайте наступну частину.)

Якщо потрібно змінити розмір віджету, перейдіть до розділу «Як змінити розмір віджету» нижче.

Якщо кнопка «Додати» не з'явилася, виконайте такі дії:

1. На головному екрані натисніть і утримуйте будь-яку порожню область.

2.Натисніть «Віджети»

3.Пошук за запитом "WidgetClub"

4. натисніть на віджет WidgetClub, що відповідає вибраному розміру.

(У цій демонстрації оберіть середній розмір.)

5. Натисніть кнопку "Додати" (або перетягніть) середній віджет на головний екран.

6.Готово!(Якщо ви хочете змінити розмір віджету, перейдіть до розділу «Як змінити розмір віджету?» нижче!)

Як змінити розмір віджету?

1. Якщо потрібно змінити розмір, перемістіть його вліво або вправо, утримуючи натиснутою.

2. Перетягніть краї, щоб змінити розмір за своїм розсудом, а потім торкніться іншої порожньої області.

Якщо ви стильно організуєте свої віджети, значки та фон, ви можете зробити свій домашній екран таким модним!

Чи вам подобаються ці стилі? Завантажте програму "WidgetClub", щоб перетворити свій домашній екран! Легко налаштуйте свій домашній екран за допомогою стильних віджетів, піктограм програми та шпалер!

Кодування віджету для Android: введення та відображення

Починаючи з Android 1.5, віджети програм дозволяють користувачам отримувати інформацію, керувати програмами та виконувати важливі завдання, не виходячи зі своїх домашніх екранів.

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

До кінця серії ви створите віджет, який:

• Відображає декілька наборів даних.
• Виконує унікальну дію, коли користувач взаємодіє з певним View у макеті цього віджету.
• Оновлюється автоматично після закінчення заданого часу.
• Оновлення з новими даними у відповідь на взаємодію користувача.

У цьому першому пості ми будемо використовувати вбудовані інструменти Android Studio, щоб швидко та легко створювати всі файли, необхідні для доставки будь-якого віджету програми Android. Потім ми розширимо цей фундамент для створення віджету, який витягує та відображає дані та відповідає на події onClick .

Що таке віджети програм?

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

• Інформаційний віджет. Віджет, що не прокручується, який відображає важливу інформацію, таку як віджет погоди або годин.
• Колекція віджетів. Віджет, що прокручується, який відображає ряд пов'язаних елементів, таких як галерея фотографій або статей з тієї ж публікації.Колекційні віджети зазвичай підтримуються джерелом даних, таким як Array або база даних. Віджет колекції повинен включати ListView , GridView , StackView або AdapterViewFlipper .
• Керуйте віджетами. Віджет, який виступає як пульт дистанційного керування для вашої програми, дозволяючи користувачу запускати часто використовувані функції без необхідності запуску вашої програми. Програми, які відтворюють музику, часто надають віджет, який дозволяє користувачеві відтворювати, призупиняти та пропускати доріжки прямо зі свого домашнього екрану.
• Гібридні віджети. Навіщо обмежувати себе однією категорією, якщо ви можете вибирати елементи з кількох категорій? Просто майте на увазі, що змішування та зіставлення можуть призвести до плутанини в роботі користувача, тому для досягнення найкращих результатів ви повинні розробити свій віджет з урахуванням однієї категорії, а потім додавати елементи з інших категорій за необхідності. Наприклад, якщо ви хочете створити віджет, який відображає прогноз погоди на сьогодні, але також дозволяє користувачам переглядати прогноз для різних днів і місць, вам слід створити інформаційний віджет, а потім додати необхідні елементи керування.

На додаток до вищеперелічених функцій більшість віджетів реагують на події onClick , запускаючи асоційоване з ними додаток, аналогічно ярлику програми, але вони також можуть надавати прямий доступ до певного контенту цього додатку.

Віджети додатків повинні бути розміщені всередині хоста віджетів додатків , Найчастіше на стандартному домашньому екрані Android, хоча є деякі сторонні хости віджетів додатків, такі як популярні Nova Launcher та Apex Launcher .

Протягом усієї цієї серії я говоритиму про віджети як про щось, що ви поміщаєте на домашній екран, але якщо у вас є невиразні спогади про можливість розмістити віджети на екрані блокування, то це був не просто якийсь чудовий сон! Між рівнями API 17 та 20 можна було розміщувати віджети на домашньому екрані або на екрані блокування.

Оскільки віджети блокування екрану застаріли на рівні API 21, у цій серії ми створимо віджет лише домашнього екрана.

Чому я повинен створити віджет програми?

Є кілька причин, чому ви повинні розглянути можливість додавання віджету програми у ваш останній проект Android.

Легкий доступ до важливої ​​інформації та функцій

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

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

Прямий доступ до всіх найважливіших екранів вашої програми

При натисканні на віджет користувач зазвичай переходить на верхній рівень пов'язаної програми, аналогічно ярлику програми. Однак, на відміну від ярликів додатків, віджети можуть посилатися на певні області у зв'язаному додатку. Наприклад, якщо натиснути на повідомлення про отримання нового електронного повідомлення від віджету, можна запустити програму з вже вибраним новим повідомленням, а при натисканні « Створити новий електронний лист» вони можуть бути ComposeEmail безпосередньо в активність програми ComposeEmail.

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

Створити базу лояльних, активних користувачів

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

Мобільні користувачі - досить мінлива група, і зі зростанням пам'яті, доступною на вашому звичайному Android-смартфоні або планшеті, легко втратити відстеження програм, встановлених на вашому пристрої. Швидше за все, якщо ви візьмете свій Android-смартфон або планшет прямо зараз і проведете через панель програм, то ви виявите хоча б одну програму, про яку ви повністю забули.

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

Додавання віджету програми у ваш проект

Навіть найпростіший віджет вимагає кількох класів та ресурсів, але коли ви створюєте віджет за допомогою вбудованих інструментів Android Studio, всі ці файли створюються для вас. Оскільки немає сенсу робити розробку для Android більш складним, ніж потрібно, ми будемо використовувати ці інструменти, щоб отримати перевагу при створенні нашого віджету.

Віджет програми завжди повинен бути прив'язаний до базової програми, тому створіть новий проект Android з налаштуваннями на ваш вибір.

Як тільки Android Studio створить ваш проект, виберіть « Файл > Створити > Віджет > AppWidget на панелі інструментів "Android Studio". Це запускає меню Configure Component, де ви можете визначити деякі з початкових налаштувань віджету.

Більшість із цих варіантів досить очевидні, але є деякі, які варто вивчити докладніше.

Зміна розміру (API 12+)

Якщо розмір віджета можна змінити, користувач може збільшувати або зменшувати кількість «комірок», які він займає на робочому столі, довгим натисканням на віджет, а потім перетягуючи сині маркери, які з'являються навколо його контуру.

Скрізь, де можливо, ви повинні дати своєму віджету можливість змінювати розміри по горизонталі та вертикалі, оскільки це допоможе вашому віджету адаптуватися до ряду конфігурацій екрана та налаштувань домашнього екрану.Якщо у користувача серйозно перевантажений домашній екран, ваш віджет може навіть не поміститися на цьому домашньому екрані, якщо розмір віджету не змінюється.

Якщо ви хочете створити віджет без зміни розміру, відкрийте меню «Змінити розмір» і виберіть « Тільки по горизонталі» , « Тільки по вертикалі» або « Не змінювати розмір» .

Мінімальна ширина та висота

Мінімальна ширина та висота визначає кількість осередків, які ваш віджет спочатку займатиме при розміщенні на робочому столі.

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

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

Щоб збільшити шанси зручного розміщення віджету на ряді домашніх екранів, ніколи не рекомендується використовувати будь-що більше, ніж 4 на 4, для мінімальних значень ширини та висоти.

Хоча точна ширина і висота «комірки» домашнього екрану варіюються в залежності від пристрою, ви можете отримати приблизну оцінку того, скільки точок на дюйм (точок на дюйм) займатиме ваш віджет, використовуючи таку формулу:

Як створити інтерактивні віджети на iOS 17

5-9 червня 2023 року відбулася щорічна презентація Apple WWDC23, на якій було представлено багато цікавих новацій для iOS-розробників. Одну з таких фіч - інтерактивні віджети, ми розглянемо в цьому посібнику.

Можливість створювати віджети для програм на пристроях Apple з'явилася досить давно.Але досі основною метою віджетів було відображення актуальної інформації з програми та її запуск по натисканню. Такий обмежений функціонал вплинув падіння популярності даного елемента.

В iOS 17 реалізовано функціонал для створення інтерактивних віджетів. Тепер у них з'явилися елементи керування та анімації, віджет може сам виконувати деяку роботу без запуску основної програми. Грубо кажучи, оновлені віджети є невеликими окремими програмами, як AppClip.

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

Підготовка

Перед тим, як інтегрувати інтерактивні віджети до програми, необхідно підготуватися. Візьмемо за приклад невеликий додаток, який щодня відстежує кількість рідини, яку вживає людина.

Наприклад, на добу потрібно випивати в середньому 3 літри води, візьмемо це за цільове значення. Також зауважимо, що середній обсяг звичайної склянки становить 350 мл, отже, наш крок при додаванні запису – 350. Індикатор показує, на скільки відсотків ми виконали план поточного дня.

Щоб успішно обмінюватися даними з основним додатком, давайте створимо спільну так звану групу додатків.

У Xcode вибираємо наш проект, далі вибираємо таргет нашої програми, переходимо в Signing & Capabilities, тиснемо + Capability в лівому верхньому кутку:

Вибираємо App Groups, в полі натискаємо «+» і створюємо нову групу. За назву гурту ми взяли Bundle identifier основної програми з припискою group.

Ставимо галочку навпроти нашої нової групи. У цьому створення групи додатків завершено.

Спочатку при виборі нової групи вона може підсвічуватись червоним, не лякайтеся, зберіть програму, використовуючи Cmd+B, та зачекайте деякий час. Якщо все зроблено правильно, колір тексту знову стане білим.

Програма зберігає записи користувача на диску за допомогою UserDefaults. Це і буде нашою головною сполучною ланкою та джерелом актуальних даних, якими ми маніпулюватимемо за допомогою програми та віджету.

Але в цьому випадку наша програма та віджет повинні використовувати дані з одного загального контейнера групи додатків. Для цього замість стандартного синглтона standard необхідно використовувати наш контейнер групи додатків через ініціалізатор suitename:

/// Клас, керуючий базою даних програми final class UserDatabase

Додавання нового віджету

Тепер настав час створити віджет, для цього в Xcode йдемо в File -> New -> Target, і вибираємо "Widget Extension".

*У нашому прикладі ми не додавали Live Activity та Configuration Intent.

У нас створюється новий таргет та шаблонний код для віджету. Перше, що ми повинні зробити - це додати цей віджет в "App Groups" так само, як ми зробили з основним додатком.

Як використовувати файли з основної програми у розширенні.

Якщо ви хочете використовувати деякі структури або інші файли з основної програми, необхідно прив'язати потрібні файли до нового націлювання. Зробити це можна так:

Вибираємо потрібний файл у Xcode, розгортаємо праву панель управління та встановлюємо галочку навпроти потрібного таргета у розділі "Target Membership":

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

Bundle — це, по суті, наш головний контейнер віджету, який містить у собі всю інформацію.Також тут можна вказати кілька віджетів для програми. В даний момент нам не потрібно тут нічого налаштовувати, тому поки що пропустимо.

А ось далі вже цікавіше. Отже, Provider. Ця структура - це джерело даних, до якого буде звертатися система, коли їй потрібно буде запросити нові дані для віджету.

Метод placeholder() відповідає за дані, які будуть відображатися на віджеті під час першого показу, щоб дати користувачеві коротку інформацію про віджет. Важливо розуміти, що це синхронний метод, і дані потрібно повернути з нього якнайшвидше.

/// Варіант нашого віджету, коли він буде показаний вперше func placeholder(in context: Context) -> SimpleEntry

Метод getSnapshot() відповідає за надання віджету актуальних даних на момент першого показу, наприклад, у момент вибору віджету у галереї.

/// Актуальні дані віджету на разовий показ (Наприклад, у галереї віджетів) func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ())

Метод getTimeline() відповідає за надання віджету даних для відображення протягом певного часу. Це головний метод, який використовується для відображення даних на віджеті.

/// Варіанти даних нашого віджету в різні моменти часу func getTimeline(in context: Context, completion: @escaping (Timeline) -> ())

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

У всіх методах передачі даних ми готуємо структуру SimpleEntry , у якому упаковані всі необхідні параметри.Обов'язковий параметр — це date, який необхідний відповідності протоколу TimeLineEntry . По суті, це тимчасова мітка, яка вказує на те, в який момент даний об'єкт повинен буде використовуватися віджетом.

/// Дані для нашого віджету struct SimpleEntry: TimelineEntry

Переходимо до основного. (WidgetName) EntryView - це вже сам View нашого віджету на SwiftUI, в body ,за аналогією зі звичайною View структурою ми малюємо віджет під наші завдання.

При розробці рекомендується спиратися на гайдлайн від Apple для віджетів.

/// Тіло віджету struct TrackerWidgetEntryView: View < var entry: Provider.Entry var body: some View < HStack < Text("hello") Text("world") >> >

Сюди ми повернемося трохи пізніше, а поки що продовжимо.

Отже, сама структура з назвою нашого віджету – це її визначальний контейнер, який містить kind – ідентифікатор цього віджету. На відміну від стандартного View, тут body є типом WidgetConfiguration, і повернути ми повинні об'єкт, відповідний даному протоколу.

Загалом ми можемо створити кастомну конфігурацію, але в цьому посібнику ми зупинимося саме на готовій статичній конфігурації, цього буде достатньо для демонстрації.

/// Сам контейнер з віджетом, що містить у тому числі і налаштування нашого віджету struct TrackerWidget: Widget < let kind: String = "waterTrackerWidget" var body: some WidgetConfiguration TrackerWidgetEntryView(entry: entry) >.configurationDisplayName("Трекер води") // Ім'я в галереї.

Тепер повернемося до нашого EntryView. У body розписуємо те, як виглядатиме наш віджет, поки без кнопок. У нас є екземпляр класу SimpleEntry під назвою entry — це якраз наші упаковані дані, які ми маємо використовувати. У прикладі створимо аналогічний круглий індикатор заповнення денного плану рідини.

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

func addCup() < logEntry() // Додаємо запис до журналу updateWidget() // Оновлюємо віджет >func updateWidget() < // Ключовий рядок коду для форсованого оновлення віджету WidgetCenter.shared.reloadTimelines(ofKind: "waTra

На даному етапі ми маємо звичайнісінький віджет, який відображає індикатор і перекладає додаток по тапу на нього. Саме час розпочати додавання інтерактивності.

Додавання інтерактивності

Оскільки віджети працюють окремо від основної програми, навіть коли вона закрита, код виконується системою в іншому процесі, не пов'язаним з основним додатком. Для того, щоб виконати описаний у додатку код, нам необхідний спосіб надати будь-які дії через розширення системи, щоб вона могла їх виконати. Саме для вирішення цієї проблеми Apple надала новий механізм App Intents з використанням нового протоколу AppIntent. AppIntent — це протокол, що дозволяє визначати код дії, який може виконуватися системою. Це саме те, що нам потрібне.

Трохи про Intent'ах

Є схожі механізми на основі Intent, наприклад, для виконання дій у додатку через Siri, реалізація App Intents дозволить додатково розширити користувацькі можливості програми за рахунок доступу Siri та Shortcut до створених Intent повідомлень про дії.

Щоб використовувати новий механізм, ми створюємо додаткову структуру LogEntryIntent і після імпорту AppIntents, підписуємось під протокол AppIntent.

Для відповідності протоколу реалізуємо статичні змінні title і опис.

/// Структура, що описує дію при натисканні кнопки на віджеті, що викликає цю дію struct LogEntryIntent: AppIntent

Тепер нам необхідно реалізувати метод perform() , саме він відпрацьовуватиме, коли на кнопку віджету проводитиметься натискання.

func perform() async throws -> some IntentResult < let dataProvider = UserDatabase.self // Отримуємо наш клас для управління БД dataProvider.log() // Робимо запис в журнал return .result() // Повертаємо порожній результат >

Важливе зауваження: Також ми можемо визначити додаткові параметри для Intent. Для цього необхідно використовувати обгортку властивостей @Parameter. Збережені параметри без цієї обгортки система обробити не зможе.

/// Структура, що описує дію при натисканні кнопки на віджеті, що викликає цю дію struct LogEntryIntent: AppIntent

У нашому випадку цей метод отримуватиме актуальне значення для випитої води на поточну дату і збільшуватиме її на літраж одного стандартного гуртка, після чого збереже підсумкові дані в UserDefaults. Як значення, що повертається використовуємо порожній результат .result()

Важливе зауваження: після повернення з методу perform() , система гарантовано запитує нові таймлайни для відображення актуальної інформації у віджеті.

Тепер додамо інструменти для взаємодії з віджетом.На момент написання цієї статті у нас є два інструменти для отримання дій від користувача.

Дані інструменти отримали додатковий ініціалізатор із параметром intent, що приймає AppIntent об'єкт

/// Button(intent: , label: _#>) Button(intent: LogEntryDurationIntent()) < HStack(spacing: 2) < Text("+") .font(.system(size: 16)) .foregroundStyle( Palette.textColor) Image(systemName: "drop") .resizable() .frame(width: 10, height: 15) .foregroundStyle(Palette.textColor) >.padding(.horizontal) >.tint(Palette.indicatorColor)

Зверніть увагу, що кнопка на віджеті подається в напівпрозорому контейнері, ви можете керувати кольором цього контейнера через модифікатор .tint()

Тепер при взаємодії з цією кнопкою система запустить переданий Intent, який виконає наш код методом perform(). Цей метод є асинхронним, тому можлива затримка перед відображенням нових даних. Ви можете використовувати модифікатор .invalidateContent() у ваших View, які оновлюватимуться з додаванням до них системної анімації завантаження.

HStack(alignment: .bottom, spacing: 2) < Text(String(entry.percentValue)) .font(.system(size: 19, weight: .bold, design: .rounded)) .invalidatableContent() // Анімація при очікуванні отримання нового значення Text("%") .font(.system(size: 14, weight: .bold)) .padding(.bottom, 1) >.foregroundStyle(Palette.textColor)

Трохи про анімацію у віджетах

Віджети використовують інший підхід до анімації, на відміну від звичайного SwiftUI. При обробці нового entry система отримує параметри, які будуть змінені, анімує тільки їх. Тим не менш, ви можете використовувати всі транзитні анімації через модифікатор .transition()

Text("46") .font(.system(size: 16)) .contentTransition(.numericText()) // Анімація для numeric контенту

У демонстраційному додатку ми реалізували обидва інструменти взаємодії.На віджеті середнього розміру ми додали штучну затримку перед оновленням даних для того, щоб показати анімацію очікування оновлення з модифікатора .invalidateContent()

На цьому процес створення інтерактивного віджету завершено.

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

Дякуємо за увагу!