Android Kotlin Fundamentals 01.4: Learn to help yourself

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

W tym ćwiczeniu z programowania dowiesz się o zasobach przydatnych dla deweloperów aplikacji na Androida w Kotlinie, takich jak szablony, dokumentacja, filmy i przykładowe aplikacje.

Co warto wiedzieć

  • Podstawowy przepływ pracy w Android Studio.
  • Jak korzystać z edytora układu w Android Studio

Czego się nauczysz

  • Gdzie można znaleźć informacje i materiały dla deweloperów Kotlin i Androida.
  • Jak zmienić ikonę programu uruchamiającego w aplikacji.
  • Jak szukać pomocy podczas tworzenia aplikacji na Androida w Kotlinie.

Jakie zadania wykonasz

  • Zapoznaj się z materiałami dostępnymi dla programistów na Androida, którzy używają języka Kotlin, niezależnie od poziomu zaawansowania.
  • Pobierz i przetestuj przykładową aplikację na Androida w Kotlinie.
  • zmienić ikonę aplikacji w programie uruchamiającym;

Z tych ćwiczeń z programowania dowiesz się więcej o szablonach, przykładach, dokumentacji i innych materiałach dostępnych dla deweloperów na Androida, którzy programują w Kotlinie.

Najpierw utworzysz prostą aplikację na podstawie szablonu Android Studio i ją zmodyfikujesz. Następnie pobierzesz i przeanalizujesz przykładową aplikację Android Sunflower. Zastąpisz ikonę programu uruchamiającego przykładowej aplikacji (słonecznik) zasobem obrazu clipart dostępnym w Android Studio (uśmiechnięta buźka).

Android Studio udostępnia szablony typowych i zalecanych projektów aplikacji i aktywności. Wbudowane szablony pozwalają zaoszczędzić czas i ułatwiają stosowanie sprawdzonych metod projektowania.

Każdy szablon zawiera szkielet aktywności i interfejsu użytkownika. W tym kursie używasz już szablonu pustej aktywności. Szablon Podstawowa aktywność ma więcej funkcji i zawiera zalecane funkcje aplikacji, takie jak menu opcji, które pojawia się na pasku aplikacji na urządzeniach z Androidem.

Krok 1. Poznaj architekturę podstawowej aktywności

  1. W Android Studio utwórz projekt.
  2. W oknie Choose your project (Wybierz projekt) wybierz szablon Basic Activity (Podstawowa aktywność) i kliknij Next (Dalej).
  3. W oknie Skonfiguruj projekt nadaj aplikacji dowolną nazwę. Wybierz Kotlin jako język i zaznacz pole wyboru Używaj artefaktów AndroidX. Kliknij Zakończ.
  4. Skompiluj aplikację i uruchom ją w emulatorze lub na urządzeniu z Androidem.
  5. Zidentyfikuj oznaczone części na rysunku i w tabeli poniżej. Znajdź ich odpowiedniki na ekranie urządzenia lub emulatora. Sprawdź odpowiedni kod w Kotlinie i pliki XML opisane w tabeli.

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

Architektura szablonu podstawowego działania

#

Opis interfejsu

Odwołanie do kodu

1

pasek stanu, który jest udostępniany i kontrolowany przez system Android;

Nie jest widoczny w kodzie szablonu, ale możesz uzyskać do niego dostęp z poziomu aktywności. Możesz na przykład dodać kod w MainActivity.kt, aby w razie potrzeby ukryć pasek stanu.

2

Pasek aplikacji, zwany też paskiem działań, zapewnia strukturę wizualną, standardowe elementy wizualne i nawigację.

W sekcji activity_main.xml znajdź Pasek narzędzi.

w elemencie AppBarLayout. Aby zachować zgodność wsteczną, element AppBarLayout w szablonie zawiera element Toolbar, który ma takie same funkcje jak element ActionBar.

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

3

Nazwa aplikacji jest początkowo tworzona na podstawie nazwy pakietu, ale możesz ją zmienić na dowolną.

W AndroidManifest.xml poszukaj

android:label="@string/app_name".

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

4

Przycisk rozszerzonego menu opcji zawiera pozycje menu aktywności. Przycisk menu rozwijanego zawiera też globalne opcje menu, takie jak Wyszukiwanie i Ustawienia aplikacji. Elementy menu aplikacji znajdują się w tym menu.

W MainActivity.kt

Metoda onOptionsItemSelected() określa, co się stanie, gdy użytkownik wybierze element menu.

Aby wyświetlić elementy menu opcji, otwórz res/menu/menu_main.xml.

