Android Kotlin Fundamentals 01.4: naucz się pomagać sobie

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

W tym ćwiczeniu poznasz zasoby przydatne dla deweloperów aplikacji na Kotlin na Androida – w tym szablony, dokumentację, filmy i przykładowe aplikacje.

Co musisz wiedzieć

  • Podstawowy przepływ pracy Androida Studio.
  • Jak używać Edytora układu w Android Studio.

Czego się nauczysz

  • Gdzie znaleźć informacje i zasoby dla deweloperów aplikacji Kotlin i Android.
  • Jak zmienić ikonę programu uruchamiającego w aplikacji?
  • Jak korzystać z pomocy podczas tworzenia aplikacji na Androida za pomocą Kotlin?

Jakie zadania wykonasz:

  • Odkryj zasoby dostępne dla deweloperów aplikacji Kotlin na Androida na wszystkich poziomach.
  • Pobierz i zapoznaj się z przykładową aplikacją Kotlin na Androida.
  • Zmień ikonę programu uruchamiającego aplikację.

Dzięki nim dowiesz się więcej o szablonach, przykładach, dokumentacji i innych zasobach dostępnych dla deweloperów aplikacji na Kotlin na Androida.

Najpierw utwórz prostą aplikację na podstawie szablonu Android Studio i zmodyfikuj ją. Następnie pobierz i przejrzyj przykładową aplikację Android Sunflower. Zastępujesz ikonę programu uruchamiającego przykładową aplikację (słonecznik) zasobem obrazu w formie klipu, który jest dostępny w Android Studio (uśmiechnięta buźka).

Android Studio udostępnia szablony popularnych i zalecanych projektów aplikacji oraz aktywności. Wbudowane szablony pozwalają zaoszczędzić czas i pomagają przestrzegać sprawdzonych metod projektowania.

Każdy szablon zawiera aktywność szkieletową i interfejs użytkownika. W tym kursie masz już szablon pustej aktywności. Szablon Podstawowej aktywności zawiera więcej funkcji i zawiera zalecane funkcje aplikacji, takie jak menu opcji na pasku aplikacji na urządzeniach z Androidem.

Krok 1. Poznaj architekturę podstawowej aktywności

  1. Utwórz projekt w Android Studio.
  2. W oknie Choose your project (Wybierz projekt) wybierz szablon Basic Activity (Aktywność podstawowa) i kliknij Next (Dalej).
  3. W oknie Skonfiguruj projekt nadaj aplikacji dowolną nazwę. Wybierz Kotlin dla języka i zaznacz pole wyboru Użyj artefaktów Androida X. Kliknij Zakończ
  4. Utwórz aplikację i uruchom ją w emulatorze lub na urządzeniu z Androidem.
  5. Znajdź elementy oznaczone etykietami na rysunku i w tabeli poniżej. Znajdź ich odpowiedniki na urządzeniu lub na ekranie emulatora. Sprawdź odpowiedni kod Kotlin i pliki XML opisane w tabeli.

Poznanie kodu źródłowego Kotlin i plików XML pomoże Ci rozszerzyć i dostosować szablon aktywności podstawowej do Twoich potrzeb.

Architektura szablonu aktywności podstawowej

#

Opis interfejsu

Informacje o kodzie

1

Pasek stanu, który zawiera i kontroluje system Android.

Niewidoczna w kodzie szablonu, ale z poziomu aktywności możesz uzyskać dostęp do paska stanu. W razie potrzeby możesz na przykład dodać kod w postaci MainActivity.kt, aby ukryć pasek stanu.

2

Pasek aplikacji, nazywany także paskiem działań, udostępnia strukturę wizualną, standardowe elementy wizualne i elementy nawigacyjne.

W folderze activity_main.xml znajdź pasek Toolbar

wewnątrz elementu AppBarLayout. Aby zapewnić zgodność wsteczną, element AppBarLayout w szablonie zawiera element Toolbar o tej samej funkcji co element Actionbar.

Aby zmienić wygląd paska aplikacji, zmień atrybuty paska narzędzi. Samouczki paska aplikacji znajdziesz w artykule Dodawanie paska aplikacji.

3

Nazwa aplikacji jest początkowo pobierana z nazwy pakietu, ale możesz ją zmienić.

AndroidManifest.xml – znajdź

