kfv Feb 19 2011 at 18:35

Подсвечиваемый виджет в Android

5 min

19K

Здравствуйте, уважаемые хабражители. В данной статье описывается процесс создания «подсвечиваемого» виджета, то есть виджета, который можно выделить с помощью пятипозиционного манипулятора D-Pad, присутствующего во многих Android-устройствах в виде трекболов или кнопок. Эта статья ориентирована на подготовленного читателя, уже написавшего свой первый «Android hello, world». Думаю, не стоит рассказывать о преимуществах управления аппаратными клавишами на устройствах с ёмкостным экраном в холодное время года, так что сразу приступим к делу.

Файл конфигурации виджета

Начнем с файла конфигурации виджета widget.xml, создадим его в поддиректории res/xml/ вашего проекта.

<?xml version="1.0" encoding="utf-8" ?> <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:minWidth="72dip" android:minHeight="72dip" android:focusable="true" android:updatePeriodMillis="0" android:initialLayout="@layout/widget" /> * This source code was highlighted with Source Code Highlighter.

Атрибуты android:minWidth и android:minHeight отвечают за размеры виджета, android:updatePeriodMillis за то, как часто будет обновляться виджет, в конкретном случае обновление нам не требуется, android:initialLayout — указывает на то, какой интерфейс Activity будет использоваться для виджета. Нам же интересен атрибут android:focusable, который, как ясно из названия, позволяет или запрещает фокусировать курсор на элементах виджета.

Макет виджета

Виджет будет состоять из иконки и подписи под ней, оба элемента будут нажимаемыми и подсвечиваемыми.

res/layout/widget.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="72dip" android:layout_height="72dip" android:orientation="vertical"> <ImageView android:id="@+id/icon" android:layout_width="48dip" android:layout_height="48dip" android:clickable="true" android:focusable="true" android:src="@drawable/icon" android:background="@drawable/icon_background" android:layout_gravity="center" /> <LinearLayout android:id="@+id/label" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="22dip" android:orientation="vertical" android:clickable="true" android:focusable="true" android:background="@drawable/label_background" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/label" android:textSize="13sp" android:textColor="#ffffff" /> </LinearLayout> </LinearLayout> * This source code was highlighted with Source Code Highlighter.

Тут стоит обратить внимание на атрибут android:background у иконки и подписи. Этот параметр, как можно догадаться, позволяет поместить на задний план объекта фоновое изображение или цвет, в данном случае он указывает на файлы, в которых описаны правила подсветки элементов.

Правила подсветки

«Правилами подсветки» я назвал StateListDrawable, инструмент, применяемый для изменения фона объекта в зависимости от его состояния. Правила содержаться в тегах item, атрибуты android:state_focused (объект в фокусе) и android:state_pressed (объект нажат) — это условия при которых будет устанавливаться фоновое изображение, android:drawable указывает на ресурс, который будет использоваться в качестве фона.

res/drawable/icon_background.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/icon_shadow" /> <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/icon_shadow" /> <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/icon_shadow" /> </selector> * This source code was highlighted with Source Code Highlighter.

В правилах подсветки иконки мы видим три правила, которые можно озвучить так:

подсвечивать, если иконка выделена, но не нажата;
подсвечивать, если выделена и нажата;
подсвечивать, если нажата, но не выделена.

res/drawable/label_background.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/label_shadow" /> <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/label_shadow" /> <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/label_shadow" /> <item android:drawable="@drawable/label" /> </selector> * This source code was highlighted with Source Code Highlighter.

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

Заключение

Теперь нам осталось только уложить ресурсы в директорию res/drawable и составить Manifest:

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.selectdroid" android:versionCode="1" android:versionName="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <receiver android:name=".Widget" android:label="@string/app_name"> <intent-filter> <action android:name="android.appwidget.action.APPWIDGET_UPDATE" /> </intent-filter> <meta-data android:name="android.appwidget.provider" android:resource="@xml/widget" /> </receiver> </application> </manifest> * This source code was highlighted with Source Code Highlighter.

После компиляции и запуска мы получим вот такой вот виджет:

Всем спасибо за внимание. Надеюсь, что эта статья будет кому-то полезной.

При написании статьи использовалась документация с developer.android.com.
Исходный код прототипа виджета можно скачать здесь.
Скомпилированый apk здесь.

Tags:

Hubs:

Development for Android