Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

Kotlin Android Fundamentals 10.1: style i motywy

Te ćwiczenia są częścią kursu Android Kotlin Fundamentals. Skorzystaj z tego kursu, jeśli będziesz wykonywać kolejno kilka ćwiczeń z programowania. Wszystkie ćwiczenia z kursu są wymienione na stronie docelowej ćwiczeń z programowania na temat Kotlin.

Wprowadzenie do projektowania

W serii ćwiczeń z programowania skupimy się na jednym z najważniejszych aspektów programowania aplikacji na Androida oraz projektowania aplikacji. Oczywistymi aspektami projektowania aplikacji są widoki, tekst i przyciski, a także ich umiejscowienie oraz używane kolory i czcionki. Informację o tym, co robić dalej, jest też kluczowym aspektem projektowania. Użytkownicy muszą być w stanie szybko określić, na co patrzą, co jest ważne i co mogą zrobić.

Porównaj oba ekrany poniżej. Pamiętaj, że przenosząc elementy w centrum uwagi, skup się na tym, co istotne, by ułatwić użytkownikom zorientowanie się, co się dzieje. W przypadku prostych ekranów dobrym wyglądem jest zwykle wyświetlanie mniej. Ekrany z ważnymi informacjami są dobrze widoczne dzięki zwięzłym treściom. Podczas pracy w aplikacjach na Androida możesz słyszeć koncepcję tej architektury znaną jako architektura informacji.

Kolejnym poziomem jest spójna procedura użytkownika, czyli przypadek użycia, który umożliwia użytkownikom wykonywanie zadań. Ta forma projektowania jest nazywana projektowaniem wrażeń użytkownika (UXD), w niektórych projektantów jest jej specjalistką.

Jeśli nie masz dostępu do projektanta, oto kilka wskazówek, jak zacząć:

Zdefiniuj przypadki użycia. Napisz, co użytkownicy powinni zrobić z Twoją aplikacją i w jaki sposób.
Zaimplementuj projekt. Nie można jej dołączyć do pierwszej wersji i tworzyć ją tylko w dobrej jakości, ponieważ zmieni się dopiero wtedy, gdy zobaczymy, jak korzystają z niej użytkownicy.
Zbierz opinie. Znajdź osoby, z którymi możesz porozmawiać o testowaniu aplikacji – Twojej rodzinie, znajomym, a nawet osobom, które właśnie poznałeś w grupie programistów Google. Poproś ich o użycie aplikacji w celu wykorzystania jej podczas oglądania i robienia szczegółowych notatek.
Sprecyzuj Na podstawie tych informacji ulepsz aplikację i przetestuj ją ponownie.

Oto kilka innych pytań, które warto sobie zadać podczas projektowania aplikacji wysokiej jakości. Znasz już sposoby rozwiązywania tych problemów podczas poprzednich ćwiczeń:

Czy aplikacja traci stan po obróceniu urządzenia?
Co się dzieje, gdy użytkownik otwiera aplikację? Czy użytkownik widzi wskaźnik wczytywania lub dane są gotowe do zapisania w pamięci podręcznej offline?
Czy aplikacja jest kodowana w sposób wydajny i dba o to, aby zawsze działała szybko?
Czy aplikacja współpracuje z systemami backendu w sposób, który nigdy nie prowadzi do wyświetlania użytkownikom dziwnych, nieprawidłowych lub nieaktualnych danych?

Pracując nad aplikacjami dla większej liczby odbiorców, musisz zapewnić dostęp do nich jak największej liczbie użytkowników. Przykład:

Wielu użytkowników korzysta z systemów komputerowych na różne sposoby. Wielu użytkowników nie rozróżnia kolorów, a kontrastowe kolory jednego użytkownika mogą nie działać u innego. Wielu użytkowników niedowidzących ma problemy z czytaniem – od okularów do ślepoty.
Niektórzy użytkownicy nie używają ekranów dotykowych i korzystają z innych urządzeń wejściowych, takich jak przyciski.

Dobry projekt to najlepszy sposób na zwiększenie wygody użytkowników aplikacji.

