Kurs Android (13)
Autor: Damian Chodorek • Opublikowany: 13 sierpnia 2015 • Ostatnia aktualizacja: 30 listopada 2015 • Kategoria: android, kursy
Poprawne rozciąganie grafiki czyli NinePatch.
NinePatchDrawable
to rodzaj bitmapy, która będzie automatycznie rozciągnięta przez system Adnroid tak, aby pasowała do związanego z nią widoku. Taka grafika bardzo często jest używana jako tło różnych elementów, np. przycisków, które mogą zawierać zarówno krótki, jak i długi tekst.
Grafika NinePatch to zwykły obrazek z rozszerzeniem .png
, który zawiera dodatkową ramkę, szerokości 1px, posiada rozszerzenie .9.png
oraz znajduje się w katalogu res/drawable/
.
Dodatkowa ramka definiuje obszar, który może zostać użyty do rozciągnięcia grafiki. Część obrazu zostaje więc bez zmian, a część jest rozciągana tak, aby pasowała do rozmiarów widoku.
Przykład
Stwórz nowy projekt com.damianchodorek.kurs.android13
oraz layout zgodny z kodem poniżej.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.damianchodorek.kurs.android13.MainActivity" >
<Button
android:id="@+id/small_button"
android:layout_width="100dp"
android:layout_height="30dp"
android:background="@drawable/button_background"
android:padding="0dp"
android:text="niewielki tekst"
android:textSize="8sp" />
<Button
android:id="@+id/big_button"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@drawable/button_background"
android:padding="0dp"
android:text="OGROMNY I SZEROKI TEKST"
android:textSize="30sp" />
</LinearLayout>
Załóżmy, że tło przycisku wygląda następująco:
Obrazek pobierzesz klikając na ten link. Po uruchomieniu aplikacji wygląda ona następująco:
Doskonale widać, że zwykłe rozciąganie grafiki wygląda źle.
Stosujemy Draw 9-patch
Draw 9-patch to graficzne narzędzie do definiowania rozciągalnych obszarów grafiki. Znajduje się w folderze z SDK Androida w sdk/tools
. Ja program uruchamiam z konsoli poleceniem draw9patch
.
Otworzy się program, na obszar którego należy przeciągnąć plik z naszą grafiką.
Po lewej stronie mamy obszar edycji. Po prawej znajdują się różne wersje naszej grafiki po przeskalowaniu. Aby zdefiniować obszar rozciągania obrazu, należy narysować lewą i górną ramkę, poza obszarem grafiki, tak jak na obrazku poniżej.
Po zdefiniowaniu tych obszarów, przykłady po prawej stronie wyglądają o niebo lepiej. W programie Draw 9-patch można ustawić jeszcze swój własny padding poprzez definicję prawej i dolnej ramki. W naszym przykładzie nie będzie to potrzebne, ale przykład pokazuję na obrazku poniżej.
Po zdefiniowaniu lewej i górnej ramki zapisz grafikę w katalogu aplikacji res/drawable-mdpi
pod nazwą button_background
. Rozszerzenie .9.png
powinno zostać dodane automatycznie. Teraz nasza aplikacja wygląda znacznie lepiej.