Czasem w projekcie tak się zdarza, że programista musi zająć się grafiką. I to nigdy nie kończy się dobrze 😉 Chociaż ja uważam, że mi wyszło. Ale do rzeczy, jak pisałem wcześniej zastąpię ten jednobarwny obiekt mający przypominać klocek / cegłę właściwym obiektem. Z racji tego, że nie mogłem znaleźć niczego co by pasowało, postanowiłem stworzyć go sam 😉 Tak wygląda efekt mojej pracy.
Blender renderował przez 37 godzin 😉 Oczywiście żartuję, użyłem painta, gdzie wypełniłem obszar, następnie nałożyłem ramkę, oraz użyłem efektu sprayu z kolorem brązowym 🙂
Przy okazji umieszczenia tego obiektu w aplikacji chciałem zwrócić na coś uwagę, mianowicie jak zapobiec zniekształcaniu grafiki w Androidzie. Kilka zrzutów ekranu obrazujących problem:
Jak widać obrazek w mniejszym lub większym stopniu jest rozciągnięty, co w sumie nie powinno nas dziwić. Ale istnieje lekarstwo, a jego nazwa brzmi – nine patch.
Narzędzie zostało udostępnione razem z sdk Androida i znajduje się w folderze tools, należy uruchomić je z wiersza poleceń, nazywa się draw9patch.bat. W sieci znajduje się również kilka wersji, z jednej z nich skorzystamy, a w ten sposób wygląda narzędzie dostarczane razem z SDK:
My natomiast użyjemy Android Asset Studio – nine patches, dlatego, że ma nieco bardziej przejrzysty interfejs. Ogólnie w naszym przypadku nie ma nic skomplikowanego, zacząłem od zmiany rozmiaru tej belki, ustawiłem go na 100×1000 px, oraz lekkiego wyrównania krawędzi. Następnie wrzuciłem na stronę internetową, i ustawiłem odpowiednio rozciąganie, tak to wyglądało:
Cała logika opiera się na tym, że odpowiednie obiekty rozciągają się w różne strony, według takiego schematu.
Jak widać mamy tutaj 9 obszarów, strzałki oznaczają kierunki rozciągania, z kolei X, oznacza, że obraz w tym miejscu się nie zmienia. Pliki typu nine-path od zwykłych png różnią się dodatkowy rozszerzeniem .9 po nazwie pliku, system Android traktuje je jak zwykłe grafiki. Po pobraniu i podmianie plików otrzymałem taki efekt:
Problem udało się rozwiązać, zajęło to dosłownie chwilkę, a znacznie poprawia wizualne doznania użytkowników 😉
Pozdrawiam!