. W tym szablonie określono tylko pozycję menu Ustawienia.

5

CoordinatorLayout ViewGroup to układ, który zapewnia mechanizmy interakcji elementów interfejsu. Interfejs aplikacji znajduje się w pliku content_main.xml, który jest zawarty w tym ViewGroup.

W activity_main.xml znajdź instrukcję include layout. W tym układzie nie określono żadnych widoków. Zamiast tego zawiera on układ content_main, w którym określono widoki aplikacji. Widoki systemowe są oddzielone od widoków unikalnych dla Twojej aplikacji.

6

Szablon używa elementu TextView do wyświetlania tekstu „Hello World”. Zastąp ten element TextView elementami interfejsu aplikacji.

Widok tekstu „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

W activity_main.xml znajdź element FloatingActionButton. FAB jest zdefiniowany jako element interfejsu z ikoną clip-art. MainActivity.kt zawiera stub w onCreate(), który ustawia onClick() odbiornik dla FAB.

Krok 2. Dostosuj aplikację utworzoną na podstawie szablonu

Zmień wygląd aplikacji utworzonej na podstawie szablonu Podstawowa aktywność. Możesz na przykład zmienić kolor paska aplikacji, aby pasował do paska stanu. (Na niektórych urządzeniach pasek stanu ma ciemniejszy odcień tego samego koloru podstawowego, którego używa pasek aplikacji).

  1. Zmień nazwę aplikacji wyświetlaną na pasku aplikacji. Aby to zrobić, zmień zasób ciągu app_name w pliku res > values > strings.xml na: 
<string name="app_name">New Application</string>
  1. Zmień kolor paska aplikacji (Toolbar) w pliku res > layout > activity_main.xml, zmieniając atrybut android:background na "?attr/colorPrimaryDark". Ta wartość ustawia kolor paska aplikacji na ciemniejszy kolor podstawowy, który pasuje do paska 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 dopasowany do koloru paska stanu. Gdy klikniesz FAB, pojawi się pasek informacyjny (1 na zrzucie ekranu poniżej).
  2. Zmień tekst paska powiadomień. Aby to zrobić, otwórz MainActivity i poszukaj w onCreate() kodu stub, który ustawia onClick() odbiornik dla przycisku. Zmień "Replace with your own action" na coś innego. Na przykład:
fab.setOnClickListener { view ->
   Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
       .setAction("Action", null).show()
}
  1. Pływający przycisk działania korzysta z koloru uzupełniającego aplikacji, więc aby zmienić jego kolor, wystarczy zmienić kolor uzupełniający. Aby zmienić kolor akcentu, otwórz plik res > values > colors.xml i zmień atrybut colorAccent, jak pokazano poniżej. (W wyborze kolorów pomoże Ci system kolorów Material Design).
<color name="colorAccent">#1DE9B6</color>
  1. Uruchom aplikację. FAB używa nowego koloru, a tekst paska powiadomień został zmieniony.

Krok 3. Dowiedz się, jak dodawać aktywności za pomocą szablonów

W przypadku dotychczasowych ćwiczeń z tego kursu do tworzenia nowych projektów używaliśmy szablonów Pusta aktywność i Podstawowa aktywność. Podczas tworzenia działań po utworzeniu projektu możesz też używać szablonów działań.

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

Repozytoria Google Samples na GitHubie zawierają przykłady kodu Kotlin na Androida, które możesz analizować, kopiować i wdrażać w swoich projektach.

Krok 1. Pobierz i uruchom przykładowy kod Kotlin na Androida

  1. W przeglądarce otwórz stronę github.com/googlesamples.
  2. W polu Język wybierz Kotlin.
  3. Wybierz niedawno zmodyfikowaną przykładową aplikację na Androida w Kotlinie i pobierz kod projektu aplikacji. Na potrzeby tego przykładu pobierz plik ZIP aplikacji android-sunflower, która demonstruje niektóre komponenty Androida Jetpack.
  4. W Android Studio otwórz projekt android-sunflower-master.
  5. Zaakceptuj wszystkie aktualizacje zalecane przez Android Studio, a następnie uruchom aplikację w emulatorze lub na urządzeniu z Androidem.

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

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

  1. Aby dowiedzieć się, co demonstruje przykładowa aplikacja, otwórz plik README aplikacji w GitHubie. W tym przykładzie zapoznaj się z plikiem README aplikacji Android Sunflower.
  2. W Android Studio otwórz jeden z plików aktywności Kotlin w aplikacji, np. GardenActivity.kt.
  3. W GardenActivity.kt znajdź klasę, typ lub procedurę, których nie znasz, i wyszukaj je w dokumentacji dla deweloperów Androida. Jeśli na przykład chcesz dowiedzieć się więcej o metodzie setContentView(), wyszukaj na stronie developer.android.com hasło setContentView().

