Зовнішній вид нашої кнопки бажає кращого. Сьогодні ми трохи над нею попрацюємо.
Є у нас така-собі звичайна кнопка, нічим не примітна, ніяк не виділяється. Виглядає ось так:
А описана ось так:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/Play"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:onClick="pause"
android:layout_centerHorizontal="true"
/>
Трохи видозмінимо її. Для початку додамо декілька ресурсів: розмір тексту в файл dimens.xml і сам текст, якщо він у вас ще не там в strings.xml.
<dimen name="btnTextSize">24sp</dimen>
<string name="Play">Play</string>
Завантажимо декілька зображень. Перше переіменовуємо на rama.9.png. Це особливий тип зображень nine-patch drawable, що може змінювати свою форму відносно зображення, тобто розтягуватися в залежності від потреб, зазвичай використовується як фон. Саме так ми його і будемо використовувати. Зберегти це зображення необхідно в одну з папок drawable.
Наступне зображення помістимо в drawable-hdpi і назвемо його musicico.png.
<Button
android:background="@drawable/rama" посилання на ресурс рамки
android:drawableLeft="@drawable/musicico" посилання на ресурс іконки
android:textStyle="italic|bold"
android:textSize="@dimen/btnTextSize"
android:gravity="center|center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/Play"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:onClick="pause"
android:layout_centerHorizontal="true"
/>
Задамо відступ в нашому RelativeLayout щод кнопка не зливалася з краями екрану і все не виглядало так дико і потворно.
android:padding="6dp"
dp - Density-independent pixel міра що задає однакове маштабування на різних пристроях, заснована на тому ж відношенні діагоналі і роздільної здатності. Звичайно, ми може вказати px (pixel) але тоді на кожному пристрої буде різний відступ. На одних пристроях замалий, а на інших завеликий.
Вже не погано, але можна краще. Кнопка може бути "не натиснутою", "натиснутою", і "в фокусі" (натиснутою в даний момент, коли ви тримаєте на ній палець). Але біда в тому, що ми не можемо в тексті одної кнопки вказувати background декілька разів. Отже доведеться створити окремий файл background для кнопки.
В папці drawable створимо файл button_background.xml. res->new->android resourse file тип drawable, кореневий ресурс - selector.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/pressed" android:state_pressed="true" />
<item android:drawable="@drawable/infocus" android:state_focused="true" />
<item android:drawable="@drawable/rama" />
</selector>
і точно те ж саме зробимо для іконки
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/musicico_inv" android:state_pressed="true" />
<item android:drawable="@drawable/musicico" />
</selector>
Текст залишається чорним і не читається не темному фоні. Зробимо файл-ресурс і для кольору. why not?
В каталог color додаємо файл text_color.xml з таким вмістом.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/white" android:state_pressed="true" />
<item android:color="#484848" />
</selector>
Кнопка виглядає так:
<Button
android:textColor="@color/text_color"
android:background="@drawable/button_background"
android:drawableLeft="@drawable/button_image"
android:textStyle="italic|bold"
android:textSize="@dimen/btnTextSize"
android:gravity="center|center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/Play"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:onClick="pause"
android:layout_centerHorizontal="true"
/>
Вийшло багатувато тексту. А якщо трба зробити 10 таких кнопок? Ну його в баню стільки писати. Перенесемовесь цей непотріб в стиль.
Після таких маніпуляцій текст кнопки скоручується до невпізнанності.
<Button
android:text="@string/Play"
android:id="@+id/button"
android:onClick="pause"
style="@style/btn_style" />
Все що можна ми винесли до стилю.
<style name="btn_style">
<item name="android:textColor">@color/text_color</item>
<item name="android:background">@drawable/button_background</item>
<item name="android:drawableLeft">@drawable/button_image</item>
<item name="android:textStyle">italic|bold</item>
<item name="android:textSize">@dimen/btnTextSize</item>
<item name="android:gravity">center|center_vertical</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_below">@+id/imageView</item>
<item name="android:layout_centerHorizontal">true</item>
</style>
і отже при додаванні наступної подібної кнопки нам не треба писати все занова, просто додамо
style="@style/btn_style"
і все готово.
Да прибуде з вами сила.
Є у нас така-собі звичайна кнопка, нічим не примітна, ніяк не виділяється. Виглядає ось так:
А описана ось так:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/Play"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:onClick="pause"
android:layout_centerHorizontal="true"
/>
Трохи видозмінимо її. Для початку додамо декілька ресурсів: розмір тексту в файл dimens.xml і сам текст, якщо він у вас ще не там в strings.xml.
<dimen name="btnTextSize">24sp</dimen>
<string name="Play">Play</string>
sp — Scale-independent Pixels одиниця виміру, що основана на відношенні діагоналі екрану до його роздільної здатності та на системних налаштуваннях розміру шрифту.
<Button
android:textStyle="italic|bold" курсив
android:textSize="@dimen/btnTextSize" посилання на ресурс розміру шрифту
android:gravity="center|center_vertical" положення тексту зліва, вертикально по центру
android:layout_width="match_parent" заповнити "предка"
android:layout_height="wrap_content" розмір відносно вмісту кнопки
android:text="@string/Play" посилання на ресурс тексту
android:id="@+id/button" створення посилання на кнопку
android:layout_below="@+id/imageView" знизу відносно зображення
android:onClick="pause" виклик методу після натискання
android:layout_centerHorizontal="true" розміщення горизонтально посередині
/>
Завантажимо декілька зображень. Перше переіменовуємо на rama.9.png. Це особливий тип зображень nine-patch drawable, що може змінювати свою форму відносно зображення, тобто розтягуватися в залежності від потреб, зазвичай використовується як фон. Саме так ми його і будемо використовувати. Зберегти це зображення необхідно в одну з папок drawable.
Наступне зображення помістимо в drawable-hdpi і назвемо його musicico.png.
<Button
android:background="@drawable/rama" посилання на ресурс рамки
android:drawableLeft="@drawable/musicico" посилання на ресурс іконки
android:textStyle="italic|bold"
android:textSize="@dimen/btnTextSize"
android:gravity="center|center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/Play"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:onClick="pause"
android:layout_centerHorizontal="true"
/>
Задамо відступ в нашому RelativeLayout щод кнопка не зливалася з краями екрану і все не виглядало так дико і потворно.
android:padding="6dp"
dp - Density-independent pixel міра що задає однакове маштабування на різних пристроях, заснована на тому ж відношенні діагоналі і роздільної здатності. Звичайно, ми може вказати px (pixel) але тоді на кожному пристрої буде різний відступ. На одних пристроях замалий, а на інших завеликий.
Вже не погано, але можна краще. Кнопка може бути "не натиснутою", "натиснутою", і "в фокусі" (натиснутою в даний момент, коли ви тримаєте на ній палець). Але біда в тому, що ми не можемо в тексті одної кнопки вказувати background декілька разів. Отже доведеться створити окремий файл background для кнопки.
В папці drawable створимо файл button_background.xml. res->new->android resourse file тип drawable, кореневий ресурс - selector.
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/pressed" android:state_pressed="true" />
<item android:drawable="@drawable/infocus" android:state_focused="true" />
<item android:drawable="@drawable/rama" />
і точно те ж саме зробимо для іконки
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/musicico_inv" android:state_pressed="true" />
<item android:drawable="@drawable/musicico" />
</selector>
Текст залишається чорним і не читається не темному фоні. Зробимо файл-ресурс і для кольору. why not?
В каталог color додаємо файл text_color.xml з таким вмістом.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/white" android:state_pressed="true" />
<item android:color="#484848" />
</selector>
Кнопка виглядає так:
<Button
android:textColor="@color/text_color"
android:background="@drawable/button_background"
android:drawableLeft="@drawable/button_image"
android:textStyle="italic|bold"
android:textSize="@dimen/btnTextSize"
android:gravity="center|center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/Play"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:onClick="pause"
android:layout_centerHorizontal="true"
/>
Вийшло багатувато тексту. А якщо трба зробити 10 таких кнопок? Ну його в баню стільки писати. Перенесемо
Після таких маніпуляцій текст кнопки скоручується до невпізнанності.
<Button
android:text="@string/Play"
android:id="@+id/button"
android:onClick="pause"
style="@style/btn_style" />
Все що можна ми винесли до стилю.
<style name="btn_style">
<item name="android:textColor">@color/text_color</item>
<item name="android:background">@drawable/button_background</item>
<item name="android:drawableLeft">@drawable/button_image</item>
<item name="android:textStyle">italic|bold</item>
<item name="android:textSize">@dimen/btnTextSize</item>
<item name="android:gravity">center|center_vertical</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_below">@+id/imageView</item>
<item name="android:layout_centerHorizontal">true</item>
</style>
і отже при додаванні наступної подібної кнопки нам не треба писати все занова, просто додамо
style="@style/btn_style"
і все готово.
Да прибуде з вами сила.
.jpg)
