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.3: projektowanie dla każdego

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.

Wstęp

Aby aplikacja była jak najbardziej przydatna dla użytkowników, niezależnie od tego, czy tworzysz ją z myślą o radości czy też w celach biznesowych. Można to osiągnąć na wiele sposobów.

Obsługa języków pisanych od prawej. Język europejski i wiele innych języków czytanych od lewej do prawej. Aplikacje pochodzące z tych języków są zwykle zaprojektowane w tym języku. Wiele innych języków z dużą liczbą głośników czytanych od prawej do lewej, np. arabski. Obsługuj aplikację w językach pisanych od prawej do lewej, aby zwiększyć liczbę potencjalnych odbiorców.
Skanuj pod kątem ułatwień dostępu. Zgadywanie, jak inni mogą doświadczyć aplikacji, jest pułapką. Aplikacja Accessibility Scanner nie wymaga zgadywania i analizuje Twoją aplikację, szukając obszarów, które można poprawić.
Projektowanie TalkBack z opisami treści Niedowidzące osoby częściej pojawiają się z myślą o osobach niepełnosprawnych, a wielu z nich, nie tylko ślepych, korzysta z czytnika ekranu. Opisy treści to wyrażenia, które czytnik ekranu może odczytać, gdy użytkownik wejdzie w interakcję z elementem ekranu.
Włącz tryb nocny. U wielu użytkowników z wadą wzroku zmiana kolorów ekranu poprawia kontrast i ułatwia im pracę z aplikacją. Android ułatwia obsługę trybu nocnego. Zawsze warto też włączyć tryb nocny, by zapewnić użytkownikom prostą alternatywę dla domyślnych kolorów ekranu.

W ramach tego ćwiczenia z programowania zapoznasz się z tymi możliwościami i dodasz obsługę aplikacji GDG Finder.

Dowiedz się też, jak korzystać z układów w aplikacji na Androida. Możesz użyć chipsów, aby aplikacja była bardziej interesująca, ale jednocześnie była dostępna.

Co musisz wiedzieć

Pamiętaj:

Jak tworzyć aplikacje z aktywnościami i fragmentami oraz przechodzić między fragmentami przekazującymi dane.
Za pomocą grup widoków i widoków możesz rozmieścić interfejs użytkownika, a zwłaszcza RecyclerView.
Dowiedz się, jak używać komponentów architektury (w tym ViewModel) z zalecaną architekturą, aby stworzyć dobrze zorganizowaną i wydajną aplikację.
Powiązanie danych, współprogramy i sposób obsługi kliknięć myszą.
Jak połączyć się z internetem i zapisać w pamięci podręcznej lokalnie przy użyciu bazy danych pokoju.
Jak ustawić właściwości widoku danych oraz jak wyodrębniać i wykorzystywać zasoby z plików zasobów XML.
Jak używać stylów i motywów, aby dostosować wygląd aplikacji.
Jak używać komponentów Material Design, zasobów wymiarów i kolorów niestandardowych.

Czego się nauczysz

Jak sprawić, aby aplikacja była dostępna dla największej liczby użytkowników.
Jak włączyć obsługę aplikacji w językach pisanych od prawej do lewej.
Ocena ułatwień dostępu w aplikacji
Jak używać opisów treści, aby aplikacja działała lepiej z czytnikami ekranu.
Jak używać elementów.
Jak włączyć aplikację w trybie ciemnym.

Jakie zadania wykonasz:

Oceń i rozszerz aplikację, aby zwiększyć jej dostępność, dzięki czemu będzie działać w językach pisanych od prawej.
Zeskanuj aplikację, aby określić, co można poprawić w ustawieniach ułatwień dostępu.
Używaj opisów treści do obrazów.
Dowiedz się, jak korzystać z rysunków
Dodaj możliwość korzystania z trybu nocnego w Twojej aplikacji.

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.

Główna różnica między językami zapisywanymi od lewej do prawej (LTR) a od prawej do lewej (RTL) to kierunek wyświetlanej treści. Zmiana kierunku interfejsu z LTR na RTL (lub odwrotnie) jest często nazywana powielaniem danych. Odbicie lustrzane wpływa na większość ekranu, w tym tekst, ikony pól tekstowych, układy oraz ikony ze wskazówkami (np. strzałkami). Elementy nie są powielane, takie jak liczby (zegar, numery telefonów), ikony, które nie mają kierunku (tryb samolotowy, Wi-Fi), elementy sterujące odtwarzaniem oraz większość wykresów i diagramów.

Języki, w których używa się tekstu RTL, są używane na całym świecie ponad miliard osób. Deweloperzy aplikacji na Androida są rozsiani po całym świecie, dlatego aplikacja GDG Finder musi obsługiwać języki RTL.