Krok 3. Zmień ikonę programu uruchamiającego

W tym kroku zmienisz ikonę programu uruchamiającego dla przykładowej aplikacji Android Sunflower. Dodasz obraz z klipartu i użyjesz go do zastąpienia bieżącej ikony programu uruchamiającego Android Sunflower.

Ikony programu uruchamiającego

Każda aplikacja utworzona w Android Studio ma domyślną ikonę programu uruchamiającego, która ją reprezentuje. Ikony programu uruchamiającego są czasami nazywane ikonami aplikacji lub ikonami produktu.

Jeśli opublikujesz aplikację w Google Play, jej ikona programu uruchamiającego będzie widoczna w informacjach o aplikacji i w wynikach wyszukiwania w Sklepie Google Play.

Po zainstalowaniu aplikacji na urządzeniu z Androidem jej ikona programu uruchamiającego pojawia się na ekranie głównym urządzenia i w innych miejscach. Na przykład ikona programu uruchamiającego aplikacji Android Sunflower pojawia się w oknie Wyszukaj aplikacje na urządzeniu (na zrzucie ekranu poniżej jest oznaczona numerem 1). Domyślna ikona programu uruchamiającego, oznaczona numerem 2, jest początkowo używana we wszystkich projektach aplikacji tworzonych w Android Studio.

Zmiana ikony programu uruchamiającego

Proces zmiany ikony programu uruchamiającego zapozna Cię z funkcjami zasobów graficznych Android Studio.

Aby zmienić ikonę programu uruchamiającego aplikacji Android Sunflower w Android Studio:

  1. W panelu Project > Android kliknij prawym przyciskiem myszy (lub kliknij z naciśniętym klawiszem Control) folder res. Kliknij Nowy > Zasób graficzny. Pojawi się okno Skonfiguruj komponent z obrazem.

Kliknij kartę Warstwa pierwszego planu dla ikony programu uruchamiającego.

  1. W polu Typ ikony wybierz Ikony aplikacji (adaptacyjne i starsze), jeśli nie jest jeszcze wybrana. Kliknij kartę Warstwa pierwszego planu.
  2. W polu Typ komponentu wybierz Grafika, jak pokazano na zrzucie ekranu poniżej (1).

  3. Kliknij ikonę robota w polu Clip Art (na zrzucie ekranu powyżej oznaczonym numerem 2). Pojawi się okno Wybierz ikonę z zestawem ikon Material Design.
  4. Przejrzyj okno Wybierz ikonę lub wyszukaj ikonę według nazwy. Wybierz ikonę, np. nastrój, aby zasugerować dobry nastrój. Kliknij OK.

  1. W oknie Skonfiguruj komponent z obrazem kliknij kartę Warstwa tła. Jako Typ zasobu wybierz Kolor. Kliknij próbkę koloru i wybierz kolor, który ma być warstwą tła ikony.
  2. Kliknij kartę Starsze i sprawdź ustawienia domyślne. Potwierdź, że chcesz wygenerować starsze, okrągłe ikony i ikony do Sklepu Google Play. Kliknij Dalej.
  3. Pojawi się okno Potwierdź ścieżkę ikony, 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 ikony do katalogów mipmap dla różnych gęstości ekranu. Aplikacja Android Sunflower używa teraz nowej ikony clipartu jako ikony uruchamiania.

  1. Uruchom ponownie aplikację. Sprawdź, czy nowa ikona programu uruchamiającego jest widoczna na ekranie Wyszukaj aplikacje.

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

Zapoznaj się z kilkoma najbardziej przydatnymi witrynami z dokumentacją Androida i sprawdź, co jest dostępne:

  1. Otwórz stronę developer.android.com. Ta oficjalna dokumentacja dla deweloperów Androida jest aktualizowana przez Google.
  2. Wejdź na developer.android.com/design/. Ta strona zawiera wytyczne dotyczące projektowania wyglądu i funkcjonalności wysokiej jakości aplikacji na Androida.
  3. Otwórz material.io, czyli witrynę poświęconą Material Design. Material Design to koncepcyjna filozofia projektowania, która określa, jak wszystkie aplikacje, nie tylko te na Androida, powinny wyglądać i działać na urządzeniach mobilnych. Kliknij linki, aby dowiedzieć się więcej o Material Design. Aby na przykład dowiedzieć się więcej o użyciu koloru, kliknij kartę Projekt, a następnie wybierz Kolor.
  4. Na stronie developer.android.com/docs/ znajdziesz informacje o interfejsie API, dokumentację, samouczki, przewodniki po narzędziach i przykłady kodu.
  5. Informacje o publikowaniu aplikacji w Google Play znajdziesz na stronie developer.android.com/distribute/. Google Play to system dystrybucji cyfrowej Google dla aplikacji opracowanych za pomocą pakietu Android SDK. Korzystaj z Konsoli Google Play, aby zwiększać liczbę użytkowników i zarabiać pieniądze.