android:label="@string/app_name".

Określ ciąg app_name w strings.xml.

4

Rozszerzone menu Opcje zawiera elementy menu odpowiadające danej aktywności. Zawiera on też opcje menu globalnego, takie jak Szukaj i Ustawienia, które są dostępne w aplikacji. Pozycje w menu aplikacji są dostępne w tym menu.

MainActivity.kt to

Metoda onOptionsItemSelected() wdraża, co się dzieje, gdy użytkownik wybiera pozycję menu.

Aby zobaczyć pozycje menu opcji, otwórz res/menu/menu_main.xml.

w pliku konfiguracji serwera. W tym szablonie określony jest tylko element menu Settings (Ustawienia).

5

CoordinatorLayoutViewGroup to układ, który zapewnia mechanizmy interakcji między elementami interfejsu. Interfejs użytkownika znajduje się w pliku content_main.xml, który zawiera ten element ViewGroup.

W sekcji activity_main.xml poszukaj instrukcji include layout. W tym układzie nie określono żadnych widoków. Zawiera on układ content_main, w którym określono widoki aplikacji. Widoki systemu są niezależne od widoków unikalnych dla Twojej aplikacji.

6

Szablon wykorzystuje TextView do wyświetlania elementu „Hello World"”. Zamieniasz TextView na elementy interfejsu aplikacji.

Widok tekstowy „Hello World” znajduje się w pliku content_main.xml. Wszystkie elementy interfejsu aplikacji powinny być zdefiniowane w tym pliku.

7

Pływający przycisk polecenia (FAB)

W elemencie activity_main.xml poszukaj elementu FloatingActionButton. FAB jest zdefiniowany jako element interfejsu za pomocą ikony klipu SVG. MainActivity.kt zawiera fragment kodu w elemencie onCreate(), który określa odbiornik onClick() na potrzeby FAB.

Krok 2. Dostosuj aplikację utworzoną za pomocą szablonu

Zmień wygląd aplikacji utworzonej na podstawie szablonu aktywności podstawowej. Możesz na przykład zmienić kolor paska aplikacji, żeby pasował do paska stanu. Na niektórych urządzeniach pasek stanu jest ciemniejszym odcieniem w tym samym kolorze, w którym znajduje się pasek aplikacji.

  1. Zmień nazwę aplikacji wyświetlanej na pasku aplikacji. Aby to zrobić, zmień zasób ciągu znaków app_name w pliku res > values > string.xml na taki: 
<string name="app_name">New Application</string>
  1. Zmień kolor paska aplikacji (Toolbar) w szablonie &ret > activity_main.xml, zmieniając atrybut android:background na "?attr/colorPrimaryDark". Ta wartość ustawia ciemniejszy kolor główny na pasku aplikacji w kolorze ciemniejszym niż na pasku stanu:
android:background="?attr/colorPrimaryDark"
  1. Uruchom aplikację. Nowa nazwa aplikacji pojawi się na pasku stanu, a kolor tła paska aplikacji będzie ciemniejszy i będzie zgodny z kolorem paska stanu. Gdy klikniesz przycisk FAB, pojawi się pasek powiadomień – na zrzucie ekranu poniżej będzie to ikona 1.
  2. Zmień tekst paska powiadomień. Aby to zrobić, otwórz aplikację MainActivity i poszukaj kodu przejściowego w aplikacji onCreate(), który ustawia odbiornik onClick() tego przycisku. Zmień nazwę "Replace with your own action" na inną. Przykład:
fab.setOnClickListener { view ->
   Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
       .setAction("Action", null).show()
}
  1. FAB używa koloru uzupełniającego aplikacji, więc jednym ze sposobów na zmianę koloru FAB jest zmiana koloru uzupełniającego. Aby zmienić kolor uzupełniający, otwórz plik res > values >color.xml i zmień atrybut colorAccent, jak pokazano poniżej. (Pomoc dotyczącą wyboru kolorów znajdziesz w systemie kolorów Material Design).
<color name="colorAccent">#1DE9B6</color>
  1. Uruchom aplikację. FAB używa nowego koloru, a tekst z paska narzędzi zmienił się.

Krok 3. Dowiedz się, jak dodawać aktywności przy użyciu szablonów