Krok 1. Dodaj obsługę RTL

W tym kroku aplikacja GDG Finder będzie działać w językach z zapisem od prawej do lewej.

Pobierz i uruchom aplikację GDGFinderMaterial, która uruchamia aplikację w ramach tego ćwiczenia, lub przejdź od ostatniego kodu.
Otwórz plik manifestu Androida.
W sekcji <application> dodaj ten kod, by wskazać, że aplikacja obsługuje RTL.

<application
        ...
        android:supportsRtl="true">

Otwórz plik activity_main.xml na karcie Projekt.
Z menu Język podglądu wybierz Podgląd od prawej do lewej. Jeśli nie widzisz tego menu, poszerz panel lub zamknij panel Atrybuty, by go wyświetlić.

W sekcji Podgląd zwróć uwagę, że nagłówek „GDG Finder” został przesunięty w prawo, a reszta ekranu pozostaje taka sama. Ekran jest dopuszczalny. Jednak wyrównanie w widoku tekstowym jest teraz nieprawidłowe, ponieważ jest wyrównane do lewej, a nie do prawej.

Aby ta funkcja działała na urządzeniu, w Ustawieniach urządzenia lub emulatora wybierz Opcje programisty i wybierz Wymuś układ od prawej do lewej. Jeśli musisz włączyć Opcje programisty, znajdź Numer kompilacji i klikaj go, aż wyświetli się komunikat informujący, że jesteś deweloperem. (zależy to od urządzenia i wersji systemu Android).

Uruchom aplikację i upewnij się, że ekran główny jest taki sam jak na podglądzie. Zwróć uwagę, że przycisk FAB jest teraz przesunięty w lewo, a menu Hamburger po prawej.
W aplikacji otwórz panel nawigacji i przejdź do ekranu Wyszukiwanie. Jak widać poniżej, ikony są nadal po lewej stronie, a tekst jest niewidoczny. Pojawia się tekst na ekranie po lewej stronie ikony. Dzieje się tak, ponieważ kod korzysta z odwołań do lewego/prawego ekranu we właściwościach widoku i ograniczeniach układu.

Krok 2. Używaj początku i końca zamiast lewej i prawej

"W lewo i na ekranie (gdy patrzysz na ekran), nie zmienia się nawet w przypadku zmiany kierunku tekstu. Na przykład layout_constraintLeft_toLeftOf zawsze ogranicza lewą stronę elementu po lewej stronie ekranu. W aplikacji jest to tekst w językach pisanych od prawej, jak na zrzucie ekranu powyżej.

Aby to naprawić, nie używaj terminologii Start i End, a nie "left" &"right,". Ta terminologia prawidłowo ustawia początek i koniec tekstu w kierunku tekstu w bieżącym języku, dzięki czemu marginesy i układy będą w odpowiednich obszarach ekranu.

Open list_item.xml.
Zastąp wszystkie odniesienia do Left i Right odniesieniami do Start i End.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

Zastąp znacznik layout_marginLeft w systemie ImageView z elementem layout_marginStart. Spowoduje to przeniesienie marginesu w odpowiednie miejsce, aby można było odsunąć ikonę od krawędzi ekranu.

<ImageView
android:layout_marginStart="
?

Otwórz aplikację fragment_gdg_list.xml. Sprawdź listę grup GRP w panelu Podgląd. Zwróć uwagę, że ikona nadal wskazuje niewłaściwy kierunek, ponieważ jest ona lustrzana (jeśli ikona nie jest odbiciem lustrzanym, upewnij się, że nadal wyświetlasz podgląd od prawej do lewej). Zgodnie z wytycznymi Material Design ikony nie powinny być powielane.
Otwórz plik res/drawable/ic_gdg.xml.
W pierwszym wierszu kodu XML znajdź i usuń pole android:autoMirrored="true", aby wyłączyć replikę.
Sprawdź podgląd lub ponownie uruchom aplikację i otwórz ekran wyszukiwania grupy dyskusyjnej Google. Teraz układ powinien zostać poprawiony.

Krok 3. Android Studio zrobi to za Ciebie

W poprzednim ćwiczeniu podjęto pierwsze działania z zakresu obsługi języków pisanych od prawej. Na szczęście Android Studio może przeskanować Twoją aplikację i skonfigurować wiele podstawowych funkcji.

W pliku TextView w pliku list_item.xml zmień ustawienie layout_marginStart z powrotem na layout_marginLeft, aby skaner miał coś do znalezienia.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

W Android Studio wybierz Fact > Dodaj obsługę RTL tam, gdzie to możliwe i zaznacz pola aktualizacji pliku manifestu oraz pliki układu, by użyć właściwości rozpoczęcia i zakończenia.

