Ta strona została przetłumaczona przez Cloud Translation API.

Kotlin Android Fundamentals 10.1: Style i motywy

Ten moduł Codelab jest częścią kursu Android Kotlin Fundamentals. Najwięcej korzyści przyniesie Ci ukończenie wszystkich ćwiczeń w kolejności. Wszystkie ćwiczenia z tego kursu znajdziesz na stronie docelowej kursu Android Kotlin Fundamentals.

Wprowadzenie do projektowania

W tej serii ćwiczeń skupimy się na jednym z najważniejszych aspektów tworzenia aplikacji na Androida, czyli na projektowaniu aplikacji. Oczywiste aspekty projektu aplikacji to widoki, tekst i przyciski, ich położenie na ekranie, a także użyte kolory i czcionki. Wskazówki dla użytkownika dotyczące dalszych działań są również istotnym aspektem projektu. Użytkownicy muszą być w stanie na pierwszy rzut oka określić, co widzą, co jest ważne i co mogą zrobić.

Porównaj 2 ekrany poniżej. Zwróć uwagę, że przesuwając elementy i skupiając uwagę użytkownika na tym, co ważne, możesz mu pomóc zrozumieć, co się dzieje. W przypadku prostych ekranów dobre wzornictwo często oznacza wyświetlanie mniejszej ilości informacji. W przypadku ekranów z dużą ilością ważnych informacji dobry projekt sprawia, że gęste informacje są zrozumiałe na pierwszy rzut oka. Podczas pracy nad aplikacjami na Androida możesz spotkać się z tym pojęciem w kontekście architektury informacji (IA).

Kolejny poziom projektowania to tworzenie spójnych wzorców przeglądania lub przypadków użycia, które umożliwiają użytkownikom wykonywanie zadań. Ta forma projektowania nosi nazwę projektowania interfejsu użytkownika (UXD), a niektórzy projektanci się w niej specjalizują.

Jeśli nie masz dostępu do projektanta, oto kilka wskazówek na początek:

Określ przypadki użycia. Opisz, co użytkownicy powinni osiągnąć dzięki Twojej aplikacji i jak to zrobić.
Wprowadź projekt. Nie przywiązuj się do pierwszej wersji roboczej i zadbaj tylko o to, aby była „wystarczająco dobra”, ponieważ zmienisz ją, gdy zobaczysz, jak korzystają z niej prawdziwi użytkownicy.
Zbieraj opinie. Znajdź osoby, które możesz przekonać do przetestowania aplikacji – rodzinę, znajomych, a nawet osoby, które dopiero co poznałeś(-aś) w Google Developer Group. Poproś ich o wykonanie określonego zadania w aplikacji, a potem obserwuj ich działania i rób szczegółowe notatki.
Ulepsz! Na podstawie tych informacji ulepsz aplikację, a potem ponownie ją przetestuj.

Oto kilka innych pytań, które warto sobie zadać podczas projektowania aplikacji. W poprzednich modułach nauczyliśmy Cię technik rozwiązywania tych problemów:

Czy aplikacja traci stan, gdy użytkownik obróci urządzenie?
Co się dzieje, gdy użytkownik otworzy aplikację? Czy użytkownik widzi wskaźnik ładowania, czy dane są gotowe w pamięci podręcznej offline?
Czy aplikacja jest napisana w sposób wydajny i zapewniający, że zawsze reaguje na dotyk użytkownika?
Czy aplikacja wchodzi w interakcje z systemami backendu w sposób, który nigdy nie prowadzi do wyświetlania użytkownikowi dziwnych, nieprawidłowych lub nieaktualnych danych?

Podczas tworzenia aplikacji dla większej grupy odbiorców ważne jest, aby były one dostępne dla jak największej liczby użytkowników. Na przykład:

