Сьогодні складно уявити собі Android-пристрій без віджетів. Вони з'явилися в Android 1.5 і були сильно перероблені в Android 3.0 і 3.1. Віджети служать для швидкого доступу до інформації додатки, керують функціями програми без входу в нього і можуть бути налаштовані індивідуально під користувача.
Простота використання віджетів і їх популярність привели до зростання попиту на розробку кастомізованих віджетів під Android програми. Однак реалізація віджетів не так проста, як може здатися на перший погляд.
Умовно віджети можна розділити на три основні типи:
Інформаційні: надають найактуальнішу інформацію про стан програми. До цього типу належать віджети погоди, годинника, котирувань валют і інші.
Віджети-списки: служать для відображення колекцій однотипної інформації. Наприклад, список листів, новин або список справ на поточний день.
Віджети управління: забезпечують швидкий доступ до часто використовуваних функцій програми, щоб користувач здійснював необхідні дії безпосередньо на головному екрані пристрою, не запускаючи додаток.
Більшість віджетів відносяться до комбінованого типу, тобто поєднують в собі елементи кожного з перерахованих пунктів. Але це не скасовує складнощів, які можуть проявитися в процесі їх реалізації.
На прикладі нашого недавнього проекту ми покажемо вам, як реалізувати Android віджет під конкретні вимоги клієнта і подолати проблеми, що виникають під час розробки.
Від одного з постійних клієнтів Azoft - компанії Новотелеком (інтернет-провайдера «Електронне місто») - надійшов запит на розробку програми «Особистий кабінет». Додаток призначений для користувачів інтернет-провайдера. З його допомогою можна дізнаватися баланс рахунку, поповнювати його, активувати відстрочку платежу, а також підключати нові опції, змінювати тарифний план та багато іншого.
В рамках проекту було завдання по реалізації віджета для додатка.
Створення віджета передбачало виконання таких вимог:
- Віджет повинен відображати актуальні дані рахунки і показувати час останнього оновлення.
- На віджеті повинні розташовуватися 2 кнопки: перехід до вікна установок і примусове оновлення за запитом користувача.
- У ньому повинен бути реалізований екран конфігурації з можливістю установки часу поновлення даних особового рахунку та зміни прозорості віджета.
Основною трудністю під час виконання завдання для нас виявилася коректна настройка функцій віджета під різні Android-пристрої і орієнтації екранів.
Реалізація
При реалізації Android-віджетів розробнику завжди доводиться оперувати чотирма ключовими інструментами:
- Файл метаданих. Описує загальні налаштування віджета і включає в себе всі частини віджету, такі як файл розмітки і клас для екрану конфігурації.
- Клас провайдера. Тут реалізуються методи обробки подій віджета, такі як додавання віджету на екран, зміна, видалення з екрану і інші.
- Файл розмітки віджета. Показує то, як віджет виглядає на головному екрані.
- Вікно установок віджета. З'являється відразу ж після переміщення віджета на головний екран.
Подробиці реалізації описані на developer.android.com. тут же ми розповідаємо тільки про питання відображення віджета, які нас найбільше зачепили.
Коли ми приступили до створення першого прототипу віджета, то зіткнулися з двома проблемами.
По-перше, осередки екранів мобільних пристроїв мають різні габарити при вертикальній і горизонтальній орієнтації. Тобто, сама осередок витягнута вертикально і при зміні орієнтації екрану змінює свій розмір. Через це віджет при горизонтальному розташуванні пристрою просто розтягується по всій доступній йому області осередків. Це відбувалося і з нашим віджетом, коли був створений перший прототип.
По-друге, віджет виконується в іншому процесі, тому для його відображення використовується клас RemoteViews, для якого доступні лише деякі класи View, і навіть похідні від них не можна використовувати. В результаті можна перевантажити ImageView і всередині обчислювати пропорції фону.
Переконавшись в тому, що стандартним підходом створити віджет не вийде, ми стали шукати рішення для приведення віджета у відповідність з бажаним дизайном:
Через те, що краю фону округлені, можна було використовувати або png, або shape. Зупинилися на png.
У дизайні віджет був зображений горизонтально, а осередки на пристроях Android - вертикальні. Щоб зберегти пропорції віджета, ми жорстко поставили висоту і ширину для лейаута. А для того, щоб на всіх девайсах віджет був відповідного розміру, розмітку віджета довелося вказати для кількох дозволів.
Прозорість фону змінюється динамічно і залежить від налаштувань віджета. Щоб змінити об'єкт RemoteViews, у віджета є методи setInt, setFloat, setBitmap і інші, куди в якості параметрів передаються ідентифікатор View, назва методу і параметр для цього методу.
Наступним кроком для установки фону ми використовували метод setBitmap:
Для зміни прозорості фону ми спочатку попиксельно міняли альфу у Bitmap, а потім підставляли її на бекграунд.
Робота з альфою
Спочатку ми просто замінювали прозорість png на необхідну. Тобто, всього зображення виставлялася альфа, рівна 1, в результаті чого кути придбали чорний колір.
Потім ми вирішили міняти альфу тільки непрозорим пікселям. Однак кути вийшли гострими, з стирчать по краях пікселями, тому що в png згладжена кутів досягається пікселями з різною альфою.
Тоді вирішили вдатися до чергового поліпшенню - міняти альфу тільки для пікселів з більшою видимістю, ніж поточна альфа. Це дозволило зберегти альфу у пікселів з більшою прозорістю, які і забезпечують гладкий вид кутів.
Після декількох спроб поставити прозорість за допомогою альфи, ми нарешті отримали бажаний вид віджета:
З урахуванням вертикальної орієнтації осередків в Android, сам віджет зайняв більше місця, ніж його видима частина. Тобто для користувача відображається тільки картинка певного розміру.
Звичайно, цей спосіб поставив перед нами певні рамки: щоб віджет виглядав максимально нативної, нам довелося під кожен розмір створювати окремий лейаут. Однак запропоноване нами рішення дозволяє обійти властиві віджетів обмеження, а значить, виконує своє завдання.
layout = button_countshow_faces = truewidth = 450action = likecolorscheme = lightheight = 21locale = en_US "style =" border: none; overflow: hidden; width: 90px; height: 21px; "class =" alignright ">