W panelu Frefing Preview znajdź folder app i rozwiń go do momentu otworzenia wszystkich szczegółów.
Zauważ, że zmieniony folder layout_marginLeft jest podany jako kod do refaktoryzacji.

W podglądzie widać też pliki systemowe i pliki biblioteki. Kliknij prawym przyciskiem myszy układ i zegarek-v20 oraz wszystkie inne foldery, które nie są częścią aplikacji, a następnie z menu kontekstowego wybierz Wyklucz.

Teraz weź pod uwagę refaktoryzację. Jeśli pojawi się wyskakujące okienko z informacjami o plikach systemowych, upewnij się, że wszystkie foldery, które nie są częścią kodu aplikacji, zostały przez Ciebie wykluczone.

Zwróć uwagę, że pole layout_marginLeft zostało przywrócone do stanu layout_marginStart.

Krok 3. Przeglądaj foldery na różne języki

Do tej pory zmieniłeś kierunek domyślnego języka aplikacji. W przypadku aplikacji w wersji produkcyjnej wyślesz plik strings.xml do tłumacza, by przetłumaczyć go na nowy język. W ramach ćwiczeń z programu aplikacja udostępnia plik strings.xml w języku hiszpańskim (użyliśmy Tłumacza Google, aby wygenerować tłumaczenia, więc nie są one idealne).

W Android Studio przełącz widok projektu na Pliki projektów.
Rozwiń folder res i zobacz foldery res/values oraz res/values-es. Ciąg „&"” w nazwie folderu to kod języka hiszpańskiego. Foldery values-"language code" zawierają wartości dla wszystkich obsługiwanych języków. Folder values bez rozszerzenia zawiera zasoby domyślne, które mają zastosowanie w innych przypadkach.

W pliku values-es otwórz plik strings.xml i zauważ, że wszystkie ciągi są w języku hiszpańskim.
W Android Studio otwórz aplikację activity_main.xml na karcie Projekt.
Z menu Język podglądu wybierz hiszpański. Twój tekst powinien być teraz w języku hiszpańskim.

[Opcjonalnie] Jeśli dobrze znasz język RTL, utwórz folder values i plik strings.xml w tym języku, a następnie sprawdź, jak wygląda on na urządzeniu.
[Opcjonalnie] Zmień ustawienia języka na urządzeniu i uruchom aplikację. Pamiętaj, aby nie zmieniać na urządzeniu języka, którego nie czytasz, ponieważ może być to trochę utrudnione.

W poprzednim zadaniu zmieniłeś aplikację ręcznie, a następnie użyłeś Android Studio, by sprawdzić, czy można wprowadzić w niej dodatkowe poprawki do wersji RTL.

Aplikacja Accessibility Scanner pomoże Ci zwiększyć dostępność Twojej aplikacji. Skanuje aplikację na urządzeniu docelowym i proponuje ulepszenia, takie jak zwiększenie docelowych elementów dotykowych, zwiększenie kontrastu czy też dodanie opisów, które pomogą poprawić dostępność aplikacji. Accessibility Scanner jest tworzony przez Google i można go zainstalować ze Sklepu Play.

Krok 1. Zainstaluj i uruchom Accessibility Scanner

Otwórz Sklep Play i w razie potrzeby zaloguj się. Możesz to zrobić na urządzeniu fizycznym lub w emulatorze. Te ćwiczenia z programowania korzystają z emulatora.

W Sklepie Play wyszukaj Accessibility Scanner by Google LLC. Upewnij się, że korzystasz z odpowiedniej aplikacji opracowanej przez Google, ponieważ każde skanowanie wymaga wielu uprawnień.

Zainstaluj skaner w emulatorze.
Po zainstalowaniu kliknij Otwórz.
Kliknij Rozpocznij.
Kliknij OK, aby rozpocząć konfigurację Accessibility Scanner w Ustawieniach.

Kliknij Accessibility Scanner, by przejść do ustawień Ułatwienia dostępu na urządzeniu.

Kliknij Użyj usługi, aby ją włączyć.

Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie i przyznaj wszystkie uprawnienia.
Następnie kliknij OK i wróć na ekran główny. W dowolnym miejscu na ekranie może pojawić się niebieski przycisk ze znacznikiem wyboru. Kliknięcie tego przycisku spowoduje uruchomienie na pierwszym planie testów aplikacji. Możesz zmienić położenie przycisku, przeciągając go. Przycisk ten jest zawsze nad aplikacjami, więc w każdej chwili możesz przeprowadzić test.

Otwórz lub uruchom aplikację.
Kliknij niebieski przycisk i zaakceptuj dodatkowe ostrzeżenia i uprawnienia dotyczące zabezpieczeń.