Krok 2. Zapoznaj się z treściami od zespołu Androida i wyszukiwarki Google

  1. Odwiedź kanał Android Developers w YouTube, gdzie znajdziesz wiele samouczków i porad.
  2. Odwiedź oficjalny blog Androida, na którym zespół Androida publikuje wiadomości i wskazówki.
  3. Wpisz pytanie w wyszukiwarce Google, a wyszukiwarka Google zbierze odpowiednie wyniki z różnych źródeł. Na przykład w wyszukiwarce Google możesz zadać pytanie „Jaka jest najpopularniejsza wersja systemu operacyjnego Android w Indiach?”. Możesz nawet wpisać komunikaty o błędach w wyszukiwarce Google.

Krok 3. Wyszukaj w Stack Overflow

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

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

Krok 4. Użyj Menedżera pakietów SDK, aby zainstalować dokumentację offline

Podczas instalowania Android Studio instalowane są też niezbędne komponenty pakietu Android SDK. Aby zainstalować inne dostępne biblioteki i dokumentację, użyj Menedżera SDK.

Aby zapoznać się z Menedżerem SDK i pobrać dokumentację pakietu SDK, wykonaj te czynności:

  1. W Android Studio wybierz Narzędzia > Menedżer SDK. Otworzy się Menedżer SDK.
  2. W kolumnie po lewej stronie Menedżera pakietów SDK wybierz Android SDK (1 na zrzucie ekranu poniżej).
  3. Zanotuj ścieżkę w polu Android SDK Location (2 na zrzucie ekranu poniżej). Ta ścieżka będzie później potrzebna do znalezienia zainstalowanych elementów.
  4. W Menedżerze SDK kliknij kartę Platformy SDK. W tym miejscu możesz zainstalować więcej wersji systemu Android.
  5. Kliknij kartę Narzędzia SDK. W tym miejscu możesz zainstalować narzędzia programistyczne pakietu SDK, które nie są domyślnie zainstalowane. Możesz też zainstalować wersję offline dokumentacji dla programistów na Androida.
  6. Kliknij kartę Witryny aktualizacji pakietu SDK. Android Studio regularnie sprawdza wymienione i wybrane witryny pod kątem aktualizacji.
  7. Wróć na kartę Narzędzia SDK i zaznacz pole wyboru Dokumentacja pakietu SDK do Androida, jeśli nie jest jeszcze zaznaczone. Kliknij Zastosuj.

    Otworzy się okno potwierdzenia z informacją o tym, ile miejsca na dysku wymaga pobieranie. 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 Android SDK, które na powyższym zrzucie ekranu jest oznaczone numerem 2).
  2. Otwórz katalog docs/.
  3. Znajdź plik index.html i otwórz go w przeglądarce.
  • Oficjalna dokumentacja dla deweloperów aplikacji na Androida jest dostępna na stronie developer.android.com.
  • Material Design to koncepcyjna filozofia projektowania, która określa, jak aplikacje powinny wyglądać i działać na urządzeniach mobilnych. Material Design nie jest przeznaczony tylko dla aplikacji na Androida. Wytyczne Material Design znajdziesz na stronie material.io.
  • Android Studio udostępnia szablony typowych i zalecanych projektów aplikacji i aktywności. Te szablony zawierają działający kod w przypadku typowych zastosowań.
  • Podczas tworzenia projektu możesz wybrać szablon pierwszej aktywności.
  • Podczas tworzenia aplikacji możesz tworzyć aktywności i inne komponenty aplikacji na podstawie wbudowanych szablonów.
  • Przykłady Google zawierają przykładowy kod, który możesz analizować, kopiować i wdrażać w swoich projektach.

Kurs Udacity:

Dokumentacja Android Studio:

Dokumentacja dla deweloperów aplikacji na Androida:

Przykładowe fragmenty kodu:

Materiały wideo:

Inne zasoby:

Przejdź do następnej lekcji: 2.1. Układ liniowy w Edytorze układu

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