Pokolorować drawable!

Masz za zadanie stworzyć aplikację mobilną na Androida do zarządzania listą klientów. Każdy klient ma swój przypisany kolor, który go identyfikuje. Dostajesz mockupy od grafika, a ten uznał, że klienci bedą oznaczani za pomocą odpowiednio kolorowanej krawędzi. Mniej więcej tak:

Nic trudnego, myślisz sobie. Wystarczy przecież typowy drawable, który następnie dodasz jako tło dla kolejnym pozycji w RecyclerView. Tworzysz nowy plik i dodajesz taką zawartość:

XML

Wszystko świetnie, ale jak tu kolorować dynamicznie takie tło? Zawsze możesz stworzyć 1000 takich drawable z każdym możliwym kolorem, ale czasu szkoda, a i sposób mizerny 🙂

Na szczęście jest na to sposób.  Z pomocą przyjdzie nam nadawanie identyfikatorów warstwom w pliku drawable. Poniżej zaktualizowana zawartość.

XML

Oznacza to jedno-będziemy kolorować z kodu. Odwołamy się do odpowiedniej warstwy, a następnie do jej właściwości stroke. Zmień jeszcze zawartość pliku layoutu aktywności głównej. Dodamy w nim przycisk do zmiany koloru obramowania oraz widok, który będziemy kolorować.

XML
Nasza aktywność

Czas na kod

Świetnie, mamy już wszystko to na czym będziemy operować. Dodamy teraz logikę dla przycisku. Za jego pomocą wylosujemy kolor, którym pokolorujemy obramowanie widoku środkowego. Jednocześnie zapoznaj się z ciałem metody odpowiedzialnej za nadanie wylosowanego koloru. Dodatkowo dla efektu WOW dodamy animację skalowania widoku po zmianie koloru.

Swift

No dobrze, ale co tu się dzieje? Zaczynamy od pobrania referencji do utworzonego wcześniej drawable. Rzutujemy ją na LayerDrawable, ze względu na to, że nasz drawable oparty jest na warstwach. Następnie szukamy warstwy, którą wcześniej opatrzyliśmy identyfikatorem. Teraz już z górki. Ustawiamy szerokość oraz kolor krawędzi warstwy na odpowiednie wartości. W linii 25 uruchamiamy naszą hiper, extra zaawansowaną animację, a poźniej już tylko przypisujemy skonfigurowany drawable do tła naszego widoku. 

voilà!

To nie wszystko

To z pewnością nie wszystko, co możemy zrobić. Sprawdź, co się stanie gdy na obiekcie gradientDrawable wywołasz metodę setColor.

Projekt na GitHub:
https://github.com/krzbbaranowski/ColoringDrawable

Mam coś dla Ciebie

Zapisz się do mojego newslettera, a ja prześlę Ci zbiór kilkunastu praktycznych wskazówek dla programisty aplikacji mobilnych.

Menu