Как сделать google прозрачным

Добавлено: 15.08.2017, 18:49 / Просмотров: 92185

Реализация Android виджетов: дизайн, пропорции, прозрачность

Сегодня сложно представить себе Android-устройство без виджетов. Они появились в Android 1.5 и прозрачным были сильно переработаны в Android 3.0 и 3.1. Виджеты служат для быстрого доступа к информации приложения, управляют функциями приложения без входа в него и могут быть настроены индивидуально под пользователя.

Простота использования виджетов и их популярность привели к росту спроса на разработку кастомизированных виджетов под Android приложения. Однако реализация виджетов не так легка, как может показаться на первый взгляд.

Условно виджеты можно разделить на три основных типа:

Три основных типа Android виджетов

  • Информационные: предоставляют самую актуальную информацию о состоянии приложения. К этому типу относятся виджеты погоды, часов, котировок валют и другие.

  • Виджеты-списки: служат для отображения коллекций однотипной информации. Например, список писем, новостей или список дел на текущий день.

  • Виджеты управления: обеспечивают быстрый доступ к часто используемым функциям приложения, чтобы пользователь совершал необходимые действия непосредственно с главного экрана устройства, не запуская приложение.

Большинство виджетов относятся к комбинированному типу, т.е. сочетают в себе элементы каждого из перечисленных пунктов. Но это не отменяет сложностей, которые могут проявиться в процессе их реализации.

На примере нашего недавнего проекта мы покажем вам, как реализовать Android виджет под конкретные требования клиента и преодолеть как сделать google прозрачным проблемы, возникающие во время разработки.

Задача

От одного из постоянных клиентов Azoft – компании Новотелеком (интернет-провайдера «Электронный город») – поступил запрос на разработку приложения «Личный кабинет». Приложение предназначено для пользователей интернет-провайдера. С его помощью можно узнавать баланс счёта, пополнять его, активировать отсрочку платежа, а также подключать новые опции, менять тарифный план и многое другое.

В рамках проекта была задача по реализации виджета для приложения.

Создание виджета для приложения

Создание виджета предполагало выполнение следующих требований:

  • Виджет должен отображать актуальные данные счета и показывать время последнего обновления.
  • На виджете должны располагаться 2 кнопки: переход на экран настроек и принудительное обновление по запросу пользователя.
  • В нём должен быть реализован экран конфигурации с возможностью установки времени обновления данных лицевого счета и изменения прозрачности виджета.

Основной трудностью во время выполнения задачи для нас оказалась корректная настройка функций виджета под разные Android-устройства и ориентации экранов.

Реализация

При реализации Android-виджетов разработчику всегда приходится оперировать четырьмя ключевыми инструментами:

  • Файл метаданных. Описывает общие настройки виджета и включает в себя все части виджета, такие как файл разметки и класс для экрана конфигурации.
  • Класс провайдера. Здесь реализуются методы обработки событий виджета, такие как добавление виджета на экран, изменение, удаление с экрана и другие.
  • Файл разметки виджета. Показывает то, как виджет выглядит на главном экране.
  • Экран настроек виджета. Появляется сразу же после перемещения виджета на главный экран.

Подробности реализации описаны на developer.android.com, здесь же мы рассказываем только о вопросах отображения виджета, которые нас больше всего зацепили.

Когда мы приступили к созданию первого прототипа виджета, то столкнулись с двумя проблемами.

Во-первых, ячейки экранов мобильных устройств имеют разные габариты при вертикальной и горизонтальной ориентации. То есть, сама ячейка вытянута вертикально и при изменении ориентации экрана меняет свой размер. Из-за этого виджет при горизонтальном расположении устройства просто растягивается по всей доступной ему области ячеек. Это происходило и с нашим виджетом, когда был создан первый прототип.

Изменение габаритов ячейки виджета

