Вы разрабатываете свое приложение и вас не устраивает внешний вид стандартных кнопок и решили сделать свою.  Рассмотрим наиболее простой случай создания кнопки с помощью картинок.

1. Рисование картинок для кнопок.

Для этих целей можно использовать бесплатный векторный редактор Inkscape. Сколько и каких картинок нам нужно? В начале определимся с состояниями кнопки. Кнопка может быть нажата или нет, иметь фокус или нет. Несколько состояний:

+ фокус, + нажата
+ фокус, — нажата
— фокус, + нажата
по умолчанию.

buttons


Изображения состояний кнопки готовы. Если мы применим одну из них к нашей кнопке на форме через свойство Backgroud, то увидим нечто похожее на следующее:

wrstretch

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

2. Что такое NinePatch?

NinePatch — это графический формат растровых картинок которые Андроид будет автоматически растягивать в зависимости от размера виджета в котором она указана в качестве фонового рисунка. Если же проще, то NinePatch — это PNG картинка у которой добавлена рамка толщиной в один пиксель и файл сохранен с расширением .9.png. Все картинки кладутся в папку res/drawable/ вашего проекта. Рамка используется для определения области, которая будет растянута.

ninepatch_raw

В поставке Android SDK, есть отдельная утилита для рисования полосок, находится она в папке sdk/tools/draw9patch. Запускаем ее, открываем картинку для нашей кнопки и дорисовываем рамку как показано на рисунке ниже:

drawninepatch

Проделываем тоже самое с остальными картинками, которые мы поместим на кнопку. Копируем все три файла в папку вашего проекта /res/drawable

resdrawable

Замечание: нарисовать полоски можно в любом графическом редакторе поддерживающим png. Для эффекта нажатия кнопки, исходную картинку для нажатия сдвинуть на 1-2 пикселя вниз, но при этом все 3 картинки должны быть одного размера.

3. Как сделать, что бы на каждое событие отображалась соответствующая картинка?

Будем это делать через drawable xml. Создаем файл myb_states.xml в /res/drawable и описываем поведение кнопки:

<?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/myb_focused" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="@drawable/myb_active" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="@drawable/myb_active" />
<item android:drawable="@drawable/myb_inactive" />
</selector>

Далее нашей кнопке (которая на форме) в качестве фонового рисунка указываем нашу созданную xml. То есть свойство Background кнопки устанавливаем в @drawable/myb_states.
Xml код кнопки:

<Button android:id="@+id/Button01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_margin="30px"
android:layout_gravity="center_horizontal" android:text="Своя кнопка"
android:textColor="#fff" android:background="@drawable/myb_states"></Button>

mybtnpng

Все кнопка готова. Если есть вопросы, задавайте.

Исходный код, включая все картинки которые использовались в статье MyButtonWithPng.zip

by vovkab

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong
by vovkab Комментириев (8) »
Рубрики: Статьи | Метки: , ,

8 Комментириев в теме “Как создать свою кнопку с помощью картинок?”

  1. Евгений:

    Спасибо за статью. Оказалось так просто и не надо никакой код писать:)

  2. Anton:

    Спасибо! Отличное руководство!

  3. Спасибо.
    Гора с плеч свалилась.

  4. Екатерина:

    Спасибо, замечательная статья! Очень помогла, не думала что все так просто =)

  5. FrostFT:

    1 из немногих примеров, который работает. Спс!

  6. […] http://androidteam.ru/dev/particles/android-dev-making-button-with-png.html#more-2955 Запись опубликована в рубрике Разное с метками разное, рисование. Добавьте в закладки постоянную ссылку. ← Тесты по мобильным технологиям Андроид + Много объектов в OpenGL → […]

  7. Владимир:

    А как сделать чтобы так чтобы (нажал-отпустил) на кнопку — картинка поменялась, снова (нажал-отпустил) поменялась обратно?

  8. Александр:

    Спасибо. Очень хорошая статья, всё объяснили, и как нарисовать кнопки, и как перевести в нормальный формат, и как их использовать. Долго искал эту информацию. Ещё раз спасибо!:)


Оставить комментарий

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