MójDroid.pl

#13 Twórz aplikacje na Androida z Mojdroid.pl - obrazy (część druga, 9-Patch)

2012-09-26
|
Damian P.

ImageView i wbud0wane w niego skalowanie obrazów to nie jedyne funkcje Androida dotyczące grafik. Sporo plików z rozszerzeniem JPG lub PNG to tak zwane 9-patche, które odpowiadają (głównie) za tworzenie własnego tła, różnego wyglądu przycisków i tym podobnych elementów. Dziś pokażę wam jak wykorzystać ten dodatek to tworzenia własnych elementów, zamiast korzystania z tych oryginalnych w Androidzie.
Informacja: Nie radzisz sobie z kodem? Coś Ci nie wychodzi lub nie działa? Zgubiłeś się? W tym miejscu zobaczysz pełen kod aplikacji, a tutaj go pobierzesz na dysk.

1. 9-patch, definicja i teoria

9-patch to specyficznie stworzony obrazek - przy krawędziach zawiera informacje (w postaci czarnych pasów) dotyczące skalowania i wypełniania tła, na którym jest umieszczony, a wewnątrz właściwą, bardzo małą grafikę tego co ma przestawiać. Na dodatek format pliku nieco różni się od zwykłej fotografii: pliki będące 9-patchami zapisujemy z końcówką .9.png. Tylko taką, bo zawiera on również opcję przeźroczystości, która jest tutaj bardzo ważna. Tak dokładnie prezentuje się dobrze przygotowany 9-patch. Zasada działania jest bardzo prosta: znaczniki (czarne linie, i tylko takie!) na górze i po lewej stronie wyznaczają skalowanie, te po prawej i na dole - wypełnianie tła. Oczywiście przy samym renderowaniu tego typu grafiki czarne pasy są usuwane. Pod warunkiem oczywiście, że będą one mieć szerokość jednego piksela (to oznacza, że możemy mieć np. czarny przycisk, ale boczne 1px ramki będą nadal wyznaczać odpowiednie obszary). Na powyższym przykładzie można zauważyć również, że czarne ramki nie zajmują całej szerokości dostępnego obszaru. Tam gdzie nie ma tych linii, grafika nie będzie skalowana. PS. Czasami jednak wypełnienie ramek w całości czarnym kolorem powoduje błędy, wtedy zostawcie nieco wolnego obszaru w kątach. Przejdźmy do przykładów. Na powyższym obrazku zaznaczyliśmy, że nasz 9-patch może jedynie się skalować. Lewa strona oznacza oczywiście wysokość, góra - szerokość. Użycie takiego pliku w aplikacji spowoduje, że otrzymamy przycisk jednakowy w każdym wyglądzie. Nasze rogi będą ostre, a środek - odpowiednio rozciągnięty. Ważne jest tutaj oczywiście zachowanie umiaru, centralna część 9.png powinna być tak skonstruowana, aby dobrze się skalowała (tak jak wyżej, samo tło i linia - to będzie dobrze wyglądać). PS. Uwaga! 9-patche skalują się jedynie w górę! Twórzcie jak najmniejsze pliki! Wypełnienie - prosta sprawa. Linie po prawej stronie i na dole wyznaczają kwadratowy obszar, w którym inne elementy mogą się znajdować. Może to być tekst lub cały layout, bo 9-patche stosuje się również w tłach. Tam gdzie nie ma czarnej kreski, tam nic nie może zostać dodane. PS. Nie ufajcie temu do końca, 9-patche jednak powinny być stosowane do prostych rzeczy, więc czasami coś może wyjść nie tak.

3. Praktyka

Zobaczmy jak 9-patch sprawdza się w prawdziwej aplikacji. Stwórzmy nowe Activity oraz layout. W nim jeden button oraz LinearLayout o szerokości na przykład 100 dp. Coś takiego:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:layout_height="fill_parent" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nasz przycisk" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>
Teraz uruchommy nasz program graficzny i stwórzmy prosty przycisk oraz tło. Ja mam coś takiego: Jak stworzyć 9-patcha? Jest do tego specjalna aplikacja w katalogu z SDK, która od razu umożliwi nam łatwą konwersję, sprawdzenie poprawności wykonania grafiki oraz zapis. Ten prosty program znajduje się w katalogu [nasze SDK]/tools/ i ma nazwę draw9patch.exe. Otwórzmy w aplikacji naszą pierwszą grafikę - przycisk, tą zieloną. Jak widać nie chcę, aby boki były rozszerzalne. Jednocześnie tekst niech wypełnia tylko środek, boki niech zostaną wolne. Całkiem proste. W programie możemy dodać jedynie czarne boki, lewym klawiszem myszy rysujemy linię, prawym ją kasujemy. Po prawej stronie mamy podgląd pracy. Zapiszmy to jako plik button.9.png. Czas na nasze tło - wybieramy drugi plik, wyznaczamy tylko skalowanie i zapisujemy. Tym razem nazwijmy nasz efekt jako background.9.png. Pliki przenosimy do katalogu z projektem, gdzie szukamy folderu /drawable. Jeżeli takiego nie mamy, to go tworzymy. Uwaga! Po dodaniu nowego pliku musimy odświeżyć projekt w Eclipse! Czas na przypisanie grafik do obiektów. Jest to bardzo proste, bo wystarczy jedynie dodać atrybut android:background oraz wskazać odpowiedni plik. W moim przypadku wygląda to tak:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button"
        android:text="Nasz przycisk" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:background="@drawable/background"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A tutaj" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nasze tło"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </LinearLayout>

</LinearLayout>
Lokalizację poszczególnych folderów i zasobów wyjaśnię w kolejnym poradniku, chociaż raz już o tym wspominałem. Co teraz? Uruchamiamy program. Efekt widzimy taki jak poniżej. 9-patches to świetne narzędzie do tworzenia prostych grafik. Każda aplikacja, która posiada swój unikalny wygląd używa tego triku do renderowania swoich grafik. Efekt jest świetny, pliki lekkie a użytkownicy - zadowoleni. Chyba o to chodzi :)