Gdy pierwszy raz klikniesz ikonę Accessibility Scanner, aplikacja poprosi o zgodę na wyświetlanie wszystkiego, co wyświetla się na ekranie. To dość przerażające uprawnienie.

Nigdy nie należy udzielać takich uprawnień, ponieważ pozwalają aplikacjom na odczytywanie Twojego e-maila, a nawet na pobranie informacji o Twoim koncie bankowym. Aby jednak funkcja Accessibility Scanner działała prawidłowo, musi sprawdzić Twoją aplikację w taki sposób, w jaki zrobiłby to użytkownik – i dlaczego potrzebuje tego uprawnienia.

Kliknij niebieski przycisk i poczekaj na zakończenie analizy. Zobaczysz zrzut ekranu widoczny poniżej, z tytułem i przyciskiem FAB na czerwono. Wskazuje to dwie sugestie dotyczące ułatwień dostępu na tym ekranie.

Kliknij pole wyboru GDG Finder. Otworzy się okienko z dodatkowymi informacjami (jak pokazano poniżej), które wskazują problemy z kontrastem obrazu.
Rozwiń Kontrast obrazu, a narzędzie podpowie, jak rozwiązać problem.
Kliknij strzałki z prawej strony, by uzyskać informacje o następnym elemencie.

W aplikacji otwórz ekran Zgłoś się do programu GDG i zeskanuj go za pomocą aplikacji Accessibility Scanner. Znajdziesz tam kilka sugestii, które pokazano poniżej. 12. Pamiętaj, że niektóre z tych produktów są duplikatami podobnych produktów.
Kliknij &&tquo;stack" ikonę na dolnym pasku narzędzi, aby uzyskać listę wszystkich sugestii widocznych na poniższym zrzucie ekranu po prawej stronie. Wszystkie te problemy rozwiązujesz w ćwiczeniach z programowania.

Ułatwienia dostępu na Androida, czyli zbiór aplikacji Google, zawiera narzędzia ułatwiające dostęp do aplikacji. Zawiera takie narzędzia jak TalkBack. TalkBack to czytnik ekranu oferujący informacje głosowe, reakcyjne na dotyk i reakcje na dźwięk. Umożliwia on użytkownikom poruszanie się po urządzeniach i korzystanie z nich bez użycia wzroku.

Okazuje się, że aplikacja TalkBack jest używana nie tylko przez osoby niewidome, ale też przez osoby z wadą wzroku. A może nawet osobom, które chcą odpocząć.

Ułatwienia dostępu są więc dostępne dla wszystkich. W tym zadaniu wypróbowujesz TalkBack i aktualizujesz aplikację, aby działała z nim.

Krok 1. Zainstaluj i uruchom Accessibility Suite

Aplikacja TalkBack jest wstępnie zainstalowana na wielu urządzeniach fizycznych, ale w emulatorze musisz ją zainstalować.

Otwórz Sklep Play.
Znajdź Ułatwienia dostępu. Sprawdź, czy to odpowiednia aplikacja Google.
Jeśli nie jest zainstalowany, zainstaluj pakiet ułatwień dostępu.
Aby włączyć TalkBack na urządzeniu, otwórz Ustawienia > Ułatwienia dostępu i włącz TalkBack, wybierając Użyj usługi. Podobnie jak w przypadku skanera ułatwień dostępu TalkBack potrzebuje uprawnień, by odczytywać zawartość ekranu. Gdy zaakceptujesz prośby o uprawnienia, TalkBack wyświetli listę samouczków, które pomogą Ci skutecznie używać tej aplikacji.
Tutaj możesz zatrzymać odtwarzanie i wykonać samouczki (chyba że dowiesz się, jak wyłączyć TalkBack po zakończeniu sesji).
Aby zamknąć samouczek, kliknij przycisk Wstecz, by go wybrać, a następnie kliknij dwukrotnie w dowolnym miejscu na ekranie.

Odkrywaj w aplikacji GDG Finder za pomocą TalkBack. Zwróć uwagę, gdzie TalkBack nie podaje żadnych przydatnych informacji o ekranie ani elementach sterujących. W następnym ćwiczeniu naprawisz to.

Krok 2. Dodaj opis treści

Deskryptory treści to etykiety opisowe, które wyjaśniają znaczenie widoków. Większość wyświetleń powinna zawierać opisy treści.

Po uruchomieniu aplikacji GDG Finder i włączeniu Talbacka przejdź na ekran Apply to run GDG (Zgłoś się, aby uruchomić GDG).
Kliknij zdjęcie główne ... nic się nie dzieje.
Otwórz plik add_gdg_fragment.xml.
W ImageView dodaj atrybut deskryptora treści tak jak poniżej. Ciąg stage_image_description znajdziesz w pliku strings.xml.

android:contentDescription="@string/stage_image_description"