Ćwiczenia z programowania są dla Ciebie zbyt krótkie, aby uczyć Cię wszystkiego o projektowaniu aplikacji na Androida. Pomogą Ci one jednak rozpocząć dobry krok, a Ty możesz kontynuować naukę we własnym zakresie.

Co musisz wiedzieć

Pamiętaj:

Tworzenie aplikacji z aktywnościami i fragmentami oraz nawigowanie między fragmentami, które przekazują dane
Układ interfejsu użytkownika z użyciem widoków i widoków danych, w tym RecyclerView
Dowiedz się, jak używać komponentów architektury (w tym ViewModel) z zalecaną architekturą, aby utworzyć dobrze zorganizowaną i wydajną aplikację
Powiązanie danych, współprogramy i sposób obsługi kliknięć
Jak połączyć się z internetem i z pamięci podręcznej lokalnie za pomocą bazy danych Room
Ustawianie właściwości widoku danych
Jak wyodrębnić zasoby z plików zasobów XML i ich używać

Czego się nauczysz

Podstawowe informacje o systemie stylizacji Androida
Jak dostosowywać atrybuty, style i motywy aplikacji

Jakie zadania wykonasz:

Ulepsz wygląd aplikacji startowej dzięki atrybutom widoku, stylom i motywom

Aplikacja GDG Finder Starter wykorzystuje wszystkie informacje zebrane do tej pory.

Aplikacja używa ConstraintLayout do rozmieszczenia trzech ekranów. Dwa ekrany to po prostu pliki układu, których możesz używać do poznawania kolorów i tekstu na Androidzie.

Trzeci ekran to wyszukiwarka GDG. GDG, czyli Google Developer Group, to społeczności deweloperów, którzy skupiają się na technologiach Google, w tym na Androidzie. Grupy dyskusyjne Google odbywają się na całym świecie, by organizować spotkania, konferencje, koncerty i inne wydarzenia.

Rozwijając tę aplikację, pracujesz nad prawdziwą listą grup GDG. Ekran wyszukiwania wykorzystuje lokalizację urządzenia do sortowania grup GDG według odległości.

Jeśli masz szczęście, a w Twoim regionie jest GDG, możesz wejść na stronę internetową i zarejestrować się, aby otrzymywać wydarzenia. Wydarzenia w GDG to świetny sposób na poznanie innych deweloperów aplikacji na Androida oraz poznanie sprawdzonych metod branżowych, które nie mieszczą się w tym kursie.

Poniższe zrzuty ekranu pokazują, jak Twoja aplikacja zmieni się od początku do końca tego ćwiczenia.

Android zapewnia rozbudowany system stylu, który pozwala zarządzać wyglądem wszystkich widoków w aplikacji. Aby wpłynąć na styl, możesz używać motywów, stylów i atrybutów widoku. Poniższy diagram zawiera podsumowanie priorytetu każdej metody stylizacji. Piramida pokazuje kolejność stosowania stylów przez system (od dołu do góry). Jeśli np. ustawisz rozmiar tekstu w motywie, a potem zmienisz jego rozmiar w atrybutach widoku, atrybuty widoku zastąpią styl motywu.

Wyświetl atrybuty

Użyj atrybutów widoku, aby ustawić konkretne atrybuty dla każdego widoku. (atrybutów Widok nie można używać ponownie, tak jak są style).
Możesz użyć każdej właściwości, którą można ustawić za pomocą stylu lub motywu.

Używana w przypadku projektów niestandardowych lub jednorazowych, takich jak marże, dopełnienia czy ograniczenia.

Style

Użyj stylu, aby utworzyć zbiór informacji o stylu wielokrotnego użytku, takich jak rozmiar i kolory czcionek.
Dobre do deklarowania niewielkich zbiorów popularnych projektów używanych w całej aplikacji.

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

Styl domyślny

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.
Stosuj do wszystkich widoków, np. widoków tekstowych i przycisków.
Za ich pomocą możesz skonfigurować właściwości, które możesz konsekwentnie stosować w całej aplikacji.

Wygląd tekstu

Stylizowany tylko za pomocą atrybutów tekstowych, np. fontFamily.

Podczas wyświetlania widoku Androida stosuje on kombinację motywów, stylów i atrybutów, które możesz dostosować. Atrybuty zawsze zastępują wszystkie określone w stylu lub motywie. Style zawsze zastępują wszystkie elementy określone w motywie.

