Kurs Android (13)

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.

część 14