Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android od podstaw: tworzenie stylów i motywów

Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Android From Scratch.
Android From Scratch: Background Operations
Android From Scratch: Google Play Services

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Jako deweloperzy systemu Android, mamy tendencję do skupiania się przede wszystkim na funkcjonalności naszych aplikacji. Jednakże sama funkcjonalność rzadko wystarcza. W Google Play, który posiada dzisiaj ponad milion aplikacji, wygląd jest tak samo ważny jak funkcjonalność, jeśli nie ważniejszy. Jeśli trudno ci w to uwierzyć, proponuję przejrzeć aplikacje w sekcji Top listy w Google Play.

Istnieją dwa główne podejścia do modyfikowania wyglądu aplikacji na Androida. Pierwsze podejście polega na bezpośrednim modyfikowaniu właściwości widoków w plikach XML układu. Ten sposób jest sensowny tylko, jeśli pracujesz nad prostymi aplikacjami, które posiadają niewiele widoków i aktywności. Drugie podejście obejmuje stworzenie i wykorzystanie niestandardowych stylów i motywów. Jeśli masz doświadczenie w tworzeniu stron internetowych, pierwsze podejście jest zbliżone do stosowania stylów CSS, a drugie do arkuszy stylów.

W tym poradniku, dowiesz się jak stworzyć niestandardowe style i motywy dla aplikacji na Androida. Nauczysz się również jak korzystać z narzędzi i skrótów Android Studio w celu łatwiejszego tworzenia stylów.

1. Tworzenie stylów

Style nakłada się oczywiście na komponenty UI. W związku z tym, zacznijmy od stworzenia nowej pustej aktywności i dodania dwóch widoków do jej pliku XML układu.

Jak widzisz w powyższym kodzie, właściwości takie jak layout_width i layout_margin są wyraźnie uwzględnione w definicji każdego widoku.

Aby stworzyć nowy styl dla pierwszego widoku, kliknij prawym klawiszem myszy i wybierz Refactor > Extract > Style.

Pojawi się komunikat, gdzie możesz nazwać styl oraz wybrać atrybuty, które powinny być w nim zawarte. Nazwij go MyBox i zaznacz wszystkie atrybuty z wyjątkiem background.

Extract style

Kiedy naciśniesz OK, zobaczysz, że kod pierwszego widoku uległ zmianie.

Teraz widok posiada atrybut style, który wskazuje na styl MyBox. Możesz przyjrzeć się definicji stylu otwierając res/values/styles.xml.

Po stworzeniu stylu, można go nałożyć na dowolny widok. Dla przykładu, oto jak zastosować MyBox w drugim widoku:

Po nałożeniu stylów, tak będą wyglądać oba widoki w aktywności:

Two views with styles

2. Rozszerzanie stylów

Android pozwala na stworzenie stylów, które wykorzystują inne jako podstawę. Innymi słowy, umożliwia rozszerzanie istniejących stylów.

Wyróżniamy dwie składnie, które możesz użyć do rozszerzenia stylu. Pierwsza składnia, często nazywana domniemaną, korzysta z notacji kropek. Dla przykładu, oto jak stworzyć dwa pochodne style o nazwie TEAL i CYAN za pomocą MyBox jako stylu nadrzędnego:

Jak zapewne się domyślasz, MyBox.TEAL i MyBox.CYAN zawierają wszystkie właściwości MyBox. Oprócz nich posiadają również właściwość android:background.

Drugą składnię do tworzenia pochodnych stylów zazwyczaj określa się jako jednoznaczną. Obejmuje ona wykorzystanie atrybutu parent, którego wartość jest ustawiona jako nazwa stylu nadrzędnego. Poniższy fragment kodu definiuje styl o nazwie TealBox.

Stosowanie pochodnych stylów nie różni się niczym od stosowania tych zwykłych.

Większość deweloperów korzysta z domniemanych składni podczas rozszerzania własnych stylów i jednoznacznych składni podczas rozszerzania stylów platformy Android.

3. Tworzenie motywów

Dotychczas nakładaliśmy style na widoki znajdujące się wewnątrz aktywności. Android pozwala również na zastosowanie stylów dla całych aktywności i aplikacji. Po nałożeniu stylu na aktywność lub aplikacje, staje się on motywem.