Uruchom aplikację.
Wybierz Uruchom, aby uruchomić GDG i kliknij obraz. Powinien wyświetlić się krótki opis obrazu.
[Opcjonalnie] Dodaj opisy treści do innych obrazów w tej aplikacji. Wszystkie obrazy w wersji produkcyjnej muszą mieć opis.

Krok 3. Dodaj wskazówki do pól tekstowych, które można edytować

W przypadku elementów możliwych do edytowania, takich jak EditText, możesz użyć android:hint w pliku XML, aby pomóc użytkownikom zrozumieć, co należy wpisać. Wskazówka jest zawsze wyświetlana w interfejsie, ponieważ jest to tekst domyślny w polu do wprowadzania danych.

Jeszcze w pliku add_gdg_fragment.xml.
Dodaj opisy i wskazówki dotyczące treści, korzystając z poniższego kodu jako wskazówek.

Dodaj do textViewIntro:

android:contentDescription="@string/add_gdg"

Dodaj odpowiednio do edytowanych tekstów:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

Dodaj opis treści do labelTextWhy.

android:contentDescription="@string/motivation"

Dodaj podpowiedź do EditTextWhy. Gdy oznaczysz pola edycji etykietami, dodaj do etykiety opis zawartości, a także podpowiedź.

android:hint="@string/enter_motivation"

Dodaj opis treści do przycisku przesyłania. Wszystkie przyciski muszą mieć opis tego, co się dzieje po naciśnięciu.

android:contentDescription="@string/submit_button_description"

Uruchom aplikację z obsługą Talbacka i wypełnij formularz, by przesłać GDG.

Krok 4. Utwórz grupę treści

Do elementów interfejsu, które TalkBack ma traktować jako grupę, możesz użyć grupowania treści. Pogrupowane powiązane treści są ogłaszane razem. Użytkownicy technologii wspomagających nie będą wtedy musieli przesuwać, skanować ani czekać tak często, aby wykryć wszystkie informacje widoczne na ekranie. Nie ma to wpływu na sposób wyświetlania elementów sterujących na ekranie.

Aby pogrupować komponenty interfejsu, umieść je w ViewGroup, np. LinearLayout. W aplikacji GDG Finder elementy labelTextWhy i editTextWhy doskonale nadają się do grupowania, ponieważ semantycznie należą do siebie.

Otwórz plik add_gdg_fragment.xml.
Możesz pakować grupę LinearLayout w okolicach LabelTextWhy i EditTextWhy, aby utworzyć grupę treści. Skopiuj i wklej poniższy kod. Ten nagłówek LinearLayout zawiera już niektóre style, których potrzebujesz. (Upewnij się, że button nie znajduje się poza LinearLayout).

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

Wybierz Kod & ; formatuj kod, aby prawidłowo zastosować wcięcie.
Usuń wszystkie marginesy układu z labelTextWhy i editTextWhy.
W labelTextWhy zmień ograniczenie layout_constraintTop_toTopOf na contentGroup.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

W editTextWhy zmień ograniczenie layout_constraintBottom_toBottomOf na contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

Ogranicz EditTextRegion i Button do contentGroup, aby wyeliminować błędy.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

Dodaj marginesy do pliku LinearLayout. Opcjonalnie wyodrębnij ten margines jako wymiar.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

Jeśli potrzebujesz pomocy, sprawdź, czy kod nie różni się od add_gdg_fragment.xml.

Uruchom aplikację i przejrzyj ekran Zastosuj, aby uruchomić GDG w TalkBack.

Krok 5. Dodaj aktywny region

Obecnie etykieta na przycisku przesyłania to OK. Lepiej byłoby, gdyby przed przesłaniem formularza przycisk miał jedną etykietę i opis, a po kliknięciu przez użytkownika i przesłaniu formularza dynamicznie zmieniał się na inną etykietę i opis treści. Możesz to zrobić, korzystając z aktywnego regionu.

Opublikowany region informuje usługi ułatwień dostępu, czy użytkownik powinien być powiadamiany o zmianie widoku. Na przykład poinformowanie użytkownika o nieprawidłowym haśle lub błędzie sieci to doskonały sposób na zwiększenie dostępności aplikacji. Dla uproszczenia w tym przykładzie informujesz użytkownika o zmianie stanu przycisku przesyłania.

Otwórz plik add_gdg_fragment.xml.
Zmień przypisanie tekstu na przycisku na Prześlij przy użyciu dostarczonego zasobu ciągu submit.

android:text="@string/submit"