Wielu użytkowników wchodzi w interakcje z systemami komputerowymi na różne sposoby. Wielu użytkowników ma zaburzenia widzenia barw, a kolory, które kontrastują dla jednego użytkownika, mogą nie działać dla innego. Wielu użytkowników ma wady wzroku, od potrzeby okularów do czytania po ślepotę.
Niektórzy użytkownicy nie mogą korzystać z ekranów dotykowych i interagują z urządzeniami za pomocą innych urządzeń wejściowych, takich jak przyciski.

Dobry projekt to najważniejszy sposób na zachęcenie użytkowników do korzystania z aplikacji.

Te warsztaty są zbyt krótkie, aby nauczyć Cię wszystkiego o projektowaniu na Androida, ale pomogą Ci zacząć w dobrym kierunku. Możesz kontynuować naukę i rozwijać się samodzielnie.

Co warto wiedzieć

Musisz znać:

Jak tworzyć aplikacje z aktywnościami i fragmentami oraz poruszać się między fragmentami, przekazując dane
Używanie widoków i grup widoków do tworzenia interfejsu użytkownika, w tym RecyclerView
Jak używać komponentów architektury, w tym ViewModel, z zalecaną architekturą do tworzenia dobrze zorganizowanych i wydajnych aplikacji
Wiązanie danych, współprogramy i obsługa kliknięć
Jak połączyć się z internetem i lokalnie buforować dane za pomocą bazy danych Room
Ustawianie właściwości widoku
Jak wyodrębniać zasoby do plików zasobów XML i z nich korzystać

Czego się nauczysz

Podstawy systemu stylów Androida
Jak używać atrybutów, stylów i motywów do dostosowywania aplikacji

Jakie zadania wykonasz

Ulepszanie projektu aplikacji startowej za pomocą atrybutów widoku, stylów i motywów

Aplikacja startowa GDG-finder wykorzystuje wszystko, czego do tej pory nauczyłeś się w tym kursie.

Aplikacja używa ConstraintLayout do wyświetlania 3 ekranów. Dwa z nich to tylko pliki układu, które posłużą Ci do poznania kolorów i tekstu na Androidzie.

Trzeci ekran to wyszukiwarka GDG. GDG, czyli Google Developer Groups, to społeczności deweloperów, które koncentrują się na technologiach Google, w tym na Androidzie. Grupy GDG na całym świecie organizują spotkania, konferencje, maratony szkoleniowe i inne wydarzenia.

Podczas tworzenia tej aplikacji pracujesz nad prawdziwą listą GDG. Ekran wyszukiwarki korzysta z lokalizacji urządzenia, aby sortować GDG według odległości.

Jeśli masz szczęście i w Twoim regionie działa GDG, możesz odwiedzić stronę internetową tej grupy i zarejestrować się na jej wydarzenia. Wydarzenia GDG to świetny sposób na poznanie innych deweloperów Androida i nauczenie się sprawdzonych metod, które nie zmieściły się w tym kursie.

Zrzuty ekranu poniżej pokazują, jak aplikacja będzie się zmieniać od początku do końca tego ćwiczenia.

Android udostępnia rozbudowany system stylów, który umożliwia kontrolowanie wyglądu wszystkich widoków w aplikacji. Aby wpływać na styl, możesz używać motywów, stylów i atrybutów widoku. Poniższy diagram podsumowuje pierwszeństwo poszczególnych metod stylizacji. Diagram piramidy pokazuje kolejność stosowania przez system metod stylizacji od dołu do góry. Jeśli na przykład ustawisz rozmiar tekstu w motywie, a potem ustawisz go inaczej w atrybutach widoku, atrybuty widoku zastąpią styl motywu.

Wyświetlanie atrybutów

Używaj atrybutów widoku, aby ustawiać atrybuty w sposób jawny dla każdego widoku. (Atrybuty widoku nie są wielokrotnego użytku, w przeciwieństwie do stylów).
Możesz używać wszystkich właściwości, które można ustawić za pomocą stylów lub motywów.

Używaj ich w przypadku niestandardowych lub jednorazowych projektów, takich jak marginesy, dopełnienia czy ograniczenia.