Zrzuty ekranu poniżej pokazują aplikację GDG Finder z jasnym motywem (po lewej) i ciemnym (po prawej), a także niestandardowy rozmiar czcionki i nagłówka. Możesz je zaimplementować na kilka sposobów, a niektóre z nich poznasz podczas ćwiczeń z programowania.

W tym zadaniu korzystasz z atrybutów do określania stylu tekstu w układzie aplikacji.

Pobierz i uruchom aplikację startową GDG Finder.
Warto zauważyć, że na ekranie głównym znajduje się mnóstwo jednolitego tekstu, który utrudnia zorientowanie się, czego dotyczy strona i co jest ważne.
Otwórz plik z układem home_fragment.xml.
Zwróć uwagę, że układ używa elementu ConstraintLayout do umieszczania elementów wewnątrz elementu ScrollView.
Zauważ, że dla każdego widoku atrybuty układu ograniczania i marginesu są ustawione w widoku, ponieważ są one dostosowywane do każdego widoku i ekranu.
W widoku tekstowym title dodaj atrybut textSize, aby zmienić rozmiar tekstu na 24sp.

Przypominamy, że sp to piksele niezależne od skali, które są skalowane zarówno według gęstości pikseli, jak i rozmiaru czcionki ustawionego przez użytkownika w ustawieniach urządzenia. Android określa, jak duży powinien być tekst na ekranie, gdy go rysujesz. Zawsze używaj rozmiaru tekstowego sp.

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

android:textSize="24sp"

Ustaw textColor jako nieprzezroczysty kolor w widoku tekstowym title przez ustawienie wartości aRGB na #FF555555.

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

android:textColor="#FF555555"

Aby otworzyć kartę Podgląd w Android Studio, wybierz Wyświetl > Narzędzie Windows > Podgląd lub kliknij pionowy przycisk Podgląd po prawej stronie edytora układu. W podglądzie sprawdź, czy tytuł jest szary i większy niż wcześniej, jak pokazano poniżej.

Dostosuj styl podtytułu, aby jego kolor był taki sam jak w nagłówku. Mniejsza czcionka, 18sp. (Domyślna wersja alfa to FF, nieprzezroczysta. Możesz pominąć wartość alfa, jeśli jej nie zmieniasz).

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

Celem tego ćwiczenia z programowania jest stylistyczna aplikacja, która będzie wyglądać trochę zabawnie, ale możesz ją nazwać w dowolny sposób. Spróbuj zastosować te atrybuty w widoku tekstowym 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 z widoku subtitle.
Uruchom aplikację, a powinna już wyglądać lepiej.

Jeśli używasz czcionek w swojej aplikacji, możesz wysłać niezbędne pliki czcionek w pakiecie APK. Choć jest to proste rozwiązanie, zwykle nie zalecamy tego, ponieważ pobieranie i instalowanie aplikacji trwa dłużej.

Android umożliwia aplikacjom pobieranie czcionek w czasie działania za pomocą interfejsu API pobierania czcionek. Jeśli Twoja aplikacja korzysta z tej samej czcionki co inna aplikacja na urządzeniu, Android pobierze ją tylko raz, oszczędzając miejsce na urządzeniu.

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

Krok 1. Zastosuj czcionkę, którą można pobrać

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

W oknie Zasoby wyszukaj lobster lub tylko lo.
W wynikach wybierz 2. Homster.
Po prawej stronie, pod nazwą czcionki, kliknij opcję Utwórz czcionkę, którą chcesz pobrać. 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 ta aplikacja chce używać pobranych czcionek. Gdy czcionka Lobster Two zostanie uruchomiona i dostanie prośbę o dostęp do czcionki w lobsterce, dostawca pobierze ją z internetu, jeśli nie będzie ona już 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 definiujący tablicę z listą wszystkich czcionek do pobrania tej aplikacji.
Podobnie plik res/fonts/lobster_two.xml zawiera informacje o czcionce.
Otwórz home_fragment.xml i zauważ w kodzie i zobacz, że czcionka Hobster Two została zastosowana do title TextView, a tym samym do tytułu.