Dodaj aktywny region do przycisku, ustawiając atrybut android:accessibilityLiveRegion. Podczas pisania możesz wybrać kilka opcji. W zależności od tego, jak ważna jest zmiana, możesz zdecydować, czy chcesz przerwać działanie użytkownika. Dzięki wartościom „ asserwacja” usługi ułatwień dostępu przerywają mową, aby natychmiast powiadomić o zmianach w tym widoku. Jeśli ustawisz wartość &"none", nie zapowiedzią żadnych zmian. Usługi ułatwień dostępu wskazują na zmiany, ale poczekaj na swoją kolej. Ustaw wartość na &"polite&quot.

android:accessibilityLiveRegion="polite"

W pakiecie add otwórz AddGdgFragment.kt.
W showSnackBarEvent Observer po zakończeniu wyświetlania SnackBar ustaw nowy opis i tekst przycisku.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

Uruchom aplikację i kliknij przycisk. Przycisk i czcionka są za małe.

Krok 6. Popraw styl przycisku

W pliku add_gdg_fragment.xml zmień przycisk width i height na wrap_content, dzięki czemu pełna etykieta będzie widoczna, a przycisk będzie miał prawidłowy rozmiar.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Usuń z przycisku atrybuty backgroundTint, textColor i textSize, aby aplikacja działała lepiej.
Usuń atrybut textColor z textViewIntro. Kolory motywu powinny zapewniać dobry kontrast.
Uruchom aplikację. Przycisk Prześlij jest znacznie bardziej przydatny. Kliknij Prześlij i zobacz, jak zmieni się stan na Gotowe.

Elementy tego typu to kompaktowe elementy reprezentujące atrybut, tekst, element lub działanie. Umożliwiają użytkownikom wpisywanie informacji, wybieranie opcji, filtrowanie treści lub wywoływanie działania.

Widżet Chip jest cienkim kodem towarzyszącym wokół elementu ChipDrawable, który zawiera cały układ i logikę rysowania. Dodatkowa logika zapewnia obsługę dotyku, myszy, klawiatury i ułatwień dostępu. Główny element i ikona zamknięcia są uznawane za osobne logiczne widoki podrzędne i obejmują odrębne działanie oraz stan nawigacji.

Elementy chipsowe są ruchome. Rysunki Android umożliwiają rysowanie obrazów, kształtów i animacji na ekranie oraz mogą mieć stały rozmiar lub rozmiar dynamicznie. Możesz używać obrazów jako rysunków, takich jak obrazy w aplikacji GDG. Możesz też używać rysunków wektorowych, aby rysować, co tylko potrafisz. W ćwiczeniach z programowania nie ma również rozwiązania, którego rozmiar możesz nazywać rysunkiem z 9 poprawkami. Logo GDG (w pliku drawable/ic_gdg.xml) można rysować.

Rysunki nie są widokami, więc nie można umieścić rysunku bezpośrednio w ConstraintLayout, trzeba umieścić go w ImageView. Możesz też użyć rysunku, aby utworzyć tło dla widoku tekstu lub przycisku, a tło wykorzystać tekst.

Krok 1. Dodaj elementy do listy grup GDG

W umieszczonym poniżej elemencie wyświetla się 3 elementy rysowane. Tło i znacznik wyboru można rysować. Dotknięcie tego elementu powoduje utworzenie efektu fali. Jest on wykonywany za pomocą specjalnego elementu RippleDrawable, który pokazuje efekt echa w odpowiedzi na zmiany stanu.

W tym zadaniu dodajesz elementy do listy grup GDG i zmieniasz je po ich wybraniu. W tym ćwiczeniu dodajesz rząd przycisków zwanych układami u góry ekranu Szukaj. Każdy przycisk filtruje listę grupy GDG, dzięki czemu użytkownik otrzymuje tylko wyniki z wybranego regionu. Gdy wybierzesz przycisk, zmieni się jego tło i pojawi się ikona potwierdzenia.

Otwórz plik fragment_gdg_list.xml.
Utwórz com.google.android.material.chip.ChipGroup w obrębie właściwości HorizontalScrollView.Ustaw singleLine jako true, aby wszystkie elementy były umieszczone na jednej linii, którą można przewijać w poziomie. Ustaw właściwość singleSelection na true, aby za każdym razem można było wybrać tylko 1 element. Oto kod.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

W folderze układ utwórz nowy plik zasobu układu o nazwie region.xml do zdefiniowania układu jednego zasobu Chip.
W pliku egion.xml zastąp cały kod układem Chip w sposób opisany poniżej. Zauważ, że Chip jest komponentem Material. Zwróć uwagę na znacznik wyboru, ustawiając właściwość app:checkedIconVisible. Wyświetli się błąd dotyczący brakującego koloru selected_highlight.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