Style

Użyj stylu, aby utworzyć kolekcję informacji o stylu, których można używać wielokrotnie, np. rozmiaru czcionki lub kolorów.
Przydatne do deklarowania małych zestawów typowych wzorów używanych w całej aplikacji.

Zastosuj styl do kilku widoków, zastępując styl domyślny. Możesz na przykład użyć stylu, aby utworzyć nagłówki lub zestaw przycisków o spójnym wyglądzie.

Styl domyślny

Jest to domyślny styl zapewniany przez system Android.

Motywy

Użyj motywu, aby zdefiniować kolory dla całej aplikacji.
Użyj motywu, aby ustawić domyślną czcionkę dla całej aplikacji.
Dotyczy wszystkich widoków, np. widoków tekstowych lub przycisków opcji.
Służy do konfigurowania właściwości, które można stosować w spójny sposób w całej aplikacji.

TextAppearance

Do stylizowania za pomocą atrybutów tekstowych, np. fontFamily.

Podczas stylizowania widoku Android stosuje kombinację motywów, stylów i atrybutów, które możesz dostosować. Atrybuty zawsze zastępują wszystko, co zostało określone w stylu lub motywie. Style zawsze zastępują wszystko, co jest określone w motywie.

Poniższe zrzuty ekranu przedstawiają aplikację GDG-finder z jasnym motywem (po lewej) i ciemnym motywem (po prawej), a także z niestandardową czcionką i rozmiarami nagłówków. Możesz to zrobić na kilka sposobów, a niektóre z nich poznasz w tym laboratorium.

W tym zadaniu użyjesz atrybutów do określenia stylu nagłówków tekstu w układzie aplikacji.

Pobierz i uruchom aplikację startową GDG-finder.
Zwróć uwagę, że ekran główny zawiera dużo tekstu o jednolitym formacie, co utrudnia określenie, o czym jest strona i co jest na niej ważne.
Otwórz plik układu home_fragment.xml.
Zwróć uwagę, że układ używa elementu ConstraintLayout do pozycjonowania elementów w elemencie ScrollView.
Zwróć uwagę, że w przypadku każdego widoku atrybuty układu ograniczeń i marginesów są ustawione w widoku, ponieważ te atrybuty są zwykle dostosowywane do każdego widoku i ekranu.
W widoku tekstu title dodaj atrybut textSize, aby zmienić rozmiar tekstu na 24sp.

Przypominamy, że sp oznacza piksele niezależne od skali, które są skalowane zarówno przez gęstość pikseli, jak i preferowany rozmiar czcionki ustawiony przez użytkownika w ustawieniach urządzenia. Android określa, jak duży powinien być tekst na ekranie, gdy go rysuje. Zawsze używaj sp w przypadku rozmiarów tekstu.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

Ustaw textColor widoku tekstu title na nieprzezroczysty szary, ustawiając wartość aRGB na #FF555555.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

Aby otworzyć kartę Podgląd w Android Studio, wybierz Widok > Okna narzędzi > Podgląd lub kliknij pionowy przycisk Podgląd na prawej krawędzi edytora układu. W podglądzie sprawdź, czy tytuł jest szary i większy niż wcześniej, jak pokazano poniżej.

Nadaj podtytułowi styl, aby miał ten sam kolor co nagłówek i mniejszą czcionkę, 18sp. (Domyślna wartość alfa to FF, czyli nieprzezroczystość. Jeśli nie chcesz zmieniać wartości alfa, możesz ją pominąć).

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

W tych ćwiczeniach chcemy nadać aplikacji nieco fantazyjny, ale profesjonalny wygląd. Możesz jednak dostosować jej styl do swoich potrzeb. Wypróbuj te atrybuty dla widoku tekstu subtitle. Na karcie Podgląd możesz sprawdzić, jak zmieni się wygląd aplikacji. Następnie usuń te atrybuty.

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