Otwórz res/values/styles.xml i sprawdź domyślny motyw AppTheme utworzony dla projektu. Obecnie jest on widoczny poniżej. Aby zastosować nową czcionkę Hobster 2 do całego tekstu, musisz zaktualizować ten motyw.
Zwróć uwagę na atrybut parent w tagu <style>. Każdy tag stylu może określać element nadrzędny i dziedziczać wszystkie atrybuty nadrzędne. Kod określa właściwość Theme zdefiniowaną przez biblioteki Androida. Motyw MaterialComponents, który określa wszystko: od sposobu działania przycisków po rysowanie pasków narzędzi. Motyw ma sensowne ustawienia domyślne, więc możesz dostosować tylko niektóre części. Aplikacja używa Light tego motywu bez paska działań (NoActionBar), jak widać na zrzucie ekranu powyżej.

<!-- 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ć android:fontFamily i fontFamily, ponieważ motyw nadrzędny używa obu tych typów elementów. Aby zobaczyć podgląd zmian, możesz sprawdzić home_fragment.xml na karcie Projekt.

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

Ponownie uruchom aplikację. Nowa czcionka zostanie zastosowana do całego tekstu. Otwórz panel nawigacji i przejdź na inne ekrany, gdzie zobaczysz, że czcionka też została zastosowana.

Krok 2. Zastosuj motyw w tytule

W home_fragment.xml znajdź widok tekstowy title, który zawiera atrybut czcionki lobster_two. Usuń atrybut fontFamily i uruchom aplikację. Motyw jest ustawiony na taką samą rodzinę czcionek, więc zmiana nie uległa zmianie.
Umieść inny atrybut fontFamily z powrotem w widoku tekstowym title:
app:fontFamily="serif-monospace"Upewnij się, że jest on w app miejsca.

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

Po uruchomieniu aplikacji zobaczysz, że atrybut lokalny w widoku danych zastępuje motyw.

Usuń atrybut fontFamily z widoku tekstowego title.

Motywy świetnie nadają się do nadawania ogólnym charakterom aplikacji, np. jako domyślnej czcionki czy kolorów podstawowych. Atrybuty idealnie nadają się do stylizowania konkretnego widoku danych i dodawania informacji o układzie, takich jak marże, dopełnienie i ograniczenia, które zwykle mają zastosowanie do poszczególnych ekranów.

Na środku piramidy stylizowanej jest styl. Style to „grupy” wielokrotnego użytku, które możesz stosować do wybranych widoków. W tym zadaniu dodasz styl tytułu i podtytułu.

Krok 1. Utwórz styl

Otwórz aplikację 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>

Ważne jest, aby nazwać styl w semantyczny sposób. Wybierz styl na podstawie celu, a nie na podstawie właściwości, na które wpłynie styl. Na przykład wpisz styl Title, a nie LargeFontInGrey. Ten styl będzie używany w dowolnym miejscu w Twojej aplikacji. Konwencje TextAppearance noszą nazwę TextAppearance.Name, więc w tym przypadku nazwa to TextAppearance.Title.

Styl ma element nadrzędny, tak jak motyw może mieć element nadrzędny. Jednak tym razem zamiast rozszerzania motywu, styl jest rozszerzany do TextAppearance.MaterialComponents.Headline6. Ten styl jest domyślnym stylem tekstu w motywie MaterialComponents, więc rozszerzając go, modyfikujesz styl domyślny, a nie od zera.

W nowym stylu zdefiniuj dwa elementy. W jednym elemencie ustaw wartość textSize na 24sp. W drugim elemencie ustaw kolor textColor na taki sam szary, który był używany wcześniej.

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

Określ inny styl napisów. Nazwij go TextAppearance.Subtitle.
Jedyną różnicą od rozmiaru elementu TextAppearance.Title będzie rozmiar tekstu, dlatego ten styl powinien być elementem podrzędnym elementu TextAppearance.Title.
W stylu Subtitle ustaw rozmiar tekstu na 18sp. Oto ukończony styl:

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

Krok 2. Zastosuj utworzony przez siebie styl

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