Aby utworzyć brakujący kolor selected_highlight, umieść kursor na ikonie selected_highlight, otwórz menu intencji i utwórz zasób koloru dla zaznaczonego fragmentu. Opcje domyślne działają normalnie, więc kliknij OK. Plik zostanie utworzony w folderze res/color.
Otwórz plik res/color/selected_highlight.xml. Na tej liście stanów oznaczonej kolorem <selector> możesz podać różne kolory dla różnych stanów. Każdy stan i powiązany z nim kolor są kodowane jako <item>. Więcej informacji o tych kolorach znajdziesz w sekcji Łączenie kolorów.

W polu <selector> dodaj do listy stanów element w domyślnym kolorze colorOnSurface. Na listach stanów trzeba zawsze uwzględnić wszystkie stany. Można to zrobić, stosując domyślny kolor.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

Nad kolorem domyślnym dodaj item o kolorze colorPrimaryVariant i ogranicz jego użycie do wybranego stanu (true). Listy stanów są sprawdzane od góry do dołu. Jeśli żaden z stanów nie pasuje, używany jest stan domyślny.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

Krok 2. Wyświetl rząd elementów

Aplikacja GDG tworzy listę chipów wyświetlających te regiony. Po wybraniu elementu aplikacja wyświetla wyniki tylko w tym regionie.

W pakiecie search otwórz GdgListFragment.kt.
W onCreateView(), tuż nad instrukcją return, dodaj obserwator w viewModel.regionList i zastąp onChanged(). W przypadku zmiany listy regionów podanej przez model widoku elementy trzeba utworzyć od nowa. Dodaj wyrażenie zwracające natychmiast, jeśli podany data to null.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

W onChanged(), pod testem null, przypisz binding.regionList do nowej zmiennej o nazwie chipGroup, aby zapisać ją w pamięci podręcznej regionList.

val chipGroup = binding.regionList

Poniżej utwórz nowy element layoutInflator do nadmuchiwania elementów z: chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

Wyczyść i odbuduj projekt, aby pozbyć się błędu wiązania danych.

Pod infrastrukturą możesz teraz tworzyć elementy, po jednym dla każdego regionu w regionList.

Utwórz zmienną children do przechowywania wszystkich elementów. Przypisz do niego funkcję mapowania w przekazywanym elemencie data, aby utworzyć i zwrócić każdy element.

val children = data.map {}

W elemencie lambda mapy utwórz element i go napełnij dla każdego obiektu regionName. Pełny kod znajduje się poniżej.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

W lambdzie, tuż przed zwróceniem wartości chip, dodaj detektor kliknięć. Po kliknięciu chip ustaw jego stan na checked. Wywołaj onFilterChanged() w obiekcie viewModel, co spowoduje uruchomienie sekwencji zdarzeń, które pobierają wynik dla tego filtra.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

Na końcu lamby usuń wszystkie bieżące widoki z chipGroup, a potem dodaj wszystkie elementy z children do elementu chipGroup. Nie możesz zaktualizować elementów, więc musisz usunąć i ponownie utworzyć zawartość elementu chipGroup.

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

Gotowy obserwator powinien wyglądać tak:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

Uruchom aplikację i wyszukaj wyszukiwarkę GDGS, aby otworzyć ekran Search (Wyszukiwanie), aby używać nowych elementów. Gdy klikniesz każdy element, aplikacja wyświetli pod nim grupy filtrów.

Tryb nocny umożliwia aplikacji zmianę koloru aplikacji na ciemny motyw, na przykład gdy tryb urządzenia jest włączony. W trybie nocnym aplikacje domyślnie zmieniają ciemne tło na jasne i odpowiednio zmieniają wszystkie pozostałe elementy ekranu.

Krok 1. Włącz tryb nocny

Aby ustawić ciemny motyw dla aplikacji, musisz zmienić motyw Light z motywu o nazwie DayNight. Motyw DayNight jest jasny lub ciemny (w zależności od trybu).

W styles.xml, zmień motyw nadrzędny AppTheme z Light na DayNight.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

W metodzie MainActivity&<39;s onCreate() wywołaj AppCompatDelegate.setDefaultNightMode(), by automatycznie włączyć ciemny motyw.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Uruchom aplikację i sprawdź, czy została przełączona na ciemny motyw.

Krok 2. Wygeneruj własną paletę kolorów motywu

Aby dostosować ciemny motyw, utwórz foldery z kwalifikatorem -night i użyj go. Na przykład w trybie nocnym możesz ustawić konkretne kolory, tworząc folder o nazwie values-night.

Otwórz narzędzie selektor kolorów material.io i utwórz paletę kolorów motywu nocnego. Możesz na przykład oprzeć ją na ciemnoniebieskim kolorze.
Wygeneruj i pobierz plik colors.xml.
Przełącz się na widok Project Files (Pliki projektu), aby wyświetlić wszystkie foldery w projekcie.
Znajdź folder res i rozwiń go.
Utwórz folder zasobu res/values-night.
Dodaj nowy plik colors.xml do folderu zasobu res/values-night.
Uruchom aplikację przy włączonym trybie nocnym, a aplikacja powinna używać nowych kolorów określonych dla ustawienia res/values-night. Zauważ, że elementy będą używać nowego koloru dodatkowego.