Zanim przejdziesz dalej, nie zapomnij cofnąć atrybutów textAllCaps, textStyle i background w widoku subtitle.
Uruchom aplikację. Powinna już wyglądać lepiej.

Gdy używasz w aplikacji czcionek, możesz dołączyć do pliku APK niezbędne pliki czcionek. To proste rozwiązanie nie jest jednak zwykle zalecane, ponieważ wydłuża czas pobierania i instalowania aplikacji.

Android umożliwia aplikacjom pobieranie czcionek w czasie działania za pomocą interfejsu Downloadable Fonts API. Jeśli Twoja aplikacja używa tej samej czcionki co inna aplikacja na urządzeniu, Android pobiera ją tylko raz, co pozwala zaoszczędzić miejsce na urządzeniu.

W tym zadaniu użyjesz czcionek do pobrania, aby ustawić czcionkę każdego widoku w aplikacji, który korzysta z motywu.

Krok 1. Zastosuj czcionkę do pobrania

Otwórz home_fragment.xml na karcie Projekt.
W panelu Drzewo komponentów wybierz widok tekstu title.
W panelu Atrybuty znajdź atrybut fontFamily. Znajdziesz go w sekcji Wszystkie atrybuty lub możesz go po prostu wyszukać.
Kliknij strzałkę w dół.
Przewiń do sekcji Więcej czcionek i wybierz ją. Otworzy się okno Zasoby.

W oknie Zasoby wyszukaj lobster lub po prostu lo.
W wynikach wyszukiwania wybierz Lobster Two.
Po prawej stronie, pod nazwą czcionki, kliknij opcję Utwórz czcionkę do pobrania. Kliknij OK.
Otwórz plik manifestu Androida.
U dołu pliku manifestu znajdź nowy tag <meta-data> z atrybutami name i resource ustawionymi na "preloaded_fonts". Ten tag informuje Usługi Google Play, że aplikacja chce używać pobranych czcionek. Gdy aplikacja jest uruchomiona i żąda czcionki Lobster Two, dostawca czcionki pobiera ją z internetu, jeśli nie jest ona jeszcze dostępna na urządzeniu.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

W folderze res/values znajdź plik preloaded_fonts.xml, który definiuje tablicę zawierającą listę wszystkich czcionek do pobrania w tej aplikacji.
Podobnie plik res/fonts/lobster_two.xml zawiera informacje o czcionce.
Otwórz home_fragment.xml i zwróć uwagę, że w kodzie i podglądzie czcionka Lobster Two jest zastosowana do elementu title TextView, a tym samym do tytułu.

Otwórz res/values/styles.xml i sprawdź domyślny motyw AppTheme utworzony dla projektu. Obecnie wygląda ona tak, jak pokazano poniżej. Aby zastosować nową czcionkę Lobster Two do całego tekstu, musisz zaktualizować ten motyw.
W tagu <style> zwróć uwagę na atrybut parent. Każdy tag stylu może określać tag nadrzędny i dziedziczyć wszystkie jego atrybuty. Kod określa Theme zdefiniowany przez biblioteki Androida. Motyw MaterialComponents, który określa wszystko, od działania przycisków po sposób rysowania pasków narzędzi. Motyw ma sensowne ustawienia domyślne, więc możesz dostosować tylko te części, które Cię interesują. Aplikacja korzysta z wersji Light tego motywu bez paska działań (NoActionBar), co widać na powyższym zrzucie ekranu.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

W stylu AppTheme ustaw rodzinę czcionek na lobster_two. Musisz ustawić zarówno android:fontFamily, jak i fontFamily, ponieważ motyw nadrzędny korzysta z obu tych elementów. Aby wyświetlić podgląd zmian, na karcie Projekt kliknij home_fragment.xml.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

Uruchom ponownie aplikację. Nowa czcionka zostanie zastosowana do całego tekstu. Otwórz panel nawigacyjny i przejdź do innych ekranów. Zobaczysz, że czcionka jest tam również zastosowana.

Krok 2. Zastosuj motyw do tytułu

