Вы разрабатываете свое приложение и вас не устраивает внешний вид стандартных кнопок и решили сделать свою. Рассмотрим наиболее простой случай создания кнопки с помощью картинок.
1. Рисование картинок для кнопок.
Для этих целей можно использовать бесплатный векторный редактор Inkscape. Сколько и каких картинок нам нужно? В начале определимся с состояниями кнопки. Кнопка может быть нажата или нет, иметь фокус или нет. Несколько состояний:
+ фокус, + нажата
+ фокус, – нажата
- фокус, + нажата
по умолчанию.
Изображения состояний кнопки готовы. Если мы применим одну из них к нашей кнопке на форме через свойство Backgroud, то увидим нечто похожее на следующее:
мы видим что изображение на кнопке растягивается неправильно. Для того что бы картинка растягивалась корректно, ее нужно преобразовать к специальному формату NinePatch.
2. Что такое NinePatch?
NinePatch – это графический формат растровых картинок которые Андроид будет автоматически растягивать в зависимости от размера виджета в котором она указана в качестве фонового рисунка. Если же проще, то NinePatch – это PNG картинка у которой добавлена рамка толщиной в один пиксель и файл сохранен с расширением .9.png. Все картинки кладутся в папку res/drawable/ вашего проекта. Рамка используется для определения области, которая будет растянута.
В поставке Android SDK, есть отдельная утилита для рисования полосок, находится она в папке sdk/tools/draw9patch. Запускаем ее, открываем картинку для нашей кнопки и дорисовываем рамку как показано на рисунке ниже:
Проделываем тоже самое с остальными картинками, которые мы поместим на кнопку. Копируем все три файла в папку вашего проекта /res/drawable
Замечание: нарисовать полоски можно в любом графическом редакторе поддерживающим png. Для эффекта нажатия кнопки, исходную картинку для нажатия сдвинуть на 1-2 пикселя вниз, но при этом все 3 картинки должны быть одного размера.
3. Как сделать, что бы на каждое событие отображалась соответствующая картинка?
Будем это делать через drawable xml. Создаем файл myb_states.xml в /res/drawable и описываем поведение кнопки:
<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 код кнопки:
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>
Все кнопка готова. Если есть вопросы, задавайте.
Исходный код, включая все картинки которые использовались в статье MyButtonWithPng.zip
by vovkab
Похожие новости
Нет похожих новостей.
Спасибо за статью. Оказалось так просто и не надо никакой код писать:)
Спасибо! Отличное руководство!