Projekt w Android Studio: GDGFinderFinal.

Obsługa języków pisanych od prawej do lewej

W pliku manifestu Androida ustaw android:supportsRtl="true".
Możesz wyświetlić podgląd RTL w emulatorze i sprawdzić układ ekranu za pomocą własnego języka. Na urządzeniu lub w emulatorze otwórz Settings (Ustawienia) i w sekcji Developer Options (Opcje programisty) wybierz Force RTL układ.
Zastąp odniesienia do Left i Right odniesieniami do Start i End.
Wyłącz Lustrzane rysunki, usuwając android:autoMirrored="true".
Wybierz Fact > Dodaj obsługę RTL tam, gdzie to możliwe, by Android Studio zrobił to za Ciebie.
Używaj folderów values-"language code" do przechowywania zasobów w określonym języku.

Skanowanie w poszukiwaniu ułatwień dostępu

W Sklepie Play pobierz Accessibility Scanner by Google LLC i uruchom go na potrzeby skanowania pod kątem elementów ekranu.

Projektowanie TalkBack z opisami treści

Zainstaluj oferowany przez Google pakiet Android Accessibility Suite zawierający TalkBack.
Dodawanie opisów treści do wszystkich elementów interfejsu. Przykład:
android:contentDescription="@string/stage_image_description"
W przypadku edytowalnego elementu, takiego jak EditText, użyj atrybutu android:hint w pliku XML, aby poinformować użytkownika o tym, co powinien wpisać.
Utwórz grupy treści, dodając powiązane elementy do grupy widoku danych.
Utwórz aktywny region, aby przekazać użytkownikom dodatkowe opinie za pomocą android:accessibilityLiveRegion.

Używanie filtra Chips do wdrożenia filtra

Układy to kompaktowe elementy, które reprezentują atrybut, tekst, element lub działanie.
Aby utworzyć grupę elementów, użyj com.google.android.material.chip.ChipGroup.
Zdefiniuj układ jednego elementu com.google.android.material.chip.Chip.
Jeśli chcesz zmienić kolory, podaj listę kolorów w postaci <selector> z kolorami stanowymi:
<item android:color="?attr/colorPrimaryVariant" android:state_selected="true" />
Powiąż elementy z aktywnymi danymi, dodając obserwatora do danych w modelu widoku.
Aby wyświetlić elementy, utwórz inflator dla grupy elementów:
LayoutInflater.from(chipGroup.context)
Utwórz elementy, dodaj detektor kliknięć, który wywoła działanie, a następnie dodaj elementy do grupy elementów.

Obsługa trybu ciemnego

Urządzenie DayNight AppTheme obsługuje tryb ciemny.
Tryb ciemny możesz ustawić automatycznie:
AppCompatDelegate.setDefaultNightMode()
Utwórz folder zasobu res/values-night, aby przesłać kolory i wartości niestandardowe w trybie ciemnym.

Dokumentacja dla programistów Androida:

Inne zasoby:

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.

Pytanie 1

Który z tych warunków jest wymagany w przypadku języków pisanych od prawej?

▢ Zastąp Left i Right we właściwościach elementami Start i End

▢ Zmień język na RTL

▢ Upewnij się, że wszystkie ikony korzystają z pola android:autoMirrored="true"

▢ Umieszczanie opisów treści

Pytanie 2

Które z tych narzędzi ułatwień dostępu są wbudowane w większość urządzeń z Androidem?

▢ TalkBack

▢ Accessibility Scanner

▢ W Android Studio Fact > jeśli to możliwe, dodaj obsługę RTL

▢ Lint

Pytanie 3

Które z poniższych stwierdzeń na temat elementów jest prawdziwe?

▢ Elementy będą wyświetlane w ramach ChipGroup.

▢ Możesz podać listę kolorów w polu ChipGroup.

▢ Elementy to kompaktowe elementy reprezentujące dane wejściowe, atrybut lub działanie.

▢ Zawsze trzeba włączyć DarkTheme, jeśli aplikacja korzysta z elementów.

Pytanie 4

Który motyw jest odpowiedni do trybu ciemnego i jasnego?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Pytanie 5

Czym jest region aktywny?

▢ Węzeł zawierający informacje ważne dla użytkownika

▢ Region ekranu, który zmienia kształt zgodnie z wytycznymi dotyczącymi materiałów

▢ Widok, który umożliwia strumieniowe przesyłanie wideo

▢ Animowana rysunek