W home_fragment.xml znajdź widok tekstu title, który ma atrybut czcionki lobster_two. Usuń atrybut fontFamily i uruchom aplikację. Motyw ustawia tę samą rodzinę czcionek, więc nie nastąpi żadna zmiana.
Umieść inny atrybut fontFamily z powrotem w widoku tekstu title:
app:fontFamily="serif-monospace"Upewnij się, że znajduje się on w przestrzeni app.

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

Uruchom aplikację i zobacz, że atrybut lokalny dla widoku zastępuje motyw.

Usuń atrybut fontFamily z widoku tekstu title.

Motywy świetnie nadają się do stosowania ogólnych motywów w aplikacji, takich jak domyślna czcionka i kolory podstawowe. Atrybuty świetnie nadają się do stylizowania konkretnego widoku i dodawania informacji o układzie, takich jak marginesy, dopełnienie i ograniczenia, które zwykle są specyficzne dla każdego ekranu.

W środku piramidy hierarchii stylów znajdują się style. Style to grupy atrybutów, których możesz używać wielokrotnie i stosować do wybranych widoków. W tym zadaniu użyjesz stylu do tytułu i podtytułu.

Krok 1. Utwórz styl

Otwórz pokój res/values/styles.xml.
W tagu <resources> zdefiniuj nowy styl za pomocą tagu <style>, jak pokazano poniżej.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

Podczas nazywania stylów warto myśleć o nich w kategoriach semantycznych. Wybierz nazwę stylu na podstawie tego, do czego będzie on używany, a nie na podstawie właściwości, na które ma wpływ. Na przykład nazwij ten styl Title, a nie LargeFontInGrey. Ten styl będzie używany w przypadku wszystkich tytułów w aplikacji. Zgodnie z konwencją style TextAppearance są nazywane TextAppearance.Name, więc w tym przypadku nazwa to TextAppearance.Title.

Styl ma element nadrzędny, tak jak motyw. Tym razem jednak styl rozszerza styl, a nie motyw TextAppearance.MaterialComponents.Headline6. Ten styl jest domyślnym stylem tekstu w motywie MaterialComponents, więc rozszerzając go, modyfikujesz styl domyślny, zamiast zaczynać od zera.

W nowym stylu zdefiniuj 2 elementy. W jednym z elementów ustaw wartość textSize na 24sp. W przypadku drugiego elementu ustaw textColor na ten sam ciemnoszary kolor, który był używany wcześniej.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

Zdefiniuj inny styl napisów. Nazwij go TextAppearance.Subtitle.
Jedyną różnicą w stosunku do stylu TextAppearance.Title będzie rozmiar tekstu, więc ten styl powinien być stylem podrzędnym stylu TextAppearance.Title.
W stylu Subtitle ustaw rozmiar tekstu na 18sp. Oto gotowy styl:

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Krok 2. Zastosuj utworzony styl

W polu home_fragment.xml dodaj TextAppearance.Title do widoku tekstu title. Usuń atrybuty textSize i textColor.

Motywy zastępują wszystkie ustawione przez Ciebie TextAppearance style. (Diagram piramidy na początku tego przewodnika pokazuje kolejność stosowania stylów). Użyj właściwości textAppearance, aby zastosować styl jako TextAppearance, dzięki czemu zestaw czcionek ustawiony w Theme zastąpi ustawienia wprowadzone tutaj.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

Dodaj też styl TextAppearance.Subtitle do widoku tekstu subtitle i usuń atrybuty textSize i textColor. Musisz też zastosować ten styl jako textAppearance, aby czcionka ustawiona w motywie zastąpiła czcionkę ustawioną tutaj.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

Uruchom aplikację, a tekst będzie miał teraz spójny styl.

Projekt Android Studio: GDGFinderStyles.