Motywy zastępują wszystkie ustawione style z TextAppearance. Piramida na początku ćwiczenia z programowania pokazuje kolejność stosowania stylów. Używaj właściwości textAppearance, aby stosować styl jako właściwość TextAppearance. Dzięki temu czcionka ustawiona w elemencie Theme zastępuje skonfigurowane tutaj ustawienia.

<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. Ten styl musisz też zastosować jako atrybut textAppearance, by czcionka ustawiona w motywie zastąpiła tekst ustawiony w tym miejscu.

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

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

Projekt w Android Studio: GDGFinderStyles.

Aby zmienić wygląd widoków, użyj motywów, stylów i atrybutów.
Motywy wpływają na styl całej aplikacji i mają wiele gotowych ustawień kolorów, czcionek i rozmiarów.
Atrybut ma zastosowanie do widoku, w którym jest ustawiony. Użyj atrybutów, jeśli styl ma zastosowanie tylko do jednego widoku, np. dopełnienie, marże i ograniczenia.
Style to grupy atrybutów, których można używać w wielu widokach danych. Możesz na przykład mieć styl wszystkich nagłówków treści, przycisków lub widoków tekstu.
Motywy i style są dziedziczone z elementów nadrzędnych lub stylów nadrzędnych. Możesz utworzyć hierarchię stylów.
Wartości atrybutów (określane w widokach danych) zastępują style. Style zastępują styl domyślny. Style zastępują motywy. Motywy zastępują wszystkie style ustawione we właściwości 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>

Czcionki dostępne do pobrania zapewniają użytkownikom dostęp do czcionek bez zwiększania rozmiaru pliku APK. Aby dodać do widoku czcionkę, którą można pobrać:

Wybierz widok na karcie Projekt i wybierz Więcej czcionek z menu atrybutu fontFamily.
W oknie Zasoby znajdź czcionkę i zaznacz opcję Utwórz czcionkę do pobrania.
Upewnij się, że plik manifestu Androida zawiera metatag z metadanymi wstępnie wczytywanych czcionek.

Gdy aplikacja najpierw wysyła żądanie czcionki, a czcionka nie jest jeszcze dostępna, dostawca czcionki pobiera ją z internetu.

Dokumentacja dla programistów Androida:

Inne zasoby:

Jaki jest tekst?
szesnastkowy,
Tworzenie aplikacji na Androida razem z Kotlin (kurs Udacity)
Kurs na Kotlinie dla programistów (kurs Udacity)
Kurs dotyczący Kotlin dla programistów

Ta sekcja zawiera listę możliwych zadań domowych dla uczniów, którzy pracują w ramach tego ćwiczenia w ramach kursu prowadzonego przez nauczyciela. To nauczyciel może wykonać te czynności:

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

Nauczyciele mogą wykorzystać te sugestie tak długo, jak chcą lub chcą, i mogą przypisać dowolne zadanie domowe.

Jeśli samodzielnie wykonujesz te ćwiczenia z programowania, możesz sprawdzić swoją wiedzę w tych zadaniach domowych.

Odpowiedz na te pytania

Pytanie 1

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

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Pytanie 2

Które z poniższych NIE należy do dobrych stylów?

▢ Określ ograniczenia widoku.

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

▢ Scal rozmiar czcionki we wszystkich widokach.

▢ Określ kolor tekstu w grupie widoków.

Pytanie 3

Jaka jest różnica między motywami a stylami?

▢ motywy są stosowane do całej aplikacji. Można je też stosować do konkretnych widoków.

▢ Motywy nie mogą dziedziczyć z innych motywów, ale style mogą dziedziczyć je z innych stylów.

Style ▢ nie mogą dziedziczyć z innych stylów, ale motywy mogą dziedziczyć je z innych motywów.

▢ są dostarczane przez system Android, a ich style definiuje deweloper.

Pytanie 4

Jeśli TextView w Twojej aplikacji ma Theme, który ustawia rozmiar czcionki na 12sp, zdefiniowany styl określający wartość 14sp, oraz atrybut fontSize 16sp, jaki jest rozmiar wyświetlanej czcionki na ekranie?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Rozpocznij następną lekcję: 10.2: Material Design, przyciemnianie i kolory

Linki do innych ćwiczeń z programowania w tym kursie znajdziesz na stronie docelowej z ćwiczeniami z podstaw Androida Kotlin.