Do tej pory na potrzeby tych ćwiczeń z programowania za pomocą szablonów pustej aktywności i aktywności podstawowej możesz rozpocząć nowe projekty. Szablonów aktywności możesz też używać podczas tworzenia działań po utworzeniu projektu.

  1. Utwórz projekt aplikacji lub wybierz istniejący.
  2. W okienku Project > Android kliknij prawym przyciskiem myszy folder java.
  3. Wybierz Nowa > Aktywność > Galeria.
  4. Dodaj aktywność do aplikacji, wybierając jeden z szablonów Activity. Na przykład wybierz Aktywność w szufladzie nawigacji, by dodać Activity z szufladą nawigacji.
  5. Aby wyświetlić aktywność w edytorze układu, kliknij dwukrotnie plik aktywności (na przykład activity_main2.xml). Użyj karty Projekt i karty Tekst, aby przełączać się między podglądem układu aktywności a kodem układu.

Repozytoria Przykłady Google w GitHubie dostarczają próbki kodu z Androida Kotlin, które możesz analizować, kopiować i włączać do swoich projektów.

Krok 1. Pobierz i uruchom kod z Kotlin na Androida

  1. Otwórz w przeglądarce stronę github.com/googlesamples.
  2. Jako Language (Język) wybierz Kotlin.
  3. Wybierz przykładową aplikację Kotlin na Androida, która została ostatnio zmodyfikowana, i pobierz kod projektu tej aplikacji. W tym przykładzie pobierz plik ZIP aplikacji android-sunflower, który pokazuje niektóre komponenty Jetpacka na Androida.
  4. W Android Studio otwórz projekt android-sunflower-master.
  5. Zaakceptuj wszystkie rekomendacje aktualizacji Android Studio, a potem uruchom aplikację w emulatorze lub na urządzeniu z Androidem.

Krok 2. Zapoznaj się z przykładowym kodem Kotlin na Androida

Teraz, gdy w Android Studio masz już otwartą przykładową aplikację Android Sunflower, zapoznaj się z nią i zapoznaj się z jej plikami projektów.

  1. Aby zobaczyć, jak działa przykładowa aplikacja, otwórz plik README tej aplikacji na GitHubie. Przykład znajdziesz w artykule README.
  2. W Android Studio otwórz jeden z plików aktywności w Kotlin, takich jak GardenActivity.kt.
  3. W GardenActivity.kt znajdziesz zajęcia, typy i procedury, których nie znasz, i znajdziesz je w dokumentacji dla programistów aplikacji na Androida. Więcej informacji o metodzie setContentView() znajdziesz na stronie developers.android.com – znajdziesz tam setContentView().

Krok 3. Zmień ikonę programu uruchamiającego

W tym kroku zmienisz ikonę programu uruchamiającego na przykładową aplikację Sunflower na Androida. Dodajesz obrazek SVG i używasz go do zastąpienia bieżącej ikony programu uruchamiającego Androida Sunflower.

Ikony programu uruchamiającego

Każda aplikacja utworzona w Android Studio zaczyna się od domyślnej ikony programu uruchamiającego, która reprezentuje tę aplikację. Ikony są czasem nazywane ikonami aplikacji lub ikonami produktu.

Jeśli opublikujesz aplikację w Google Play, na stronie z informacjami o niej oraz w wynikach wyszukiwania w Sklepie Google Play pojawi się ikona programu z aplikacjami.

Gdy aplikacja zostanie zainstalowana na urządzeniu z Androidem, na ekranie głównym urządzenia i w innym miejscu pojawi się ikona programu uruchamiającego tę aplikację. Na przykład ikona programu uruchamiającego Androida Sunflower pojawi się w oknie Szukaj aplikacji na urządzeniu, które przedstawia 1 na zrzucie ekranu poniżej. Domyślna ikona programu uruchamiającego (pokazana poniżej jako 2 poniżej) jest początkowo używana we wszystkich projektach aplikacji utworzonych w Android Studio.

Zmiana ikony programu uruchamiającego

Proces zmiany ikony programu uruchamiającego zawiera opis funkcji zasobu graficznego w Android Studio.

Aby zmienić ikonę programu uruchamiającego Androida Sunflower w Android Studio, wykonaj te czynności:

  1. W panelu Projekt > Android kliknij prawym przyciskiem myszy (lub kliknij, przytrzymując naciśnięty klawisz Control) folder res. Wybierz Nowy > Zasób graficzny. Pojawi się okno Skonfiguruj zasób graficzny.