Domyślnie, wszystkie aplikacje stworzone za pomocą ostatniej wersji Android Studio korzystają z motywu o nazwie AppTheme. AppTheme jest potomkiem dobrze znanego motywu AppCompat, ogromnego i bardzo wszechstronnego motywu, który może mieć wpływ na wygląd prawie każdego powszechnie używanego widoku.

Możesz znaleźć definicję AppTheme w styles.xml:

AppTheme wywodzi się z Material Design.  W związku z tym, aby stworzyć własny motyw zgodny ze specyfikacją Material Design, dobrym pomysłem jest wykorzystanie AppTheme jako podstawy. Ewentualnie można bezpośrednio użyć Theme.AppCompat jako obiektu nadrzędnego.

Chociaż zawsze możesz stworzyć motyw pisząc kod XML—pamiętaj, to są tylko style—w tym poradniku pokażę ci jak wykorzystać Theme Editor programu Android Studio, który wykona całą robotę za ciebie.

Aby otworzyć Theme Editor, otwórz menu Tools i wybierz Android > Theme Editor.

Po prawej stronie okna Theme Editor znajdują się kontrolki służące nie tylko modyfikowania motywów, ale też do tworzenia nowych. Po lewej stronie można zobaczyć podgląd zmian wprowadzonych w motywach.

Theme Editor

Aby stworzyć nowy motyw, kliknij rozwijane menu Theme i wybierz opcję Create New Theme.

W nowym oknie, nazwij nowy motyw MyTheme i naciśnij OK.

Create new theme

Na tym etapie, style.xml otrzyma nowy wiersz, który wygląda tak:

Zmodyfikujmy teraz MyTheme za pomocą Theme Editor. Aby nie komplikować, w tym poradniku zmodyfikujemy tylko wartości atrybutów colorPrimarycolorPrimaryDark, i colorAccent.

Aby zmienić wartość colorPrimary, kliknij przycisk colorPrimary. Theme Editor wyświetli komunikat umożliwiający wybranie koloru. Wybierz dowolny kolor, ale najpierw nadaj mu nową nazwę. Jeśli tego nie zrobisz, Theme Editor nadpisze kolor używany przez AppTheme.

Editing colorPrimary

Wykonaj te same czynności, aby zmienić wartości colorPrimaryDark i colorAccent. Theme Editor automatycznie użyje wybranego koloru dla colorPrimary, aby zasugerować odpowiednie kolory dla colorPrimaryDark and colorAccent.

Definicja MyTheme będzie wyglądała w ten sposób:

4. Stosowanie motywów

Przed zastosowaniem utworzonego przez nas motywu, dodajmy do aktywności kilka powszechnie używanych widoków. W ten sposób, łatwiej będzie nam zauważyć zmiany w motywie.

Poniższy kod tworzy zwykły, bez obramowania i kolorowy ButtonCheckbox, RadioButton, Switch, Seekbar, TextView i EditText.

Po dodaniu nowych widoków, układ powinien wyglądać tak:

Layout using AppTheme

Jeśli przeczytałeś specyfikację Material Design, z pewnością wiesz, że aktywność obecnie korzysta z odcieni indygo dla colorPrimary i colorPrimaryDark. Dla colorAccent, korzysta z odcienia różu. Są to domyślne kolory określone przez Android Studio. Możesz znaleźć ich odpowiedniki kodu hex w res/values/colors.xml projektu.

Aby zastosować MyTheme, szablon stworzony w poprzednim kroku, otwórz plik manifestu projektu i dodaj atrybut android:theme do definicji aktywności. Ustaw jego wartość na @style/MyTheme.

Podobnie możesz nałożyć motyw na całą aplikację ustawiając wartość atrybutu definicji aplikacji android:theme na @style/MyTheme.

Jeśli przyjrzysz się teraz swojej aktywności, powinna wyglądać zupełnie inaczej.

Layout using MyTheme

Podsumowanie

W tym poradniku, nauczyłeś się jak stworzyć i zastosować niestandardowe style i motywy Androida. Zachęcam do wykorzystania tej wiedzy do nadawania nowego wyglądu twoim aplikacjom. Jednakże, nie daj się ponieść emocjom—większość użytkowników systemu Android jest tak przyzwyczajona do Material Design, że odejście od jego wytycznych, może być dużym błędem.

Aby dowiedzieć się więcej o stylach i motywach, polecam przejrzenie przewodnika po stylach i motywach.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.