Во-вторых, виджет выполняется в другом процессе, поэтому для его отображения используется класс RemoteViews, для которого доступны только некоторые классы View, и даже производные от них нельзя использовать. В результате нельзя перегрузить ImageView и внутри вычислять пропорции фона.

Убедившись в том, что стандартным подходом создать виджет не получится, мы стали искать решение для приведения виджета в соответствие с желаемым дизайном:

  1. Из-за того, что края фона скругленные, можно было использовать либо png, либо shape. Остановились на png.

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

  2. Прозрачность фона меняется динамически и зависит от настроек виджета. Чтобы изменить объект RemoteViews, у виджета есть методы setInt, setFloat, setBitmap и другие, куда в качестве параметров передаются идентификатор View, название метода и параметр для этого метода.

  3. Следующим шагом для установки фона мы использовали метод setBitmap:

    views.setBitmap(R.id.iv_widget_background, "setImageBitmap", newBitmap);

    Для изменения прозрачности фона мы сначала попиксельно меняли альфу у Bitmap, а потом подставляли ее на бэкграунд.

Работа с альфой

Сначала мы просто заменяли прозрачность png на необходимую. То есть, всему изображению выставлялась альфа, равная 1, в результате чего углы приобрели чёрный цвет.

pixel = pixels[index]; A = alpha; R = Color.red(pixel); G = Color.green(pixel); B = Color.blue(pixel); pixels[index] = Color.argb(A,R,G,B);

Работа с альфа 1

Затем мы решили менять альфу только непрозрачным пикселям. Однако углы получились острыми, с торчащими по краям пикселями, потому что в png сглаженность углов достигается пикселями с разной альфой.

pixel = pixels[index]; A = Color.alpha(pixel); if (A > 0) { A = alpha; } R = Color.red(pixel); G = Color.green(pixel); B = Color.blue(pixel); pixels[index] = Color.argb(A,R,G,B);

Работа с альфа 2

Тогда решили прибегнуть к очередному улучшению – менять альфу только для пикселей с большей видимостью, чем текущая альфа. Это позволило сохранить альфу у пикселей с большей прозрачностью, которые и обеспечивают гладкий вид углов.

pixel = pixels[index]; A = Color.alpha(pixel); if (A > alpha) { A = alpha; } R = Color.red(pixel); G = Color.green(pixel); B = Color.blue(pixel); pixels[index] = Color.argb(A,R,G,B);

Работа с альфа 3

Результат

После нескольких попыток задать прозрачность с помощью альфы, мы наконец-то получили желаемый вид виджета:

Результат Android Widget

С учётом вертикальной ориентации ячеек в Android, сам виджет занял больше места, чем его видимая часть. То есть для пользователя отображается только картинка определенного размера.

Конечно, этот способ поставил перед нами определенные рамки: чтобы виджет выглядел максимально нативно, нам пришлось под каждый размер создавать отдельный лейаут. Однако предложенное нами решение позволяет обойти присущие виджетам ограничения, а значит, выполняет свою задачу.

Комментарии

комментарии


Источник: http://www.azoft.ru/blog/realizacia-android-widgets/


Закрыть ... [X]

Можно ли у блока объявлений Google сделать прозрачным фон Ручная ножовка своими руками


Как сделать google прозрачным Изменение прозрачности рисунка - Служба поддержки Office
Как сделать google прозрачным Приложения в Google Play Custom ICS Search Widget
Как сделать google прозрачным Прозрачный фон в google adsense - Pr-Cy
Как сделать google прозрачным Google Старт (Google Now Launcher) - 4PDA
Как сделать google прозрачным Багажник на крышу VOLKSWAGEN Passat (B3) Sedan
Более 25 лучших идей на тему «Игровые домики для детей» на Дачный туалет своими руками. Как сделать туалет на даче Домашнее мороженое - рецепты с фото на Повар. ру Как в Androide изменить язык оформления, язык ввода и языки Как сделать картинку уникальной - 5 способов. Крушение мифов!