Kliknij kartę Warstwa na pierwszym planie dla ikony programu uruchamiającego.

  1. W polu Typ ikony wybierz opcję Ikony menu z aplikacjami (Adaptacyjne lub starsze), jeśli nie jest jeszcze wybrana. Kliknij kartę Warstwa na pierwszym planie.
  2. Jako Typ zasobu wybierz Klip widoczny na zrzucie ekranu poniżej.

  3. Kliknij ikonę robota w polu Klip, która wyświetla się na zrzucie ekranu powyżej 2. Pojawi się okno Wybierz ikonę z zestawem ikon w stylu Material Design.
  4. Przejrzyj okno Wybierz ikonę lub wyszukaj ikonę po nazwie. Wybierz ikonę, na przykład ikonę nastroju, aby zaproponować dobry nastrój. Kliknij OK.

  1. W oknie Skonfiguruj zasób graficzny kliknij kartę Warstwa tła. Jako Typ zasobu wybierz Kolor. Kliknij kolor i wybierz kolor, którego chcesz użyć jako tła ikony.
  2. Kliknij kartę Starsze i sprawdź ustawienia domyślne. Potwierdź, że chcesz generować starsze, okrągłe ikony i ikony Sklepu Google Play. Kliknij Dalej.
  3. Pojawi się okno dialogowe Potwierdź ikonę, w którym zobaczysz, gdzie są dodawane i zastępowane pliki ikon. Kliknij Zakończ
  4. Uruchom aplikację w emulatorze AVD lub na urządzeniu z Androidem.

Android Studio automatycznie dodaje obrazy menu z aplikacjami do katalogów mipmap o różnej gęstości ekranu. Aplikacja Android Sunflower będzie teraz używać nowej ikony cliparty.

  1. Ponownie uruchom aplikację. Upewnij się, że na ekranie wyszukiwania jest widoczna nowa ikona programu uruchamiającego.

Krok 1. Zapoznaj się z oficjalną dokumentacją Androida

Przejrzyj kilka najprzydatniejszych witryn z dokumentacją na Androida i dowiedz się, co jest dostępne:

  1. Wejdź na developer.android.com. Ta oficjalna dokumentacja dla deweloperów Androida jest aktualna.
  2. Wejdź na developer.android.com/design/. Na tej stronie znajdziesz wskazówki dotyczące projektowania wyglądu i funkcji aplikacji na Androida wysokiej jakości.
  3. Wejdź na stronę material.io, która jest witryną Material Design. Material Design to filozofia projektowania, która określa, jak wszystkie aplikacje, a nie tylko aplikacje na Androida, powinny wyglądać i działać na urządzeniach mobilnych. Użyj linków, aby dowiedzieć się więcej o stylu Material Design. Aby na przykład dowiedzieć się więcej o używaniu koloru, kliknij kartę Projekt i wybierz Kolor.
  4. Na stronie developer.android.com/docs/ znajdziesz informacje o interfejsie API, dokumentację, samouczki, przewodniki po narzędziach i próbki kodu.
  5. Informacje o publikowaniu aplikacji w Google Play znajdziesz na stronie developer.android.com/distribute/. Google Play to system cyfrowej dystrybucji aplikacji Google z pakietem Android SDK. Użyj Konsoli Google Play, aby zwiększyć liczbę użytkowników i zacząć zarabiać.

Krok 2. Przeglądaj treści od zespołu Androida i wyszukiwarki Google

  1. Zajrzyj na kanał YouTube dla programistów Androida, który zawiera wiele przydatnych samouczków i wskazówek.
  2. Wejdź na oficjalnego bloga na Androida, na którym zespół Android publikuje wiadomości i wskazówki.
  3. Wpisz pytanie w wyszukiwarce Google, a wyszukiwarka Google zbierze odpowiednie wyniki z różnych zasobów. Możesz na przykład zadać pytanie w wyszukiwarce Google i sprawdzić, która wersja Androida jest najpopularniejsza w Indiach. Możesz nawet wpisać komunikat o błędzie w wyszukiwarce Google.

Krok 3. Wyszukaj na stronie Stack Overflow