Używaj motywów, stylów i atrybutów w widokach, aby zmieniać ich wygląd.
Motywy wpływają na styl całej aplikacji i mają wiele gotowych wartości kolorów, czcionek i rozmiarów czcionek.
Atrybut dotyczy widoku, w którym został ustawiony. Używaj atrybutów, jeśli masz styl, który ma zastosowanie tylko do jednego widoku, np. dopełnienie, marginesy i ograniczenia.
Style to grupy atrybutów, których można używać w wielu widokach. Możesz na przykład mieć styl dla wszystkich nagłówków treści, przycisków lub widoków tekstu.
Motywy i style dziedziczą ustawienia z motywu lub stylu nadrzędnego. Możesz utworzyć hierarchię stylów.
Wartości atrybutów (ustawione w widokach) zastępują style. Style zastępują styl domyślny. Style zastępują motywy. Motywy zastępują wszystkie style ustawione przez właściwość textAppearance.

Zdefiniuj style w pliku zasobów styles.xml za pomocą tagów <style> i <item>.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Korzystanie z czcionek do pobrania sprawia, że są one dostępne dla użytkowników bez zwiększania rozmiaru pliku APK. Aby dodać czcionkę do pobrania w przypadku widoku:

Wybierz widok na karcie Projekt, a potem w menu atrybutu fontFamily kliknij Więcej czcionek.
W oknie Zasoby znajdź czcionkę i wybierz przycisk Utwórz czcionkę do pobrania.
Sprawdź, czy plik manifestu Androida zawiera tag metadanych dla wstępnie załadowanych czcionek.

Gdy aplikacja po raz pierwszy zażąda czcionki, a nie będzie ona jeszcze dostępna, dostawca czcionki pobierze ją z internetu.

Dokumentacja dla deweloperów aplikacji na Androida:

Inne zasoby:

Jak ma wyglądać tekst
Szesnastkowy
Tworzenie aplikacji na Androida w języku Kotlin (kurs na Udacity)
Kotlin Bootcamp for Programmers (kurs Udacity)
Codelaby z kursu Kotlin Bootcamp for Programmers

W tej sekcji znajdziesz listę możliwych zadań domowych dla uczniów, którzy wykonują ten moduł w ramach kursu prowadzonego przez instruktora. Nauczyciel musi:

W razie potrzeby przypisz pracę domową.
Poinformuj uczniów, jak przesyłać projekty.
Oceń zadania domowe.

Instruktorzy mogą korzystać z tych sugestii w dowolnym zakresie i mogą zadawać inne zadania domowe, które uznają za odpowiednie.

Jeśli wykonujesz ten kurs samodzielnie, możesz użyć tych zadań domowych, aby sprawdzić swoją wiedzę.

Odpowiedz na te pytania

Pytanie 1

Który tag służy do definiowania motywów?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Pytanie 2

Która z tych odpowiedzi NIE jest dobrym sposobem wykorzystania stylów?

▢ Określ ograniczenia widoku.

▢ Określ kolor tła nagłówków.

▢ Ujednolicenie rozmiaru czcionki w różnych widokach.

▢ Określ kolor tekstu dla grupy widoków.

Pytanie 3

Czym różnią się motywy od stylów?

▢ Motywy dotyczą całej aplikacji, a style można stosować do konkretnych widoków.

▢ Motywy nie mogą dziedziczyć po innych motywach, ale style mogą dziedziczyć po innych stylach.

▢ Style nie mogą dziedziczyć po innych stylach, ale motywy mogą dziedziczyć po innych motywach.

▢ Motywy są udostępniane przez system Android, a style są definiowane przez dewelopera.

Pytanie 4

Jeśli element TextView w aplikacji ma Theme, który ustawia rozmiar czcionki na 12sp, zdefiniowany styl, który ustawia go na 14sp, oraz atrybut fontSize o wartości 16sp, jaki będzie rozmiar wyświetlanej czcionki na ekranie?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Rozpocznij kolejną lekcję: 10.2. Material Design, wymiary i kolory

Linki do innych ćwiczeń z tego kursu znajdziesz na stronie docelowej ćwiczeń z podstaw języka Kotlin na Androidzie.