Старый 27.03.2009, 15:08   #1
vovkab
Administrator
 
Регистрация: 22.10.2008
Сообщений: 578
vovkab is on a distinguished road
По умолчанию Как создать свою кнопку с помощью картинок?

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

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
vovkab вне форума   Ответить с цитированием
Старый 30.03.2009, 20:38   #2
vovkab
Administrator
 
Регистрация: 22.10.2008
Сообщений: 578
vovkab is on a distinguished road
По умолчанию

чего не хватает или что не так? пишите в комментариях.
vovkab вне форума   Ответить с цитированием
Старый 05.06.2010, 14:36   #3
anton.derevyanko
Junior Member
 
Регистрация: 05.06.2010
Сообщений: 1
anton.derevyanko is on a distinguished road
Thumbs up

Спасибо! Отлично описан пример. Очень много подобного на английском, но на русском, как-то яснее, наверняка
anton.derevyanko вне форума   Ответить с цитированием
Старый 27.01.2011, 21:48   #4
Veremeev_Nikita
Junior Member
 
Регистрация: 27.01.2011
Адрес: Россия
Сообщений: 1
Veremeev_Nikita is on a distinguished road
Отправить сообщение для Veremeev_Nikita с помощью ICQ
По умолчанию

Топик вверх
Veremeev_Nikita вне форума   Ответить с цитированием
Ответ

Социальные закладки

Опции темы
Опции просмотра

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 12:37. Часовой пояс GMT +3.