Stack Overflow to społeczność programistów, którzy pomagają sobie nawzajem. Jeśli napotkasz problem, jest bardzo prawdopodobne, że ktoś już opublikował odpowiedź.

  1. Otwórz stronę Stack Overflow.
  2. W polu wyszukiwania wpisz pytanie, na przykład „"Jak skonfigurować i używać ADB przez Wi-Fi?”. Możesz przeszukiwać Stack Overflow bez rejestracji, ale jeśli chcesz opublikować nowe pytanie lub odpowiedzieć na pytanie, musisz się zarejestrować.
  3. W polu wyszukiwania wpisz [android]. Nawiasy [] wskazują, że chcesz wyszukać posty, które zostały oznaczone jako dotyczące Androida.
  4. Możesz połączyć tagi i wyszukiwane słowa, aby zawęzić wyszukiwanie. Spróbuj wyszukać:
  • [android] and [layout]
  • [android] "hello world"

Krok 4. Zainstaluj dokumentację offline za pomocą pakietu SDK

Podczas instalacji Android Studio razem z podstawowymi elementami otrzymujesz pakiet Android SDK. Aby zainstalować inne dostępne biblioteki i dokumentację, użyj Menedżera pakietów SDK.

Aby poznać Menedżera pakietów SDK i pobrać dokumentację, wykonaj te czynności:

  1. W Android Studio wybierz Narzędzia &Menedżer pakietów SDK. Otworzy się Menedżer pakietów SDK.
  2. W lewej kolumnie Menedżera pakietów SDK wybierz SDK na Androida (1 na zrzucie ekranu poniżej).
  3. Ścieżka jest podana w polu Lokalizacja pakietu SDK na Androida (2 na zrzucie ekranu poniżej). Tej ścieżki możesz później użyć do znalezienia wszystkiego, co zainstalujesz.
  4. W Menedżerze pakietów SDK kliknij kartę Platformy SDK. Tutaj możesz zainstalować więcej wersji systemu Android.
  5. Kliknij kartę Narzędzia SDK. Tutaj możesz zainstalować narzędzia dla deweloperów, które nie są domyślnie instalowane. Możesz też zainstalować wersję offline dokumentacji dla deweloperów aplikacji na Androida.
  6. Kliknij kartę Witryny aktualizacji pakietu SDK. Android Studio regularnie sprawdza dostępność aktualizacji w wybranych i wybranych witrynach.
  7. Wróć na kartę Narzędzia SDK i zaznacz pole wyboru Dokumentacja pakietu SDK na Androida, jeśli nie jest zaznaczona. Kliknij Zastosuj.

    Pojawi się okno potwierdzenia z informacją o ilości potrzebnego miejsca na dysku do pobrania. Kliknij OK.
  8. Po zakończeniu instalacji kliknij Zakończ.

Aby znaleźć zainstalowaną dokumentację, wykonaj te czynności:

  1. Na komputerze otwórz katalog Android/sdk/. (Aby znaleźć ścieżkę do katalogu, zobacz pole Lokalizacja pakietu SDK na Androida – na ilustracji powyżej jest to 2).
  2. Otwórz katalog docs/.
  3. Znajdź plik index.html i otwórz go w przeglądarce.
  • Oficjalne dokumenty dla programistów aplikacji na Androida są dostępne na developer.android.com.
  • Material Design to filozofia projektowania, która określa, jak aplikacje powinny wyglądać i działać na urządzeniach mobilnych. Material Design nie dotyczy tylko aplikacji na Androida. Wytyczne dotyczące stylu Material Design znajdziesz na stronie material.io.
  • Android Studio udostępnia szablony popularnych i zalecanych projektów aplikacji oraz aktywności. Szablony te zawierają kod roboczy do typowych przypadków użycia.
  • Podczas tworzenia projektu możesz wybrać szablon dla pierwszej aktywności.
  • Podczas tworzenia aplikacji możesz tworzyć aktywności i inne elementy aplikacji z wbudowanych szablonów.
  • Fragmenty Google zawierają przykłady kodu, które możesz analizować, kopiować i włączać do swoich projektów.

Kurs Udacity:

Dokumentacja Androida Studio:

Dokumentacja dla programistów Androida:

Przykłady kodu:

Materiały wideo:

Inne zasoby:

Rozpocznij następną lekcję: 2.1 Układ liniowy w Edytorze układu

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